1.v-once指令
2.v-cloak指令
3.条件指令
4.条件指令家族
5.原义指令
6.循环指令
7.todolist案例
8.实例成员-符号
9.实例成员-计算属性
10.实例成员-属性监听
11.监听案例
12.组件
13.局部组件
14.全局组件
15.组件交互-父传子
16.组件交互-子传父
一.v-once指令
v-once：单独使用，限制的标签内容一旦赋值，便不可被动更改(如果是输入框，可以主动修改)
代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 <!--v-once 单独使用，限制的标签内容一旦赋值，便不可更改--> 10 <input type="text" v-model="msg" > 11 <input type="text" v-model="msg" v-once> 12 <!--v-once 写过之后你删其他的不会影响这个input框里面的值， 13 但是你要删这个input框的值也是可以同步删掉其他框的值--> 14 <p>{{ msg }}</p> 15 <p v-once>{{ msg }}</p> 16 </div> 17 18 </body> 19 <script src="vue/vue.js"></script> 20 <script> 21 new Vue({ 22 el:'#app', 23 data:{ 24 msg:'初始值' 25 } 26 }) 27 </script> 28 </html>
二.v-cloak指令
v-cloak：防止页面闪烁
<!-- 不处理的情况下，每次新价值该页面，都会先渲染{{}}，当vue环境加载成功，{{}}有会被解析消失 -->
<!-- 处理后，vue环境没加载好时，#app是被隐藏的，vue环境加载成功，会依次#app的v-cloak属性，就不会出现{{}}渲染闪烁问题 -->
代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 [v-cloak]{ 8 display:none; 9 } 10 </style> 11 </head> 12 <body> 13 <div id="app" v-cloak> 14 {{ }} 15 {{ }} 16 {{ }} 17 18 </div> 19 20 </body> 21 <script src="vue/vue.js"></script> 22 <script> 23 new Vue({ 24 el:'#app', 25 }) 26 </script> 27 </html>
三.条件指令
两种都可以控制标签的显隐，绑定的值是布尔类型值，当都隐藏标签时
v-if是不渲染标签
v-show以 display:none 方式渲染 隐藏起来了
代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="app"> 9 <!-- 两种都可以控制标签的显隐，绑定的值是布尔类型值，当都隐藏标签时 10 v-if是不渲染标签 11 v-show以 display:none 方式渲染 12 --> 13 <p v-if="isShow">if条件指令</p> 14 <p v-show="isShow">show条件指令</p> 15 </div> 16 </body> 17 <script src="js/vue.js"></script> 18 <script> 19 new Vue({ 20 el: '#app', 21 data: { 22 isShow: false, 23 } 24 }) 25 </script> 26 </html>
四.条件指令家族
<div id="app"> <!-- v-if='变量' v-else-if='变量' v-else 一组分支，上面成立会屏蔽下方所有分支， else分支没有条件，再所有分支不成立后才显示 --> <p v-if="0">ififif</p> <p v-else-if="1">elseif</p> <p v-else>else</p> </div>
代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .box{ 8 width: 400px; 9 height: 300px; 10 } 11 .r{ background-color: red;} 12 .y{ background-color:yellow ;} 13 .b{ background-color: blue;} 14 .active{ 15 background-color: pink; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="app"> 21 <!-- 22 v-if='变量' 23 v-else-if='变量' 24 v-else 25 一组分支，上面成立会屏蔽下方所有分支， 26 else分支没有条件，再所有分支不成立后才显示 27 --> 28 <!--<p v-if="0">ififif</p>--> 29 <!--<p v-else-if="1">elseif</p>--> 30 <!--<p v-else>else</p>--> 31 32 <div class="em"> 33 <p> 34 <!--绑定点击事件 你传的是什么就给什么,一定要给字符串 35 如何点击谁按钮就显示谁的颜色 注意class要绑定一下--> 36 <!--第一种方法--> 37 <button @click="changeBox('rBox')" :class="{active:showName == 'rBox'}">红</button> 38 <button @click="changeBox('yBox')" :class="{active:showName == 'yBox'}">蓝</button> 39 <button @click="changeBox('bBox')" :class="{active:showName == 'bBox'}">黄</button> 40 </p> 41 <!--第二种方法--> 42 <p> 43 <button @click="changeBox('rBox')" :class="showName == 'rBox' ? 'active': ''">红</button> 44 <button @click="changeBox('yBox')" :class="showName == 'yBox' ? 'active': ''">蓝</button> 45 <button @click="changeBox('bBox')" :class="showName == 'bBox'? 'active': ''">黄</button> 46 </p> 47 <!--v-if遇到下一个v-if会自动结束，他自己就是一个分支，如果没有v-if他会接着往下找--> 48 <div class="box r" v-if="showName == 'rBox'"></div>b 49 <div class="box y" v-else-if="showName == 'yBox'"></div> 50 <div class="box b" v-else=""></div> 51 52 </div> 53 </div> 54 55 </body> 56 <script src="vue/vue.js"></script> 57 <script> 58 new Vue({ 59 el:'#app', 60 data:{ 61 showName:'rBox', 62 }, 63 methods:{ 64 // 方法判定用methods 65 //因为点击不同的修改不同的值 66 changeBox(name){ 67 this.showName = name 68 69 } 70 } 71 }) 72 </script> 73 </html>
五.原义指令
v-pre指令可以在vue控制范围内，形成局部vue不控制区域(局部不解析vue语法)
v-pre 指令可以在vue控制范围内，形成局部vue不控制区域
{{ }} 和 v-if 都会原样输出，不会被解析
代码：
1 <div id="app"> 2 <p>{{ msg }}</p> 3 <!-- v-pre 指令可以在vue控制范围内，形成局部vue不控制区域 4 {{ }} 和 v-if 都会原样输出，不会被解析 5 --> 6 <p v-pre> 7 {{ }} 8 <span v-if="hehe"></span> 9 </p> 10 </div> 11 <script src="js/vue.js"></script> 12 <script> 13 new Vue({ 14 el: '#app', 15 data: { 16 msg: 'message' 17 } 18 }) 19 </script>
六.循环指令
1) 遍历字符串：可以只逐一遍历字符，也可以连同遍历索引 <p v-for="ch in str"></p> | <p v-for="(ch, index) in str"></p> 2) 遍历数组：可以只逐一遍历成员元素，也可以连同遍历索引 <p v-for="ele in arr"></p> | <p v-for="(ele, index) in arr"></p> 3) 遍历对象：可以只逐一遍历成员元素，也可以连同遍历成员键(key)，还可以遍历成员key索引 <p v-for="v in dic"></p> | <p v-for="(v,k) in arr"></p> | <p v-for="(v,k,i) in arr"></p>
代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--v-for='元素' in 容器 --> 9 <div id="app"> 10 <p>{{ str }}</p> 11 <!--可以索引取值--> 12 <p>{{ str[0] }}</p> 13 14 <div> 15 <!--可以for循环--> 16 <span v-for="ch in str">{{ ch }}</span> 17 </div> 18 <div> 19 <!--1.针对循环遍历的标签，通过会提供key属性来优化渲染速度 20 2.但key的值必须唯一(key可以不用提供) 21 3.如果多写一个参数就是把循环出来的值附上索引--> 22 <span v-for="(ch,i) in str" :key="ch + i">{{ i }}{{ ch }}</span> 23 </div> 24 <!--循环数组--> 25 <div> 26 <p v-for="(ele,i) in arr">{{ i }}{{ ele }}</p> 27 </div> 28 <!--循环字典，把里面的值遍历出来--> 29 <div> 30 <p v-for="ele in dic">{{ ele }}</p> 31 </div> 32 <!--多写一个参数，循环出来的是一个个键值对--> 33 <div> 34 <p v-for="(ele,k) in dic">{{ k }}:{{ ele }}</p> 35 </div> 36 <div> 37 <!--写三个参数，就会把键值对附上索引--> 38 <p v-for="(ele,k,i) in dic">{{ i }}{{ k }}:{{ ele }}</p> 39 </div> 40 </div> 41 42 </body> 43 <script src="vue/vue.js"></script> 44 <script> 45 new Vue({ 46 el:'#app', 47 data:{ 48 str:'abc123呵呵', 49 arr:[3,4,5,1,2,6], 50 dic: { 51 name:'Tank', 52 age:20, 53 gender:'哈哈', 54 } 55 } 56 57 }) 58 </script> 59 </html>
七.todolist案例（留言案例）
1) 留言就是往留言数组中添加数据，删除留言就是从留言数组中移除数据
2) 前台数据库：localStorage 和 sessionStorage
localStorage永久保存数据
sessionStorage临时保存数据(当所属页面标签被关闭，数据被清空)
3) 前台localStorage 和 sessionStorage数据库存储的值是字符串类型，所以要存放arr、dic等复杂数据需要JSON参与
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--需要点击那一个就删除那一个--> 7 <style> 8 li:hover{ 9 color: red; 10 cursor: pointer; 11 } 12 </style> 13 </head> 14 <body> 15 <div id="app"> 16 <p> 17 <!--这里的内容就是留言的内容--> 18 <input type="text" v-model="userMsg"> 19 <!--留言这需要有按钮--> 20 <button type="button" @click="sendMsg">留言</button> 21 </p> 22 <ul> 23 <!--先把留言渲染出来--> 24 <!--你点击那一个就删除那一个，首先li要有一个事件--> 25 <!--删除留言需要索引，点击谁就把谁的索引传过去--> 26 <li v-for="(msg,index) in msgs" @click="deleteMsg(index)"> 27 {{ msg }} 28 </li> 29 </ul> 30 </div> 31 32 </body> 33 <script src="vue/vue.js"></script> 34 <script> 35 new Vue({ 36 el: '#app', 37 data: { 38 //因为我们添加留言都是往前添加 39 //所以可以把第二条留言放前面 40 //现在需要每次先从数据库把所有留言都拿出来 41 //如果有值就解析拿值，没有就是空列表 42 msgs:localStorage.msgs ? JSON.parse(localStorage.msgs) : [], 43 // 用户的留言起初也是空的 44 userMsg: '', 45 // 绑定事件的关键字methods 给按钮绑定事件 46 }, 47 methods: { 48 sendMsg() { //添加留言事件 49 // // 尾部添加留言 50 // this.msgs.push(this.userMsg) 51 // 首增 52 // this.msgs.unshift(this.userMsg) 53 // 如果input框里面没有值就会增空，需要作一下判断，有内容才会添加 54 let userMsg = this.userMsg; 55 if (userMsg) { 56 this.msgs.unshift(userMsg); // 渲染给页面 57 // 还需要把值同步给数据库 58 localStorage.msgs = JSON.stringify(this.msgs); 59 // input框输入完就清空框里面的值 60 this.userMsg = ''; 61 } 62 }, 63 // 接收索引值 64 deleteMsg(index){ 65 // 开始索引 操作长度 操作的结果 66 // 现在写的意思就是，从你点击的开始，操作长度是一个，结果为空就是删除 67 this.msgs.splice(index,1) 68 } 69 } 70 71 }) 72 </script> 73 <script> 74 // 后端有数据库，前端也有数据库，一个是临时数据库，一个是永久数据库 75 // //永久存储 76 // localStorage['num'] = 10; 77 // //临时存储 78 // sessionStorage.num = 888; 79 // // 访问数据 80 // console.log(localStorage.num); 81 82 // 存一个数组 83 // 但是取值出现了问题，因为把值存成了字符串 84 // 我们需要存进去是字符串，取出来转成数组，json可以办到 85 // localStorage.msgs = JSON.stringify(['111','2222']); 86 // // 取出来需要解析一下这个json的字符串 87 // console.log(JSON.parse(localStorage.msgs)); 88 // console.log(JSON.parse(localStorage.msgs)[0]); 89 90 </script> 91 </html>
八.实例成员-符号
就是一个替换符，防止起冲突
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="app"> 9 {{ msg }} 10 {[ msg ]} 11 </div> 12 </body> 13 <script src="js/vue.js"></script> 14 <script> 15 new Vue({ 16 el: '#app', 17 data: { 18 msg: '12345' 19 }, 20 // delimiters: ['{{', '}}'], 21 delimiters: ['{[', ']}'], 22 }) 23 </script> 24 </html>
九.实例成员-计算属性
1) computed是用来声明 方法属性 的
2) 声明的方法属性不能在data中重复定义
3) 方法属性必须在页面中渲染使用，才会对内部出现的所有变量进行监听
4) 计算属性的值来源于监听方法的返回值
代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 <p @click="fn">{{ num }}</p> 10 <!--num一改变十位数和个位数就改变--> 11 <p>十位:{{ parseInt(num / 10) }}</p> 12 <p>个位:{{ num % 10 }}</p> 13 14 <!--填一个 十位和个位，得到结果--> 15 <!-- 一个变量的值依赖多个变量，且依赖的任意一个变量发生改变，该变量都会改变 --> 16 <!--也可以给输入框的输入数据加以限制--> 17 十位:<input type="number" v-model="shi" min="0" max="9"> 18 个位:<input type="number" v-model="ge" min="0" max="9"> 19 结果:<b>{{ shi * 10 + + ge }}</b> 20 结果:<b>{{ result }}</b> 21 </div> 22 23 </body> 24 <script src="vue/vue.js"></script> 25 <script> 26 new Vue({ 27 el:'#app', 28 data:{ 29 num:99, 30 shi:'', 31 ge:'', 32 // result:0 33 }, 34 methods:{ 35 fn(){ 36 this.num -=3; 37 } 38 }, 39 // 因为result是一个新的变量，需要跟他们2个关联 40 //1.computed是用来声明 方法属性的 41 //2.声明的方法属性不能再data中重复定义 42 //3.方法属性必须在页面中渲染使用，才会对内部出现的所有变量进行监听 43 computed:{ 44 result(){ 45 // console.log('该方法被调用了'); 46 // this.shi; 47 // this.ge; 48 return this.shi * 10 + +this.ge 49 } 50 } 51 }) 52 </script> 53 </html>
十.实例成员-属性监听
// 1) watch为data中已存在的属性设置监听事件
// 2) 监听的属性值发送改变，就会触发监听事件
// 3) 监听事件的方法返回值没有任何意义
多个变量对一个变量进行监听用 watch
计算属性 用 computed
代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 <!-- 多个变量的值依赖一个变量，该变量发生改变，所有依赖变量都会改变 --> 10 <p @click="fn">{{ num }}</p> 11 <p>十位: {{ shi }}</p> 12 <p>个位: {{ ge }}</p> 13 </div> 14 15 </body> 16 <script src="vue/vue.js"></script> 17 <script> 18 new Vue({ 19 el:'#app', 20 data:{ 21 num:99, 22 shi:0, 23 ge:0, 24 }, 25 // 绑定点击事件 26 methods:{ 27 fn(){ 28 this.num -=3; 29 } 30 }, 31 //1.watch为data中已经存在的属性设置监听事件 32 //2.监听的属性值发生改变，就会触发监听事件 33 //3.监听事件的方法返回值是没有任何意义的 34 watch: { 35 num(){ 36 //console.log('num改变了') 37 this.shi = parseInt(this.num / 10); 38 this.ge = this.num % 10; 39 // return '123' 40 } 41 } 42 }) 43 </script> 44 </html>
十一.监听案例
代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="app"> 9 姓：<input type="text" v-model="fName"> 10 名：<input type="text" v-model="lName"> 11 姓名：<b>{{ flName }}</b> 12 13 <hr> 14 <!--这个是多个变量依赖于一个变量，所以对fullName进行监听--> 15 姓名：<input type="text" v-model="fullName"> 16 姓：<b>{{ firstName }}</b> 17 名：<b>{{ lastName }}</b> 18 19 </div> 20 </body> 21 <script src="js/vue.js"></script> 22 <script> 23 new Vue({ 24 el: '#app', 25 data: { 26 fName: '', 27 lName: '', 28 fullName: '', 29 firstName: '', 30 lastName: '', 31 }, 32 // 计算属性 33 computed: { 34 flName(){ 35 return this.fName + this.lName; 36 } 37 }, 38 // 多个变量对一个变量进行监听用watch 39 watch: { 40 fullName() { 41 nameArr = this.fullName.split(''); 42 this.firstName = nameArr[0]; 43 this.lastName = nameArr[1]; 44 } 45 } 46 }) 47 </script> 48 </html>
十二.组件
1.组件：一个包含html，css，js独立的集合体，这样的集合体可以完成页面结构的代码复用 2.分组分为根组件，全局组件与局部组件 根组件：所有被new Vue（）产生的组件，在项目开发阶段，一个项目只会出现一个根组件，因为根组件与根组件之间信息是不通的 全局组件：不用注册，就可以成为任何一个组件的子组件 局部组件：必须注册，才可以成为注册该局部组件的子组件 3.每一个组件都有自身的html结构，css样式，js逻辑。每一个组件其实都有自己的template，就是用来标识自己html结构的template模块中有且只有一个根标签。 注意：跟组件一般不提供template，就由挂载点的真实DOM提供html结构
代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="app"> 9 <p>{{ msg }}</p> 10 </div> 11 12 <div id="main"> 13 14 </div> 15 </body> 16 <script src="js/vue.js"></script> 17 <script> 18 // 1) 组件：一个包含html、css、js独立的集合体，这样的集合体可以完成页面解构的代码复用 19 // 2) 分组分为根组件、全局组件与局部组件 20 // 根组件：所有被new Vue()产生的组件，在项目开发阶段，一个项目只会出现一个根组件 21 // 全局组件：不用注册，就可以成为任何一个组件的子组件 22 // 局部组件：必须注册，才可以成为注册该局部组件的子组件 23 // 3) 每一个组件都有自身的html结构，css样式，js逻辑 24 // 每一个组件其实都有自己的template，就是用来标识自己html结构的 25 // template模板中有且只有一个根标签 26 // 根组件一般不提供template，就由挂载点的真实DOM提供html结构 27 new Vue({ 28 el: '#app', 29 data: { 30 msg: 'message', 31 c1: 'red' 32 }, 33 template: ` 34 <div :style="{color: c1}" @click="fn">{{ msg }} {{ msg }}</div> 35 `, 36 methods: { 37 fn() { 38 alert(this.msg) 39 } 40 } 41 }); 42 new Vue({ 43 el: '#main', 44 data: { 45 msg: 'message' 46 } 47 }) 48 </script> 49 </html>
十三.局部组件
// 1) 创建局部组件 // 2) 在父组件中注册该局部组件 // 3) 在父组件的template模板中渲染该局部组件
代码：
1 <style> 2 .box { 3 box-shadow: 0 3px 5px 0 #666; 4 width: 240px; 5 height: 300px; 6 text-align: center; 7 padding: 20px 0; 8 float: left; 9 margin: 5px; 10 } 11 .box img { 12 width: 200px; 13 } 14 </style> 15 <div id="app"> 16 <!--<mcc></mcc>--> 17 <local-tag></local-tag> 18 <local-tag></local-tag> 19 </div> 20 <script src="js/vue.js"></script> 21 <script> 22 let localTag = { 23 template: ` 24 <div class="box"> 25 <img src="img/666.jpg" alt=""> 26 <h3>凤哥</h3> 27 <p>马叉虫❤马叉虫</p> 28 </div> 29 ` 30 }; 31 32 new Vue({ 33 el: '#app', 34 components: { 35 // mcc: localTag, 36 // localTag, 37 'local-tag': localTag, 38 } 39 }) 40 </script>
十四.全局组件
// 1) 创建全局组件
// 2) 在父组件的template模板中直接渲染该全局组件
代码：
1 <style> 2 .box { 3 box-shadow: 0 3px 5px 0 #666; 4 width: 240px; 5 height: 300px; 6 text-align: center; 7 padding: 20px 0; 8 float: left; 9 margin: 5px; 10 } 11 .box img { 12 width: 200px; 13 } 14 </style> 15 <div id="app"> 16 <global-tag></global-tag> 17 <global-tag></global-tag> 18 <global-tag></global-tag> 19 </div> 20 <script src="js/vue.js"></script> 21 <script> 22 Vue.component('global-tag', { 23 template: ` 24 <div class="box" @click="action"> 25 <img src="img/666.jpg" alt=""> 26 <h3>凤哥</h3> 27 <p>马叉虫❤{{ num }}</p> 28 </div> 29 `, 30 data () { 31 return { 32 num: 0 33 } 34 }, 35 methods: { 36 action() { 37 this.num++; 38 } 39 } 40 }); 41 42 // 数据局部化分析导入 43 // a = function () { 44 // return {num: 10} 45 // }; 46 // b1 = a(); 47 // b2 = a(); 48 // b3 = a(); 49 // 这样处理b1，b2，b3的数据就彼此独立的，但是都来源于a 50 51 new Vue({ 52 el: '#app', 53 }) 54 </script>
十五.组件交互-父传子
// 数据交互 - 父传子 - 通过绑定属性的方式
// 1) 父组件提供数据
// 2) 在父组件模板中，为子组件标签设置自定义属性，绑定的值由父组件提供
// 3) 在子组件实例中，通过props实例成员获得自定义属性
代码：
1 <style> 2 .info { 3 text-align: center; 4 width: 200px; 5 padding: 3px; 6 box-shadow: 0 3px 5px 0 pink; 7 float: left; 8 margin: 5px; 9 } 10 .info img { 11 width: 200px; 12 } 13 </style> 14 <div id="app"> 15 <!-- 2) 在父组件模板中，为子组件标签设置自定义属性，绑定的值由父组件提供 --> 16 <info v-for="info in infos" :key="info.image" :myinfo="info"></info> 17 </div> 18 <script src="js/vue.js"></script> 19 <script> 20 // 伪代码：模拟数据从后台请求 21 /* 22 let infos = ''; 23 document.onload = function () { 24 $.ajax({ 25 url: '/images/', 26 type: 'get', 27 success (response) { 28 infos = response.data 29 } 30 }) 31 }; 32 */ 33 34 let infos = [ 35 { 36 image: 'img/001.png', 37 title: '小猫' 38 }, 39 { 40 image: 'img/002.png', 41 title: '蛋糕' 42 }, 43 { 44 image: 'img/003.png', 45 title: '蓝糕' 46 }, 47 { 48 image: 'img/004.png', 49 title: '恶犬' 50 }, 51 ]; 52 53 let info = { 54 template: ` 55 <div class="info"> 56 <img :src="myinfo.image" alt=""> 57 <p><b>{{ myinfo.title }}</b></p> 58 </div> 59 `, 60 // 3) 在子组件实例中，通过props实例成员获得自定义属性 61 props: ['myinfo'] 62 }; 63 64 new Vue({ 65 el: '#app', 66 components: { 67 info, 68 }, 69 data: { 70 infos, // 1) 父组件提供数据 71 } 72 }) 73 </script>
十六.组件交互-子传父
// 组件交互-子传父
// 1) 数据由子组件提供
// 2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来
// 3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数
代码：
1 <style> 2 .close:hover { 3 cursor: pointer; 4 color: red; 5 } 6 </style> 7 <div id="app"> 8 <p> 9 <input type="text" v-model="userMsg"> 10 <button @click="sendMsg">留言</button> 11 </p> 12 <ul> 13 <!-- 2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来 --> 14 <msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs" :msg="msg" :index="i" :key="msg"></msg-li> 15 </ul> 16 </div> 17 <script src="js/vue.js"></script> 18 <script> 19 let msgLi = { 20 template: ` 21 <li> 22 <span class="close" @click="deleteMsg(index)">x </span> 23 <span>第{{ index + 1 }}条：</span> 24 <span>{{ msg }}</span> 25 </li> 26 `, 27 props: ['msg', 'index'], 28 methods: { 29 // 系统的click事件 30 deleteMsg(i) { 31 // 1) 数据由子组件提供 32 // $emit('自定义事件名', 参数们) 33 this.$emit('remove_msg', i); 34 } 35 } 36 }; 37 new Vue({ 38 el: '#app', 39 data: { 40 msgs: [], 41 userMsg: '' 42 }, 43 methods: { 44 sendMsg() { 45 if (this.userMsg) { 46 this.msgs.push(this.userMsg); 47 this.userMsg = ""; 48 } 49 }, 50 // 3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数 51 removeAction(i) { 52 this.msgs.splice(i, 1) 53 } 54 }, 55 components: { 56 msgLi 57 } 58 }) 59 </script>