vue2 基礎學習03 (Vue元件的進一步理解)
今天看了慕課網的一個教學視訊 Vue入門 感覺清晰了很多
首先引入一個簡單的todolist案例
-
初始化專案(引入
vue.js
部分省略)<!-- 掛載點 --> <div id="app"> </div> <script> var app = new Vue({ el: '#app', //通過id選擇器掛載上去 }) </script>
-
初始化資料,遍歷輸出
<!-- 掛載點 --> <div id="app"> <!----> <div> <input type="text" > <button>新增任務</button> <ul > <li v-for="(item, index) in list" :key="index">{{item}}</li> </ul> </div> </div> <script> var app = new Vue({ el: '#app', //通過id選擇器掛載上去 data(){//介意這樣寫data,因為在後面的vue-cli裡面就是這樣寫的 自我理解 return{ list:[1,2,3]// 先把寫死後面再更改 } } }) </script>
以下是效果:
-
接下來就是動態新增資料了
<!-- 掛載點 --> <div id="app"> <!----> <div> <input type="text" v-model="listValue"> <button v-on:click="addList">新增任務</button> <ul > <li v-for="(item, index) in list" :key="index">{{item}}</li> </ul> </div> </div> <script> var app = new Vue({ el: '#app', //通過id選擇器掛載上去 data(){//介意這樣寫data,因為在後面的vue-cli裡面就是這樣寫的 自我理解 return{ list:[],// 先把寫死後面再更改, listValue:'' // 把這個值雙向繫結在 input中 } }, methods: { addList:function(){ this.list.push(this.listValue)//往陣列中push資料,資料來源是input中的值 this.listValue = ''//新增完之後記得將input中間資料清空 } } }) </script>
以上涉及資料的雙向繫結
以下是將todolist應用進行了元件化
-
對todolist元件進行拆分。
<div id="app"> <div> <input v-model="inputValue"> <button @click="handleSubmit">提交</button> </div> <ul> <todo-item v-for="(item, index) in list" :key="index" :content="item" :index="index" @delete='handleDelete' > </todo-item> </ul> </div> <script> //全域性元件 Vue.component('todo-item', { props:['content','index'],//相當於接收父節點的屬性 template: ` <li v-on:click="handleClick">{{content}}{{index}}</li>` , methods:{ handleClick:function(){ this.$emit('delete',this.index)//相當於傳遞給父類 } } }) // //區域性元件 // var toDoItem = { //template: `<li >item</li>` // } var app = new Vue({ el: '#app', //區域性元件的宣告 // components: { //'todo-item': toDoItem // }, data: { inputValue: '', list: [] }, methods: { handleSubmit: function () { this.list.push(this.inputValue) this.inputValue = "" }, handleDelete: function(index){ this.list.splice(index,1) } } })
總結:
- 子元件向父元件傳遞引數: 通過繫結屬性的形式
- 父元件向子元件: 釋出訂閱模式
這一塊準備在後面的文章中將元件間通訊單獨拎出來分析。加深自己的理解。