（vue基础试炼_03）使用vue.js实现TodoList
接上一篇：（vue基礎試煉_02）使用vue.js實現隔2秒顯示不同內容https://gblfy.blog.csdn.net/article/details/103841818
| 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 | 事件綁定 |
當在輸入框中輸入內容，點擊提交按鈕時，內容會顯示在下面的列表中
思路分析
那當點擊提交時，被綁定的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，點擊提交
從上圖我們可以知道和我們預測的一致。
六、TodoList總結
整合TodoList編碼中，沒有出現對dom的操作語句，取而代之，我們都在操作數據，列表中的內容我們放在list的數組中，input框中的內容我們放到inputValue中，當我們做一些操作的時候，觸發點擊事件之后，并不是改變dom，而是去改變數據；數據變了，頁面自動的也會發生改變，這種形式，就是我們在寫vue編碼時天天都要用到的模式MVVM設計模式。
下一篇：（vue基礎試煉_04）使用組件改造TodoListhttps://gblfy.blog.csdn.net/article/details/103844256
總結
以上是生活随笔為你收集整理的（vue基础试炼_03）使用vue.js实现TodoList的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （需求实战_进阶_06）SSM集成Rab
- 下一篇： 在CentOs7上yum安装redis