vue入门学习笔记，vue.js下载
目录：
- 组件
- 组件与实例的关系
- 父子组件通信：发布订阅模式
-
组件
组件指页面中的一部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue Learning</title> <script src="./vue.js"></script </head> <body> <div id="app"> <div> <input v-model="inputValue"/> <button @click="handleClick">提交</button> </div> <ul> <todo-item v-for="(item,index) of itemValues" :key="index" :content="item"> <!-- 定义属性content来传递值--> </todo-item> </ul> </div> <script> <!-- 全局组件 --> Vue.component("todo-item",{ props:["content"],//子组件中定义props来接收父组件传递来的参数，然后才能在模板中使用 template:"<li>{{content}}</li>" }) <!-- 局部组件 使用前需要在Vue实例中使用components声明 --> //var TodoItem={ // template:"<li>item</li>" //} new Vue({ el:"#app", //components:{ // "todo-item":TodoItem //}, data:{ inputValue:"", itemValues:[] }, methods:{ handleClick:function(){ this.itemValues.push(this.inputValue) this.inputValue="" } } }) </script> </body> </html>
-
组件与实例的关系
每一个组件也是一个vue的实例，实例拥有的属性和方法组件也有。父组件不定义模板是因为它把子组件当做模板。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue Learning</title> <script src="./vue.js"></script </head> <body> <div id="app"> <div> <input v-model="inputValue"/> <button @click="handleSubmit">提交</button> </div> <ul> <todo-item v-for="(item,index) of itemValues" :key="index" :content="item"> </todo-item> </ul> </div> <script> Vue.component("todo-item",{ props:["content"], template:"<li @click='handleClick'>{{content}}</li>",//子组件也拥有属性 methods:{//子组件也拥有方法 handleClick:function(){ alert("123") } } }) new Vue({ el:"#app", data:{ inputValue:"", itemValues:[] }, methods:{ handleSubmit:function(){ this.itemValues.push(this.inputValue) this.inputValue="" } } }) </script> </body> </html>
-
实现todolist的删除功能
子组件与父组件通信才能实现子组件对父组件数据的操作，通过发布订阅来完成。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Vue Learning</title> <script src="./vue.js"></script </head> <body> <div id="app"> <div> <input v-model="inputValue"/> <button @click="handleSubmit">提交</button> </div> <ul> <todo-item v-for="(item,index) of itemValues" :key="index" :content="item" :index="index" @delete="handleDelete"><!--2 父组件订阅了事件delete--> </todo-item> </ul> </div> <script> Vue.component("todo-item",{ props:["content","index"], template:"<li @click='handleClick'>{{content}}</li>", methods:{ handleClick:function(){ this.$emit('delete',this.index)<!--1 子组件发布一个事件delete--> } } }) new Vue({ el:"#app", data:{ inputValue:"", itemValues:[] }, methods:{ handleSubmit:function(){ this.itemValues.push(this.inputValue) this.inputValue="" }, handleDelete:function(index){<!--3 父组件处理handleDelete--> this.itemValues.splice(index,1) } } }) </script> </body> </html>