在Vue中有许多自带的指令
v-if条件渲染指令
根据其后表达式的布尔值进行判断是否渲染该元素
只要后面为true会对其进行相应的渲染
<p v-if="male">Male</p>
<p v-if="female">Female</p>
<p v-if="age>25">Age:{{age}}</p>
<p v-if="name.indexOf('lin')>0">Name:{{name}}</p>
-------------
var vm=new Vue({
el:"#example01",
data:{
male:true,
female: false,
age:29,
name:'colin'
}
})
v-if只会渲染他身后表达式为true的元素
v-show改变元素display是否显示指令
与v-if类似
只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none";
[2.区别]
（1）手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
（2）编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
（3）编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
（4）性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
（5）使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。
[v-else]指令
v-else 必须跟在v-if/v-show指令之后，不然不起作用；
如果v-if/v-show指令的表达式为true，则else元素不显示；如果v-if/v-show指令的表达式为false，则else元素显示在页面上；
[v-for]循环遍历指令
v-for 类似JS的遍历，用法为 v-for="item in items",[ items是数组]，[item为数组中的数组元素]。
<tr v-for="person in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.sex }}</td>
</tr>
---------------------------
var vm = new Vue({
el: '#example03',
data: {
people: [{
name: 'Jack',
age: 30,
sex: 'Male'
}, {
name: 'Bill',
age: 26,
sex: 'Male'
}, {
name: 'Tracy',
age: 22,
sex: 'Female'
}, {
name: 'Chris',
age: 36,
sex: 'Male'
}]
}
})
页面最终呈现一个有四行数据的表格每行都有一个对应循环的数据
[v-bind]绑定动态数据样式的指令
v-bind 这个指令主要作用于绑定某个class元素或元素的style样式。
可以简写为一个:冒号
v-bind:class 简写成 :class
这种方式是可以跟原生的class="a" 混用的
比如:class="a" :class="class2" class="a box2"
--------------------
new Vue({
el:"#app",
data:{
class1:"box1",
class2:"box2",
flag1:true,
flag2:false
}
})
上面说了一些常用的自带的属性,下面再说说自定义指令
[自定义指令]是指自带的没有的指令自己创造
和自定义过滤器类似都是写在Vue这个大类下面的一个类里面的方法,所以也是写在实例的前面
下面有一个小例子增加一个把元素变圆的指令起名为"circle"Vue会自动加一个"v-"也就是"v-circle"这个指令是要加在Vue.directive()里面下面看例子↓
<div id="app">
<div v-circle="yellow,red"></div>
<!--在v2.0中 指令="必须是真实的数据(property,method)"-->
</div>
----------------------
Vue.directive("参数一:直接写circle,不用加v-",参数二function(){})
Vue.directive("circle",function (el,param1) {
console.log(this);
this=window
console.log(arguments);
第一个参数el:加了这个指令的元素
第二参数是个对象param1:param1.expression中就是给指令传的参数
el.style.borderRadius="50%";
el.style.background="radial-gradient("+param1.expression+")"
});
var vm=new Vue({
el:"#app",
data:{
yellow:"yellow",
red:"red",
fn:function () { }
},
methods:{}
})
例子2 v-drag自定义一个有拖拽功能的指令
注意要先给元素加上position定位属性,不然动不了,因为v-drag拖拽是通过更改top和right值来实现的
<div id="app">
<div class="drag" v-drag></div>
</div>
---------------------
Vue.directive("drag",function (el) {
el.onmousedown=function (e) {
var strX=e.pageX-this.offsetLeft;
var strY=e.pageY-this.offsetTop;
document.onmousemove=function (e) {
el.style.left=e.pageX-strX+"px";
el.style.top=e.pageY-strY+"px";
};
document.onmouseup=function () {
document.onmousemove=document.onmouseup=null;
}
}
});
var vm=new Vue({
el:"#app",
data:{}
})