簡單的 TodoList
實現(xiàn)一個簡單的 todolist课锌，當(dāng)我輸入內(nèi)容后，點擊提交自動添加在下面狡赐，如下圖所示：
[圖片上傳失敗...(image-a6ff6a-1559921379879)]
用代碼實現(xiàn)這個效果：
<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)容后稚虎，點擊提交乡范，Vue 會自動將內(nèi)容渲染在頁面中奸柬，具體是怎么實現(xiàn)的呢生年？
我們都知道 Vue 是一個 MVVM 框架，讓開發(fā)者專注于數(shù)據(jù)變更廓奕，無需關(guān)注 Dom抱婉，所以它的核心是VM層，也就是說渲染這部分不需要開發(fā)者考慮了桌粉。
循環(huán)v-for
v-for指令是 Vue 提供的api蒸绩，可以實現(xiàn)循環(huán)添加
v-for="item in list"
將list中數(shù)據(jù)循環(huán)添加到頁面中，值為item
所以當(dāng)我點擊提交時番甩，只需要獲取到輸入框中的值侵贵，然后push到list中届搁，我們看到的效果就是一個個添加缘薛。
綁定v-model
如何獲取輸入框中的值變成了一個問題，沒用 Vue 之前卡睦，獲取輸入框中的值宴胧，非常簡單，用$(input).val()就能輕松獲取表锻。
用了 Vue 之后恕齐，不應(yīng)該操作 Dom 來獲取值，Vue 肯定也考慮到這點了瞬逊，提供了一個api
v-model="inputVal"
第一次用這個指令時显歧，踩了一個坑，我在inputVal兩邊加上了雙括號确镊，從而導(dǎo)致頁面中沒任何反應(yīng)士骤，這邊是不需要加雙括號的。渲染模版時才需要用 Vue 提供的模版字符串
一個簡單的 TodoList 就已經(jīng)實現(xiàn)了蕾域。
組件化
每個li其實都是一個組件拷肌，我們可以用組件的形式來開發(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)建一個全局組件到旦，組件的名字TodoList在模版中需要用todo-list來實現(xiàn)，大小變小寫巨缘，中間用-連接添忘。
局部組件：
<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="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>
使用局部組件，聲明一個對象若锁，內(nèi)容和全局組件一樣搁骑，不過需要再 Vue 中注冊一下，使用component屬性注冊
component:{
TodoList
}
用了組件后之后又固，就會涉及到數(shù)據(jù)通信靶病，一般有兩種：
- 組件中如何才能拿到外面的數(shù)據(jù)
- 組件中數(shù)據(jù)變化，外面如何知道
父 -> 子組件通信
現(xiàn)在已經(jīng)用組件實現(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ù)
}
父 -> 子組件通信實現(xiàn)了往組件里面添加數(shù)據(jù)木张，如果子組件中要刪除一項众辨，應(yīng)該怎么操作呢？
子 -> 父組件通信
子 -> 父組件通信舷礼，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>
組件中綁定事件，第一個參數(shù)是事件名妻献，第二個參數(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 實例中
this.list.splice(index, 1)
}
通過父子組件之間的通信育拨，就可以實現(xiàn) 父->子 子->父 之間數(shù)據(jù)傳輸問題谨履。
