一:Vue的指令
指令会影响元素的渲染行为,指令始终以v-开头。
1.循环指令
v-for循环遍历数组:
<li v-for="(one,i) in orgList">
机构名称:{{one.name}}
</li>
2.条件渲染指令
v-if v-else-if v-else:控制元素的生成。
<span v-if="one.num>0"> 数据:{{one.num}}条</span>
<span v-else>数据:无</span>
3.v-html 和 v-text指令
v-html 可以识别HTML标签,解析后输出。
v-text 不会识别HTLM标签,把HTML标签当做字符串输出。
<div v-html="变量名"></div>
<div v-text="变量名"></div>
4.事件绑定指令
该指令十分常用,因此提供了简写:v-on:click = @click;
事件支持一些指令修饰符:如prevent (阻止默认事件)、stop(阻止事件冒泡)等;
事件参数会自动传递;
<button @click="changeNum(one,one.num-1)">减少</button>
5.动态绑定指令
v-bind:绑定动态属性,可以简写为一个冒号:
该指令的值是js代码,可以是变量,也可以是函数。
<div :style='JavaScript代码'>文本</div>
6.v-show指令
v-show:控制元素可见度。它其实是将元素的display属性设置为none。指令的内容最终会被解析成布尔值。值为true元素显示,值为false元素隐藏。
<div v-show='true'>是否显示</div>
7.v-model指令
双向绑定指令,指的就是vue实例中的data与其渲染的dom元素上的内容保持一致。常用于表单元素。
<input v-model="绑定的变量名"/>
8.v-slot指令
具名插槽:指定的位置输出插槽,v-slot后写的是插槽的名称。
<template v-slot:header>
//值与组件slot的name属性对应。
</template>
<slot name='header' />
作用域插槽:在写插槽时可以获取到插槽作用域的值。
<template v-slot:header="message">
<div>{{message.name}}</div>
</template>
<slot name='header' :name="name" />
二:Vue的特殊属性
1.最重要的特殊属性Key:
在v-for循环渲染视图的时候,需要用来key标识循环的元素,不用的时候会有警告提示。该属性可以干预diff算法,在同一层级,key值相同的节点会进行比对,key值不同的节点则不会。不加key属性,不会刷新虚拟DOM 树。
在循环节点中,Vue建议为每个节点添加key值,而且必须是稳定的key值,一般为id,不能是下标,因为下标是可变的。
2.计算属性
在需要进行对数据进行计算的时候,直接在页面的{{}}中写计算式是可以实现功能,但代码可读性较差。当然用method写方法也可以实现,但事实上,vue给我们提供了一个更好的解决方案叫计算属性computed。
computed:{
allSum:function(){
return this.num1+ this.num2;
}
计算属性和方法的区别:
计算属性可以赋值,而方法不行;
计算属性会进行结果缓存,如果依赖不变,会直接使用缓存结果,不会重新计算;
凡是根据已有数据计算得到新数据的无参函数,都应该尽量写成计算属性而不是写成方法。
三:watch监控
watch可以让我们监控一个值的变化。从而做出相应的反应。
data: {
message:"数据"
},
watch:{
message(newValue, oldValue){
console.log("新值:" + newValue + ";旧值:" + oldValue);
}
}
只要message的值发生变化,就会调用函数。
四:深度监控
如果监控的是一个对象,需要进行深度监控,才能监控到对象中属性的变化。
data: {
person:{"name":"xiaoming", "age":12}
},
watch:{
message(newValue, oldValue){
console.log("新值:" + newValue + ";旧值:" + oldValue);
},
person: {
//开启深度监控,可以监控到对象属性值的变化
deep: true,
//监控的处理方法
handler(obj){
console.log("name = " + obj.name + ", age=" + obj.age);
}
}