vue内置指令、自定义指令及自定义过滤器

内置指令

指令名称描述使用v-model绑定数据<\input v-model="message">v-text输出文本,不能解析标签<\p v-text="message"></p>v-html输出文本,可解析标签<\p v-html="message">/p>v-once只绑定一次数据<\p v-once >{{message}}</p>v-bind绑定属性<\img v-bind:src="imgurl"> 或 <\img :src="imgurl">v-if控制是否显示容器 值转为布尔为false时 注释该容器，反之显示<\div v-if="true"></div>v-show控制是否显容器，改变的时display:none/block<\div v-show="true"></diiv>v-for循环遍历数组、对象<\li v-for="(val,key) in arr">{{val}}</li>v-cloak在还没有执行到vue代码的时候隐藏元素,可解决‘闪烁’问题<\p v-cloak>{{message}}</p>

自定义指令

注意：要把自定义指令写在new Vue()的前面Vue.directive('指令名称'，function(element,bind){    element: 指令使用所在的元素    bind:是一个对象，bind.value可以获取指令的参数})使用：<p v-指令名称=“'red'”></p>  这里的red就是bind.value

自定义过滤器

在vue2.0版本中没有自带的过滤器，要使用过滤器要自己定义 注意：要把自定义过滤器写在new Vue()的前面Vue.filter('date',function(value){        console.log(value)        var mydate = new Date(value);        var y = mydate.getFullYear();        var m = mydate.getMonth();        var d = mydate.getDate();        return y +'/'+ m  +'/'+ d;    })date:就是过滤器的名称参数value：是要过滤的值