2.1 todolist功能开发
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>todolist功能开发</title> <!--1 引入Vue库--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980--> <div> <input v-model="itemValue"/> <button @click="addList">提交</button> </div> <ul> <!--加:key可以提升性能，key值要求每次的循环都不能相同,如果list中有相同的元素，可以使用(item,index),这里的index是指list的下标--> <li v-for="(item,index) of list" :key="index">{{item}}</li> </ul> </div> <script> var app = new Vue({ el: "#app", data: { itemValue:'', list:[] }, methods:{ addList: function () { this.list.push(this.itemValue); this.itemValue = ''; } } }); </script> </body> </html>
2.2 Vue组件的拆分-全局组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>todoList中组件的拆分</title> <!--1 引入Vue库--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980--> <!-- 1 组件是指页面中的一部分,当我们做一个网页十分庞大的时候，我们可以把一个大型网页拆成几个部分，每一个部分都是一个小的组件--> <!--2 如何定义一个组件--> <!--3 组件与组件之间是如何通信的--> <!--4 如何进行组件之间的拆分--> div id='app' <ul> <todo-item></todo-item> </ul> </div> <div id="app2"> div id='app2' <ul> <todo-item></todo-item> </ul> </div> <script> //Vue.component 这是Vue提供给我们创建一个组件的方法，Vue.component是一个全局组件 //template 创建一个模板 Vue.component('todo-item', { template:'<li>item</li>' }) new Vue({ el:'#app' }); new Vue({ el:'#app2' }); </script> </body> </html>
2.3 Vue组件的拆分-局部组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>todoList中组件的拆分-局部组件</title> <!--1 引入Vue库--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980--> <!-- 1 组件是指页面中的一部分,当我们做一个网页十分庞大的时候，我们可以把一个大型网页拆成几个部分，每一个部分都是一个小的组件--> <!--2 如何定义一个组件--> <!--3 组件与组件之间是如何通信的--> <!--4 如何进行组件之间的拆分--> <ul> <todo-item></todo-item> </ul> </div> <div id="app2"> <ul> <todo-item></todo-item> </ul> </div> <script> //定义局部组件，局部组件需要注册到Vue实例的components里才可以使用 var TodoItem = { template:'<li>item</li>' } new Vue({ el: '#app', components: { //将TodoItem注册到该实例中 'todo-item':TodoItem } }); </script> </body> </html>
2.4 Vue组件的传参-属性传参
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>todoList组件-参数的传递</title> <!--1 引入Vue库--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980--> <!-- 组件与组件之间是如何通信的,如何传参--> <!-- 组件传参可以根据属性的形式传参--> <div id="app"> <input v-model="inputValue" /> <button @click="itemAdd">添加item</button> <ul> <!--1 添加一个属性 content 向组件传参数--> <todo-item v-for="(item,index) of list" :key="index" :content="item" > {{item}} </todo-item> </ul> </div> <script> Vue.component('todo-item', { //2 组件需要在 props 中接收这个属性, 这是一个数组，可以是多个属性 props: ['content'], //3 在模板中使用这个属性 template: '<li>{{content}}</li>' }); new Vue({ el: '#app', data: { inputValue:'', list:[] }, methods:{ itemAdd: function () { if (this.inputValue.trim() != '') { this.list.push(this.inputValue); this.inputValue = ''; } } } }); </script> </body> </html>
2.5 组件与实例的关系
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>组件与实例的关系</title> <!--1 引入Vue库--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980--> <div id="app"> <input v-model="inputValue" /> <button @click="itemAdd">添加item</button> <ul> <todo-item v-for="(item,index) of list" :key="index" :content="item" > {{item}} </todo-item> </ul> </div> <script> //1 每一个Vue的组件都是一个Vue的实例，组件可以称之为一个Vue实例，Vue实例也可以称之为组件 //2 任何的一个Vue项目都是由千千万万个Vue的实例组成的 /* 一个Vue实例可以由以下几部分组成： 1 props(数组，接收属性传参) 2 template 模板 3 methods 方法 4 computed 计算属性 5 watch 侦听器 6 data */ Vue.component('todo-item', { props: ['content'], template: '<li @click="handleClick">{{content}}</li>', //3 既然每一个组件都是一个Vue实例，则组件也可以在methods方法里定义事件,也可以写data,也可以写计算属性 methods: { handleClick: function () { alert("组件中的的事件"); } } }); new Vue({ el: '#app', data: { inputValue:'', list:[] }, methods:{ itemAdd: function () { if (this.inputValue.trim() != '') { this.list.push(this.inputValue); this.inputValue = ''; } } } }); /* 如果一个Vue实例没有template模板，则它会将挂载点下的所有DOM节点当做template模板 */ </script> </body> </html>
2.6 todolist删除功能，子组件如何向父组件进行通信，发布订阅模式
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>todolist的删除功能</title> <!--1 引入Vue库--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980--> <div id="app"> <input v-model="inputValue" /> <button @click="itemAdd">添加item</button> <ul> <!--3 父组件使用属性的形式向子组件传递了数据--> <!--7 @delete="handleDelete" 父组件监听子组件delete事件--> <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="handleDelete"> {{item}} </todo-item> </ul> </div> <script> //2 这里是 子组件 Vue.component('todo-item', { props: ['content','index'],//4 子组件使用props接收父组件传过来的属性参数 template: '<li @click="handleClick">{{content}} {{index}}</li>', methods: { handleClick: function () { /* 6 通知父组件，删除list指定索引的数据 delete:这里的delete是自定义的一个事件 this.$emit('delete',this.index)发布订阅模式，发布了一个delete事件,这个事件携带了index的参数值 */ this.$emit('delete',this.index) } } }); //1 这里称之为 父组件 new Vue({ el: '#app', data: { inputValue:'', list:[] }, methods:{ itemAdd: function () { if (this.inputValue.trim() != '') { this.list.push(this.inputValue); this.inputValue = ''; } }, handleDelete: function (index) { //8 父组件监听子组件delete事件, 一旦点击子组件的li，则会触发 //删除数组所对应的下标 this.list.splice(index,1); } } }); /* 5 要做的功能是：点击li标签时，删除该标签。 实现思路是：点击li时，子组件向父组件传递消息，告诉父组件，删除list中对应的数据 难点：如何实现子组件向父组件进行通信： 使用发布订阅模式 */ </script> </body> </html>