1、绑定语法: 学名:插值语法Interpolation
插值语法就是在HTML中插入js中定义的变量的值,与之前的dom操作元素内容作用相同,却别是更加方便简化
定义:在界面中标记哪里可能发生变化的特殊的语法
使用方式:<元素>{{变量名}}</元素>
特征:双花括号
原理:开局, new Vue()扫描到这里时,就会将这个元素保存到虚拟DOM树中,当【{{值}}】中的变量在new Vue()中被修改时,虚拟DOM树就会找到这个元素,自动更新这个元素的内容与new Vue()同名变量保持一致!
混搭:在实际编程中{{变量名}}可以和其他字符串内容混搭。不必须是单纯的元素
规则:{{}}之中:和模板字符串的${}规则一样
(1). 可以写:变量,运算,三目,调用函数,创建对象,访问数组元素——一切合法的有返回值的js表达式
(2). 不能写:程序结构(分支和循环), 以及没有返回值的js表达式。
<div id="app">
<div>姓名:{{uname}}</div>
<div>{{sex}}</div>
<div>性别:{{sex?'男':'女'}}</div>
<div>价格:¥{{price}}</div>
<div>统计:{{count*price}}</div>
<div>星期:{{new Date().getDay()}}</div>
<div>订单时间:{{new Date(orderTime).toLocaleString()}}</div>
<div>日期:{{day}}</div>
</div>
<script>
new Vue({
el:"#app",
data:{
uname:"dingding",
sex:1,
price:12.5,
count:5,
orderTime:1614158191101,
day:new Date().getDate()
}
})
</script>
2、指令
什么是指令:专门在HTML中也能实现分支、循环等程序功能的特殊的自定义属性
个人见解:HTML是超文本标记语言,严格来说它并不是一种编程语言,缺少编程语言的变量,逻辑,循环,分支等基本功能,更不用说函数,对象等上层功能;但是vue通过指令的方式实现了HTML的逻辑,分支等方式,让HTML也能实现基本的功能,大大简化了项目开发中的工作流程,提高了工作效率;也就是说,vue指令在一定程度上不全的HTML语言。
指令的数量:目前学习使用的是vue2.X版本的,质量有13种
3、指令:v-bind
作用:绑定元素属性值,让vue能够修改元素的属性,元素的属性值也随程序自动变化;
注意:插值方式不适合元素属性的修改,{{}}只支持元素内容变化,不支持属性值变化;
使用方法:
标准写法:
<元素v-bind:属性名="变量或js表达式">
简写方式:
<元素 :属性名="变量或js表达式">
简写方式简化了v-bind质量,直接使用冒号【:】替代了指令;需要注意的是使用v-bind或者其简写方式绑定的属性,其属性值可以是 js 代码,但是该代码必须有返回值,且复合被绑定属性的要求
绑定属性的时候,属性值不能使用【{{}}】,因为使用插值方式就会报错,这个错误是语法导致,不管是不是绑定了
<div id="app">
<!--哪里可能随程序自动改变?-->
<img v-bind:src="pm25<100?'img/1.png':pm25<200?'img/2.png':pm25<300?'img/3.png':'img/4.png'">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
//程序中只保存pm2.5的数值,不保存图片路径
pm25: 60
}
})
//运行后,F12打开控制台,console,输入vm.pm25=数值,观察页面上图片的变化.
</script>
4、指令:v-show
作用:该指令是用来表示被绑定的元素是影藏还是显示的
原理:该指令的原理是当绑定的值是false的时候,vue顶层会自动将被绑定的元素加上属性【display:none】方式来隐藏元素
使用方式:
<元素 v-show="bool类型变量或js表达式">
同理被绑定的元素的绑定属性v-show的值必须是bool值,但是可以是变量,也可以是JavaScript代码,只要返回值是bool型即可
<div id="app">
<button @click='open'>click me</button>
<div v-show='show' id="pop">
<a @click='close' href="javascript:;">×</a>
</div>
</div>
<script>
//2. 创建new Vue()对象,监控id为app的区域
new Vue({
el: "#app",
//3. 创建模型对象:
//3.1 创建data对象
//本例中: ?
data: {
show: false
},
//3.2 创建methods对象
//本例中: ?
methods: {
open() {
this.show = true;
},
close() {
this.show = false;
}
}
})
</script>
5、指令:v-if\v-else\v-else-if
作用:分支,对应了编程语言的基本功能分支,v-if表示如果满足条件,v-else表示不满足条件,v-else-if表示分支的第二个条件
使用方式:
<元素1 v-if="判断条件">
<元素2 v-else-if='判断条件2'>
<元素3 v-else>
注意:
在使用v-if v-else 的时候必须要连着写,不能在中间插入任何其他元素,详情对照编程语言的分支语句
使用v-else 的时候是不能加条件的,但是v-else-if可以加条件做二次判断
原理:
每当new Vue()扫描到v-if时,会先执行=右边的判断条件,如果判断为true,就会删除v-else的元素;如果判断为false,就会删除v-发的数据;如果接连使用的是v-else-if的话,当v-if判断为false,v-if绑定的元素就会被删除,进而判断v-else-if的条件,后续与之前一致
<div id="app">
<!--第一个div是已登录时显示的内容-->
<div v-if="isLogin==true"><h3>Welcome, dingding | <a href="javascript:;" @click="logout">注销</a></h3></div>
<!--第二个div是未登录时显示的内容-->
<div v-else><a href="javascript:;" @click="login">登录</a> | <a href="javascript:;">注册</a></div>
</div>
<script>
//2. 创建new Vue()对象
new Vue({
el:"#app",
//3. 创建模型对象:
//3.1 创建data对象,保存界面中需要的所有变量
data:{
isLogin:false //开局,默认用户是未登录
},
//3.2 创建methods对象,保存界面中需要的所有函数
methods:{
login(){
//让用户变成已登录状态
this.isLogin=true;
},
logout(){
this.isLogin=false;
}
}
})
</script>
注意:v-if删除了元素是怎么恢复的?
这个就是上次学习的虚拟DOM的区别,删除的是可见DOM的,也就是实际的DOM树的元素结构,虚拟的DOM树结构中是保存完好的,恢复的时候是从虚拟DOM中恢复的。
<!--v-else-if的实例-->
<div id="app">
<h3>今日空气质量:
<img v-if="pm25<100" src="img/1.png">
<img v-else-if="pm25<200" src="img/2.png">
<img v-else-if="pm25<300" src="img/3.png">
<img v-else src="img/4.png">
</h3>
</div>
<script>
//2. 创建new Vue()对象
new Vue({
el:"#app",
//3. 创建模型对象
data:{
pm25:367
}
})
</script>
6、指令:v-for
作用:对应编程语言中的循环结构,可以反复生成相同结果的DOM元素,内容可以不同
使用方式:
注意的是,v-for使用在那个元素上,被循环生成就是那个元素
<要反复生成的元素v-for="(当前元素值,当前位置) of 数组":key="i">
原理:
当new Vue()扫描到v-for时,先遍历of后的数组中每个元素, 每遍历一个数组元素,就会自动创建当前元素的一个副本,每次遍历时,都会取出当前数组元素值和当前下标位置,保存到of前的两个变量中,分别是 【 值,当前位置】
<div id="app">
<ul>
<li v-for="(n,i) of names" :key="i">{{i+1}} - {{n}}</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
names:["亮亮","然然","东东","嘻嘻"]
}
})
</script>
上述代码中有个:key是什么意思?其实这与v-for循环的一个确定有关
缺点:
1、我们可以使用for循环将数组内容遍历成页面结构相同的元素,但是vue2不允许我们使用index下标的方式修改数组内容;修改是可以成功的,但是页面不会渲染出来
结局方式:vue2中没有对数字下标进行监控所有,修改了页面也不会渲染;但是数组的函数修改是可以进行的,函数修改的系统会渲染
vm.arr.splice(1,1,'新元素')
2、使用v-for循环的时候,如果修改了for中的元素,系统是无法是被修改了那个元素的,所以vue的操作方式是将for出来的所有节点元素全部删除,重新在for循环一遍!如果足够大的话,就是一个BUG
解决:只要使用v-for,都必须同时绑定:key="i"属性,也就是给for的元素绑定一个值是唯一值的属性;
从此,v-for生成的每个元素副本身上,都多了一个唯一的标识key。值是不重复的。
修改数组中任何一个元素值时,都只需要通过下标,找到这个元素值对应位置的DOM元素副本,只修改一个元素即可。不用重建整个列表。
<li v-for="(n,i) of names" :key="i">{{i+1}} - {{n}}</li>
扩展:使用v-if与v-show隐藏元素的区别
v-show 用display:none隐藏元素
v-if v-else 用删除元素方式隐藏元素
常见错误:
Error compiling template:HTML界面中语法错误
跳过前边大块HTML代码
直接找到"-" 位置,才是真正出错的位置