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>Titletitle> 6 head> 7 <body> 8 <div id="app"> 9 10 <input type="text" v-model="msg" > 11 <input type="text" v-model="msg" v-once> 12 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：防止页面闪烁
代码：
1 DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 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 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"> <p v-if="0">ifififp> <p v-else-if="1">elseifp> <p v-else>elsep> div>
代码：
1 DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 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 28 29 30 31 32 <div class="em"> 33 <p> 34 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 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 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>Titletitle> 6 head> 7 <body> 8 9 <div id="app"> 10 <p>{{ str }}p> 11 12 <p>{{ str[0] }}p> 13 14 <div> 15 16 <span v-for="ch in str">{{ ch }}span> 17 div> 18 <div> 19 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>Titletitle> 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 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>Titletitle> 6 head> 7 <body> 8 <div id="app"> 9 <p @click="fn">{{ num }}p> 10 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>Titletitle> 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 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>
十三.局部组件
十四.全局组件
十五.组件交互-父传子
十六.组件交互-子传父