簡單的 TodoList
實現一個簡單的 todolist，當我輸入內容后，點擊提交自動添加在下面，如下圖所示：
用代碼實現這個效果：
<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>當我在input框中輸入內容后，點擊提交，Vue 會自動將內容渲染在頁面中，具體是怎么實現的呢？
我們都知道 Vue 是一個 MVVM 框架，讓開發者專注于數據變更，無需關注 Dom，所以它的核心是VM層，也就是說渲染這部分不需要開發者考慮了。
循環v-for
v-for指令是 Vue 提供的api，可以實現循環添加
v-for="item in list"
將list中數據循環添加到頁面中，值為item
所以當我點擊提交時，只需要獲取到輸入框中的值，然后push到list中，我們看到的效果就是一個個添加。
綁定v-model
如何獲取輸入框中的值變成了一個問題，沒用 Vue 之前，獲取輸入框中的值，非常簡單，用$(input).val()就能輕松獲取。
用了 Vue 之后，不應該操作 Dom 來獲取值，Vue 肯定也考慮到這點了，提供了一個api
v-model="inputVal"
第一次用這個指令時，踩了一個坑，我在inputVal兩邊加上了雙括號，從而導致頁面中沒任何反應，這邊是不需要加雙括號的。渲染模版時才需要用 Vue 提供的模版字符串
一個簡單的 TodoList 就已經實現了。
組件化
每個li其實都是一個組件，我們可以用組件的形式來開發
全局組件：
<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創建組件可創建一個全局組件，組件的名字TodoList在模版中需要用todo-list來實現，大小變小寫，中間用-連接。
局部組件：
<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>使用局部組件，聲明一個對象，內容和全局組件一樣，不過需要再 Vue 中注冊一下，使用component屬性注冊
component:{ TodoList}用了組件后之后，就會涉及到數據通信，一般有兩種：
父 -> 子組件通信
現在已經用組件實現上面的功能了，但是組件中還沒有數據，如果將我輸入框中的數據傳遞給子組件。
子組件中獲取數據，還是用v-for循環，用v-bind綁定需要的數據，組件中用props獲取綁定的數據
<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 就是相關數據}父 -> 子組件通信實現了往組件里面添加數據，如果子組件中要刪除一項，應該怎么操作呢？
子 -> 父組件通信
子 -> 父組件通信，Vue 提供了一個$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>組件中綁定事件，第一個參數是事件名，第二個參數是要傳遞給父元素的參數
template: '<li v-on:click="handleItemClick">{{item}}</li>'' //綁定事件為 click，需要執行的函數是 handleItemClickmethods: { //寫在組件里面 handleItemClick() { this.$emit('delete', this.index) }}父元素監聽事件
<todo-list v-for="(item,index) in list" v-bind:item="item" v-bind:index="index" v-on:delete="handleItemDelete" //監聽 delete 事件， 執行函數是 handleItemDelete></todo-list>handleItemDelete(index) { //寫在 Vue 實例中 this.list.splice(index, 1)}通過父子組件之間的通信，就可以實現 父->子 子->父 之間數據傳輸問題。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
