接上一篇：（vue基礎試煉_02）使用vue.js實作隔2秒顯示不同内容
| 指令 | 作用 |
| v-for | 循環資料 |
| v-on | 綁定事件 |
| v-model | 資料的雙向綁定 |
文章目錄
- 一、需求說明
- ① 案例文檔
- ② 基礎代碼
- ③ 基礎效果圖
- 二、v-for指令學習
- ① 使用`v-for`指令 循環顯示清單内容
- ② 使用`v-for`指令 基礎效果圖
- ③ `v-for` 解說
- 三、v-on指令學習
- 四、v-model指令學習
- ① v-model作用
- ② v-model預測
- ③ 頁面驗證v-model
- ④ 擷取input的内容
- ⑤ 如何從methods中擷取data中的inputValue
- 五、擷取内容添加内容
- ①思考
- ② 代碼說明
- ③ 效果圖
- ④場景分析
- ⑤ 清空輸入框内容
- ⑥ 浏覽器驗證
- 六、TodoList總結
一、需求說明
① 案例文檔
1. 在頁面上有一個輸入框和送出按鈕
2. 當在輸入框中輸入内容，點選送出按鈕時，内容會顯示在下面的清單中
3. 當點選送出按鈕時，輸入框中的内容要清空 ② 基礎代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用vue.js 實作TodoList</title>
</head>
<body>
<div id="app">
<input type="text">
<button>送出</button>
<ul>
<li>第一課的内容</li>
<li>第二課的内容</li>
</ul>
</div>
</body>
</html> ③ 基礎效果圖
二、v-for指令學習
| 指令 | 作用 |
| v-for | 資料循環 |
① 使用v-for指令 循環顯示清單内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用vue.js 快速入門hello world</title>
<!--引入vue.js庫-->
<script src="vue.js"></script>
</head>
<body>
<!--vue接管的div-->
<div id="app">
<input type="text">
<button>送出</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
/*建立了一個vue執行個體*/
var app = new Vue({
el: '#app',
data: {
list: ['第一課的内容', '第二課的内容']
}
});
</script>
</body>
</html>
② 使用v-for指令 基礎效果圖
③ v-for 解說
借助v-for指令循環list資料，利用item來循環，循環的每一項都放到一個item裡面，然後，利用插值表達式，将item渲染出來
| 标簽指令 | 說明 |
| v-for | 循環資料 |
| list | 循環的list |
| item | 循環的每一項都是一個item，簡言之，循環的每一項内容都放到item中 |
| {{item}} | 利用插值表達式擷取每一個item的内容，在頁面渲染顯示 |
三、v-on指令學習
| 指令 | 作用 |
| v-on | 事件綁定 |
當在輸入框中輸入内容，點選送出按鈕時，内容會顯示在下面的清單中
思路分析
1. 剛進入頁面應該是沒有資料的
2. 在點選送出時，要先該發生點什麼，需要綁定一個事件，在實踐中書寫邏輯
3. 在vue中綁定事件用v-on v-on:click="事件名稱"
4. 定義的事件方法函數要定義在Vue執行個體的methods中的鍵值對裡面 那當點選送出時，被綁定的handleBtnClick事件方法 去哪找呢？
這個div屬于vue接管的區域，是以，當觸發handleBtnClic事件時，vue就會到vue執行個體中的methods中去找handleBtnClick這個方法，找到之後就會執行。
四、v-model指令學習
① v-model作用
| 指令 | 作用 |
| v-model | 雙向綁定 |
② v-model預測
v-model指的是資料的雙向綁定，也就是當input框中的内容發生變化的時候，vue執行個體中的data裡面的inputValue也會發生變化；同樣當vue執行個體中的data裡面的inputValue這個變量發生變化時，頁面也會跟着發生變化。
③ 頁面驗證v-model
在頁面中開啟F12找到控制台Console，在控制台中輸出inputValue看看預設是什麼？
可以借助全局的app變量來實作
很明顯預設是空字元串
當在輸入框中輸入内容，再到控制台，在此執行上一次指令，看效果
很明顯，現在的inputValue得值和輸入框中一樣。可以概括為，當輸入框中的值發生變化時，vue執行個體中的data裡面的inputValue的值也會發生變化；那咱們反過來試一下，修改vue執行個體中的data裡面的inputValue的值的資料，驗證頁面輸入框中的值是否跟着變化？
經驗證，也會發上變化。
④ 擷取input的内容
當點選送出時，怎樣擷取到input輸入框中的内容呢？
使用v-model模闆指令擷取input輸入框中内容，但是，需要雙向綁定才可以。
把input中的inputValue值和data中的inputValue值做雙向綁定。
⑤ 如何從methods中擷取data中的inputValue
既然input中的inputValue值和data中的inputValue值做雙向綁定。那麼data中的inputValue的值其實就是input框中的inputValue的值，那在methods的handleBtnClick方法中，如何擷取data資料配置項中的inputValue的值呢 ？
通過
this.inputValue
即可，當使用
this.inputValue
時，vue會自動的到資料配置項data中找inputValue
測試一下
一開始input礦中的值預設是空的，點選送出，彈框空的
當我們在輸入框中，寫内容時，再次測試
測試和預期一樣
五、擷取内容添加内容
①思考
ul裡面有多少個li，是由data(資料配置項)中的list決定的。我們每一次送出，隻需要将每次送出的資料放到list的數組中就可以了，當資料發生變化時，是不是頁面也會跟這變呢？
② 代碼說明
| 說明 | |
| this.list | 相當于data中的list 數組 |
| this.list.push | 意味着王list數組中添加内容 |
| this.inputValue | data中的inputValue 的值 |
③ 效果圖
④場景分析
每一次送出的時候，我們可以擷取到每一次inout中的那内容，然後把擷取的内容添加到list的數組中，當資料發生變化，頁面就會跟着發生變化了。
⑤ 清空輸入框内容
在輸入框中輸入内容，點選送出，送出到data裡面的list數組中，但是，發現輸入框中我們輸入的内容依然存在，那又該如何清空呢？
我們知道
this.inputValue = input中的inputValue
，我們是不是隻需要改變data資料配置項中的inputValue 的值，就可以修改input框中的inputValue 的值，因為當資料法身變化是，頁面也會法身變化，對吧！既然這樣，那我們當點選送出按鈕，送出完成後，把
this.inputValue
的值設定為空，不就可以了。
⑥ 浏覽器驗證
依次輸入123，點選送出
從上圖我們可以知道和我們預測的一緻。