# 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>
  例如製作搜尋高雄市某個區有幾個公園,開放API 新興區,鳳山區,三民區陣列公園裡面公園名稱,地址...就是資料。
  用<b class='red'>陣列</b>與<b class='red'>物件</b>規劃你的資料,應用<b>LocalStorage</b>觀念。
<b class='blue'>1.事件</b>
  選單選擇左營區,click[確認]button,撈出左營區公園資料.<b class='red'>click[確認]button</b> 為事件。
  搭配<b class='green'>function函數來規劃</b>,注意<b>事件指的是使用者和畫面上的互動</b>。
<b class='blue'>1.介面</b>
  在螢幕畫面產生運算結果,常常搭配<b class='red'>innerHTML</b>或<b class='red'>creatElement</b>
**【範例】** vue To do list為範例
#### <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">×</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">×</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">×</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">×</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,
});
},
}
```
Sign in with Wallet
Connect another wallet