Vue自定义指令

在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:{}
    })

转载于:https://www.cnblogs.com/Jiazexin/p/7110674.html