（vue基础试炼_03）使用vue.js实现TodoList
接上一篇：（vue基礎(chǔ)試煉_02）使用vue.js實(shí)現(xiàn)隔2秒顯示不同內(nèi)容https://gblfy.blog.csdn.net/article/details/103841818
| v-for | 循環(huán)數(shù)據(jù) |
| v-on | 綁定事件 |
| v-model | 數(shù)據(jù)的雙向綁定 |
文章目錄
- 一、需求說明
- ① 案例文檔
- ② 基礎(chǔ)代碼
- ③ 基礎(chǔ)效果圖
- 二、v-for指令學(xué)習(xí)
- ① 使用`v-for`指令 循環(huán)顯示列表內(nèi)容
- ② 使用`v-for`指令 基礎(chǔ)效果圖
- ③ `v-for` 解說
- 三、v-on指令學(xué)習(xí)
- 四、v-model指令學(xué)習(xí)
- ① v-model作用
- ② v-model預(yù)測
- ③ 頁面驗(yàn)證v-model
- ④ 獲取input的內(nèi)容
- ⑤ 如何從methods中獲取data中的inputValue
- 五、獲取內(nèi)容添加內(nèi)容
- ①思考
- ② 代碼說明
- ③ 效果圖
- ④場景分析
- ⑤ 清空輸入框內(nèi)容
- ⑥ 瀏覽器驗(yàn)證
- 六、TodoList總結(jié)
一、需求說明
① 案例文檔
1. 在頁面上有一個(gè)輸入框和提交按鈕 2. 當(dāng)在輸入框中輸入內(nèi)容，點(diǎn)擊提交按鈕時(shí)，內(nèi)容會(huì)顯示在下面的列表中 3. 當(dāng)點(diǎn)擊提交按鈕時(shí)，輸入框中的內(nèi)容要清空② 基礎(chǔ)代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>使用vue.js 實(shí)現(xiàn)TodoList</title> </head> <body> <div id="app"><input type="text"><button>提交</button><ul><li>第一課的內(nèi)容</li><li>第二課的內(nèi)容</li></ul> </div> </body> </html>③ 基礎(chǔ)效果圖
二、v-for指令學(xué)習(xí)
| v-for | 數(shù)據(jù)循環(huán) |
① 使用v-for指令 循環(huán)顯示列表內(nèi)容
<!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>/*創(chuàng)建了一個(gè)vue實(shí)例*/var app = new Vue({el: '#app',data: {list: ['第一課的內(nèi)容', '第二課的內(nèi)容']}}); </script> </body> </html>② 使用v-for指令 基礎(chǔ)效果圖
③ v-for 解說
借助v-for指令循環(huán)list數(shù)據(jù)，利用item來循環(huán)，循環(huán)的每一項(xiàng)都放到一個(gè)item里面，然后，利用插值表達(dá)式，將item渲染出來
| v-for | 循環(huán)數(shù)據(jù) |
| list | 循環(huán)的list |
| item | 循環(huán)的每一項(xiàng)都是一個(gè)item，簡言之，循環(huán)的每一項(xiàng)內(nèi)容都放到item中 |
| {{item}} | 利用插值表達(dá)式獲取每一個(gè)item的內(nèi)容，在頁面渲染顯示 |
三、v-on指令學(xué)習(xí)
| v-on | 事件綁定 |
當(dāng)在輸入框中輸入內(nèi)容，點(diǎn)擊提交按鈕時(shí)，內(nèi)容會(huì)顯示在下面的列表中
思路分析
那當(dāng)點(diǎn)擊提交時(shí)，被綁定的handleBtnClick事件方法 去哪找呢？
這個(gè)div屬于vue接管的區(qū)域，因此，當(dāng)觸發(fā)handleBtnClic事件時(shí)，vue就會(huì)到vue實(shí)例中的methods中去找handleBtnClick這個(gè)方法，找到之后就會(huì)執(zhí)行。
四、v-model指令學(xué)習(xí)
① v-model作用
| v-model | 雙向綁定 |
② v-model預(yù)測
v-model指的是數(shù)據(jù)的雙向綁定，也就是當(dāng)input框中的內(nèi)容發(fā)生變化的時(shí)候，vue實(shí)例中的data里面的inputValue也會(huì)發(fā)生變化；同樣當(dāng)vue實(shí)例中的data里面的inputValue這個(gè)變量發(fā)生變化時(shí)，頁面也會(huì)跟著發(fā)生變化。
③ 頁面驗(yàn)證v-model
在頁面中開啟F12找到控制臺(tái)Console，在控制臺(tái)中輸出inputValue看看默認(rèn)是什么？
可以借助全局的app變量來實(shí)現(xiàn)
很明顯默認(rèn)是空字符串
當(dāng)在輸入框中輸入內(nèi)容，再到控制臺(tái)，在此執(zhí)行上一次命令，看效果
很明顯，現(xiàn)在的inputValue得值和輸入框中一樣。可以概括為，當(dāng)輸入框中的值發(fā)生變化時(shí)，vue實(shí)例中的data里面的inputValue的值也會(huì)發(fā)生變化；那咱們反過來試一下，修改vue實(shí)例中的data里面的inputValue的值的數(shù)據(jù)，驗(yàn)證頁面輸入框中的值是否跟著變化？
經(jīng)驗(yàn)證，也會(huì)發(fā)上變化。
④ 獲取input的內(nèi)容
當(dāng)點(diǎn)擊提交時(shí)，怎樣獲取到input輸入框中的內(nèi)容呢？
使用v-model模板指令獲取input輸入框中內(nèi)容，但是，需要雙向綁定才可以。
把input中的inputValue值和data中的inputValue值做雙向綁定。
⑤ 如何從methods中獲取data中的inputValue
既然input中的inputValue值和data中的inputValue值做雙向綁定。那么data中的inputValue的值其實(shí)就是input框中的inputValue的值，那在methods的handleBtnClick方法中，如何獲取data數(shù)據(jù)配置項(xiàng)中的inputValue的值呢 ？
通過this.inputValue即可，當(dāng)使用this.inputValue時(shí)，vue會(huì)自動(dòng)的到數(shù)據(jù)配置項(xiàng)data中找inputValue
測試一下
一開始input礦中的值默認(rèn)是空的，點(diǎn)擊提交，彈框空的
當(dāng)我們在輸入框中，寫內(nèi)容時(shí)，再次測試
測試和預(yù)期一樣
五、獲取內(nèi)容添加內(nèi)容
①思考
ul里面有多少個(gè)li，是由data(數(shù)據(jù)配置項(xiàng))中的list決定的。我們每一次提交，只需要將每次提交的數(shù)據(jù)放到list的數(shù)組中就可以了，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，是不是頁面也會(huì)跟這變呢？
② 代碼說明
| this.list | 相當(dāng)于data中的list 數(shù)組 |
| this.list.push | 意味著王list數(shù)組中添加內(nèi)容 |
| this.inputValue | data中的inputValue 的值 |
③ 效果圖
④場景分析
每一次提交的時(shí)候，我們可以獲取到每一次inout中的那內(nèi)容，然后把獲取的內(nèi)容添加到list的數(shù)組中，當(dāng)數(shù)據(jù)發(fā)生變化，頁面就會(huì)跟著發(fā)生變化了。
⑤ 清空輸入框內(nèi)容
在輸入框中輸入內(nèi)容，點(diǎn)擊提交，提交到data里面的list數(shù)組中，但是，發(fā)現(xiàn)輸入框中我們輸入的內(nèi)容依然存在，那又該如何清空呢？
我們知道this.inputValue = input中的inputValue，我們是不是只需要改變data數(shù)據(jù)配置項(xiàng)中的inputValue 的值，就可以修改input框中的inputValue 的值，因?yàn)楫?dāng)數(shù)據(jù)法身變化是，頁面也會(huì)法身變化，對吧！既然這樣，那我們當(dāng)點(diǎn)擊提交按鈕，提交完成后，把this.inputValue的值設(shè)置為空，不就可以了。
⑥ 瀏覽器驗(yàn)證
依次輸入123，點(diǎn)擊提交
從上圖我們可以知道和我們預(yù)測的一致。
六、TodoList總結(jié)
整合TodoList編碼中，沒有出現(xiàn)對dom的操作語句，取而代之，我們都在操作數(shù)據(jù)，列表中的內(nèi)容我們放在list的數(shù)組中，input框中的內(nèi)容我們放到inputValue中，當(dāng)我們做一些操作的時(shí)候，觸發(fā)點(diǎn)擊事件之后，并不是改變dom，而是去改變數(shù)據(jù)；數(shù)據(jù)變了，頁面自動(dòng)的也會(huì)發(fā)生改變，這種形式，就是我們在寫vue編碼時(shí)天天都要用到的模式MVVM設(shè)計(jì)模式。
下一篇：（vue基礎(chǔ)試煉_04）使用組件改造TodoListhttps://gblfy.blog.csdn.net/article/details/103844256
總結(jié)
以上是生活随笔為你收集整理的（vue基础试炼_03）使用vue.js实现TodoList的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （需求实战_进阶_06）SSM集成Rab
- 下一篇： Vue 试炼总览