您好,登錄后才能下訂單哦!
簡單的 TodoList
實(shí)現(xiàn)一個(gè)簡單的 todolist,當(dāng)我輸入內(nèi)容后,點(diǎn)擊提交自動添加在下面,如下圖所示:
用代碼實(shí)現(xiàn)這個(gè)效果:
<div id="app"> <input type="text" v-model="inputVal"> <button v-on:click="clickBtn">提交</button> <ul> <li v-for="item in list">{{item}}</li> </ul> </div> <script> let vm = new Vue({ el:'#app', data:{ list:[], inputVal:'' }, methods:{ clickBtn(){ this.list.push(this.inputVal) inputVal = '' } } }) </script>
當(dāng)我在input框中輸入內(nèi)容后,點(diǎn)擊提交,Vue 會自動將內(nèi)容渲染在頁面中,具體是怎么實(shí)現(xiàn)的呢?
我們都知道 Vue 是一個(gè) MVVM 框架,讓開發(fā)者專注于數(shù)據(jù)變更,無需關(guān)注 Dom,所以它的核心是VM層,也就是說渲染這部分不需要開發(fā)者考慮了。
循環(huán)v-for
v-for指令是 Vue 提供的api,可以實(shí)現(xiàn)循環(huán)添加
v-for="item in list"
將list中數(shù)據(jù)循環(huán)添加到頁面中,值為item
所以當(dāng)我點(diǎn)擊提交時(shí),只需要獲取到輸入框中的值,然后push到list中,我們看到的效果就是一個(gè)個(gè)添加。
綁定v-model
如何獲取輸入框中的值變成了一個(gè)問題,沒用 Vue 之前,獲取輸入框中的值,非常簡單,用$(input).val()就能輕松獲取。
用了 Vue 之后,不應(yīng)該操作 Dom 來獲取值,Vue 肯定也考慮到這點(diǎn)了,提供了一個(gè)api
v-model="inputVal"
第一次用這個(gè)指令時(shí),踩了一個(gè)坑,我在inputVal兩邊加上了雙括號,從而導(dǎo)致頁面中沒任何反應(yīng),這邊是不需要加雙括號的。渲染模版時(shí)才需要用 Vue 提供的模版字符串
一個(gè)簡單的 TodoList 就已經(jīng)實(shí)現(xiàn)了。
組件化
每個(gè)li其實(shí)都是一個(gè)組件,我們可以用組件的形式來開發(fā)
全局組件:
<div id="app"> <input type="text" v-model="inputVal"> <button v-on:click="clickBtn">提交</button> <ul> <todo-list v-for="item in list" v-bind:content="index" ></todo-list> </ul> </div> <script> Vue.component('TodoLsit',{ props:['content'], template:`<li>{{content}}</li>`, }) let vm = new Vue({ el: '#app', data: { list: [], inputVal: '' }, methods: { clickBtn() { this.list.push(this.inputVal) this.inputVal = '' } } }) </script>
用 Vue 提供的component創(chuàng)建組件可創(chuàng)建一個(gè)全局組件,組件的名字TodoList在模版中需要用todo-list來實(shí)現(xiàn),大小變小寫,中間用-連接。
局部組件:
<button v-on:click="clickBtn">提交</button> <ul> <todo-list v-for="item in list" v-bind:content="item" ></todo-list> </ul> </div> <script> let TodoList = { props:['content'], template: `<li>{{content}}</li>`, } let vm = new Vue({ el: '#app', data: { list: [], inputVal: '' }, component:{ //注冊組件 TodoList }, methods: { clickBtn() { this.list.push(this.inputVal) this.inputVal = '' } } }) </script>
使用局部組件,聲明一個(gè)對象,內(nèi)容和全局組件一樣,不過需要再 Vue 中注冊一下,使用component屬性注冊
component:{ TodoList }
用了組件后之后,就會涉及到數(shù)據(jù)通信,一般有兩種:
父 -> 子組件通信
現(xiàn)在已經(jīng)用組件實(shí)現(xiàn)上面的功能了,但是組件中還沒有數(shù)據(jù),如果將我輸入框中的數(shù)據(jù)傳遞給子組件。
子組件中獲取數(shù)據(jù),還是用v-for循環(huán),用v-bind綁定需要的數(shù)據(jù),組件中用props獲取綁定的數(shù)據(jù)
<todo-list v-for="(item,index) in list" v-bind:content="item" v-bind:index="index" v-on:delete="handleItemDelete" ></todo-list> let TodoList = { props:['content'], template: `<li>{{content}}</li>`, // content 就是相關(guān)數(shù)據(jù) }
父 -> 子組件通信實(shí)現(xiàn)了往組件里面添加數(shù)據(jù),如果子組件中要刪除一項(xiàng),應(yīng)該怎么操作呢?
子 -> 父組件通信
子 -> 父組件通信,Vue 提供了一個(gè)$emit()方法,組件中使用v-on指令可綁定事件
<div id="app"> <input type="text" v-model="inputVal"> <button v-on:click="clickBtn">提交</button> <ul> <todo-list v-for="(item,index) in list" v-bind:item="item" v-bind:index="index" v-on:delete="handleItemDelete" ></todo-list> </ul> </div> <script> Vue.component('TodoList',{ props:['item', 'index'], template: `<li v-on:click="handleItemClick">{{item}}</li>`, methods: { handleItemClick() { this.$emit('delete', this.index) } } }) let vm = new Vue({ el: '#app', data: { list: [], inputVal: '' }, methods: { clickBtn() { this.list.push(this.inputVal) this.inputVal = '' }, handleItemDelete(index) { this.list.splice(index, 1) } } }) </script>
組件中綁定事件,第一個(gè)參數(shù)是事件名,第二個(gè)參數(shù)是要傳遞給父元素的參數(shù)
template: '<li v-on:click="handleItemClick">{{item}}</li>'' //綁定事件為 click,需要執(zhí)行的函數(shù)是 handleItemClick methods: { //寫在組件里面 handleItemClick() { this.$emit('delete', this.index) } }
父元素監(jiān)聽事件
<todo-list v-for="(item,index) in list" v-bind:item="item" v-bind:index="index" v-on:delete="handleItemDelete" //監(jiān)聽 delete 事件, 執(zhí)行函數(shù)是 handleItemDelete ></todo-list> handleItemDelete(index) { //寫在 Vue 實(shí)例中 this.list.splice(index, 1) }
通過父子組件之間的通信,就可以實(shí)現(xiàn) 父->子 子->父 之間數(shù)據(jù)傳輸問題。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。