---
# System prepended metadata

title: Javacript觀念篇(搭配vue)
tags: [JavaScript]

---

# Javacript觀念篇(搭配vue)
###### tags: `JavaScript`

<style>

.blue{
color:MidnightBlue;
}
.red{color:LightCoral}
.green{color:LightSeaGreen}
</style>

Javacript撰寫程式,需要拆成以下三個組件去思考

<ol>
<li><b>資料Model</b></li>
<li><b>事件Event</b></li>
<li><b>介面Veiw</b></li>
</ol>


<b class='blue'>1.資料</b>
&emsp;&emsp;例如製作搜尋高雄市某個區有幾個公園,開放API 新興區,鳳山區,三民區陣列公園裡面公園名稱,地址...就是資料。
&emsp;&emsp;用<b class='red'>陣列</b>與<b class='red'>物件</b>規劃你的資料,應用<b>LocalStorage</b>觀念。


<b class='blue'>1.事件</b>
&emsp;&emsp;選單選擇左營區,click[確認]button,撈出左營區公園資料.<b class='red'>click[確認]button</b> 為事件。
&emsp;&emsp;搭配<b class='green'>function函數來規劃</b>,注意<b>事件指的是使用者和畫面上的互動</b>。


<b class='blue'>1.介面</b>
&emsp;&emsp;在螢幕畫面產生運算結果,常常搭配<b class='red'>innerHTML</b>或<b class='red'>creatElement</b>

**【範例】** vue To do list為範例

![](https://i.imgur.com/sfdkjPS.jpg)

#### <span class='blue'>操作流程為</span>
一.在input type輸入代辦事項
二.click新增button
三.group list[全部]出現新增代辦事項
四.click在group list上代辦事項的check box畫面出現刪除線
五.group list代辦事項check box未打勾前,同步出現在[進行中]頁籤
六.group list代辦事項check box已打勾,同步出現在[已完成]頁籤,在[進行中]則消失.
七.點擊右上角x,刪除代辦事項



---
#### <span class='blue'>資料/操作/介面釐清</span>

一.input type 代辦事項---->輸入代辦事項------>1.資料Model
二.新增button---->確認輸入資料------>2.事件Event
三.group list[全部]出現新增代辦事項----->3.介面Veiw



---
#### <span class='blue'>預設vue script資料</span>

```
var app =  
new Vue({
  el: '#app',
  data: {
    
  },
});
```

####  <span class='blue'>預設html資料</span>

```
<div id="app" class="container my-3">
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1">待辦事項</span>
    </div>
    <input type="text" class="form-control" placeholder="準備要做的任務">
    <div class="input-group-append">
      <button class="btn btn-primary" type="button">新增</button>
    </div>
  </div>
  <div class="card text-center">
    <div class="card-header">
      <ul class="nav nav-tabs card-header-tabs">
        <li class="nav-item">
          <a class="nav-link active" href="#">全部</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="#">進行中</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">已完成</a>
        </li>
      </ul>
    </div>
    <ul class="list-group list-group-flush text-left">
      <li class="list-group-item">
        <div class="d-flex">
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="a1">
            <label class="form-check-label" for="a1">
              Cras justo odio
            </label>
          </div>
          <button type="button" class="close ml-auto" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </li>
      <li class="list-group-item">
        <div class="d-flex">
          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="a1">
            <label class="form-check-label completed" for="a1">
              Cras justo odio
            </label>
          </div>
          <button type="button" class="close ml-auto" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </li>
      <li class="list-group-item">
        <input type="text" class="form-control">
      </li>
    </ul>
    <div class="card-footer d-flex justify-content-between">
      <span>還有 3 筆任務未完成</span>
      <a href="#">清除所有任務</a>
    </div>
  </div>
</div>
```

```
.completed {
  text-decoration: line-through
}
```
---










####  <span class='blue'>程式說明</span>

**一.在input type輸入代辦事項**

1.1輸入框輸入文字,input事件,單選框、複選框等類型的輸入控件vue使用<kbd>v-model</kbd>,newTodo輸出為文字在js用空字串表示,在本範例html js使用
` <input type="text" class="form-control" placeholder="準備要做的任務" v-model="newTodo" >`

```
var app =  
new Vue({
  el: '#app',
  data: {
     newTodo: '',
  },
});
```

**二.綁定button**
2.1在vue裡面,滑鼠新增使用 <kbd>v-on:click=""</kbd> 縮寫 <kbd>@click=""</kbd>

` <button class="btn btn-primary" type="button" v-on:click="addTodo">新增</button>`

click 是 **事件Event** 在 vue js裡面是 **methods**,所以"addTodo"是**function** ,放在methods裡面 .

```
var app =  
new Vue({
  el: '#app',
  data: {
     newTodo: '',
  },
  
  methods: {
              addTodo: function () {}
});
```

**三.綁定group list 畫面**
3.1 在畫面上是新增陣列(列表),vue使用 <kbd>v-for="item in todos"</kbd> , 屬於資料放在var app 的data: 裡面,畫面上出現東西有

a.cheack box 
b.標題名稱(代辦事項) 
c.右上角x . 

所以需要給todos資料為
a.cheack box ID ,預設 <kbd>id: '123',</kbd>
b.標題名稱(代辦事項)-title 預設 <kbd>id: 'hello',</kbd>,正式寫法是無,空字串.
c.右上角x completed. <kbd>completed: false</kbd> ,預設狀態是剛新增事項都是未完成.



```
<ul class="list-group list-group-flush text-left">
  <li class="list-group-item" v-for=“item in todos”>
    <div class="d-flex">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="a1">
        <label class="form-check-label" for="a1">
          Cras justo odio
        </label>
      </div>
      <button type="button" class="close ml-auto" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </li>
 
</ul>
```




```
var app =  
new Vue({
  el: '#app',
  data: {
     newTodo: '',
     
        todos: [
                {
                  id: '123',
                  title: 'hello',
                  completed: false
                }
              ],
              
  },
```


---

**四.綁定group list代辦事項出現veiw地方**

是處理veiw介面,找到在
<label class="form-check-label" ><span class='green'>{{item.title}}</span>  </label>
                      
*列表為陣列,所以使用v-for="item in items",item為固定詞組,而items可以自己取名*                  


```
<ul class="list-group list-group-flush text-left">
  <li class="list-group-item" v-for=“item in todos”>
    <div class="d-flex">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="a1">
        <label class="form-check-label" for="a1">
         {{item.title}}
        </label>
      </div>
      <button type="button" class="close ml-auto" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </li>
 
</ul>
```




**五.click 確認button在 group list新增代辦事項**

在methods的 function 新增 <kbd>var value = this.newTodo</kbd>

```
  
  var app =  
  new Vue({
  el: '#app',
  data: {
     newTodo: '',
     
     todos: [
                {
                  id: '123',
                  title: 'hello',
                  completed: false
                }
              ],
              
  },
  
  methods: {
              addTodo: function () {
              var value = this.newTodo ;
              
              } 
              
  
    },
});
```

**六.把內容push到畫面**

這個時候在input type輸入內容再點擊確認button,內容還不會出現在畫面上,因為還沒有在methods寫入 <kbd>push</kbd>把內容推掉data裡面的todos


 ```

 methods: {
              addTodo: function () {
                var value = this.newTodo;

           
                this.todos.push({                 
                  title: value,
                  completed: false,
                });
               
              },

            }
```
**七.阻止無內容狀態下click 確認button也可以新增內容**

但這個時候會發現,在input type沒有輸入任何內容也可以新增內容,
所以需要下條件if,沒有值的時候返回(不動作),在push的function上面 <kbd>if (!value) { return; }    </kbd>

```
methods: {
             addTodo: function () {
               var value = this.newTodo;

               if (!value) { return; }      
               this.todos.push({                 
                 title: value,
                 completed: false,
               });
              
             },

           }
```