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>
十二.组件
十三.局部组件
十四.全局组件
十五.组件交互-父传子
十六.组件交互-子传父