详解Vue中的filter与directive

vue中的过滤器分为两种：局部过滤器和全局过滤器

过滤器可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示(官方文档)

<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id='rawId | formatId'></div>

1、定义无参全局过滤器

Vue.filter(’capitalize’, function(msg) {// msg 为固定的参数 即是你需要过滤的数据 if (!value) return ’’ value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) })

2、定义有参全局过滤器

<div id='app'> <p>{{ msg | msgFormat(’疯狂’,’--’)}}</p></div><script> // 定义一个 Vue 全局的过滤器，名字叫做 msgFormat Vue.filter(’msgFormat’, function(msg, arg, arg2) {// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则return msg.replace(/单纯/g, arg+arg2) }) </script>

3、局部过滤器

局部过滤器的有参和无参的定义和使用方法与全局的过滤器一样。唯一的区别在于局部过滤器是定义在vue的实例中。其作用的区域也是vue实例控制的区域

// 创建 Vue 实例，得到 ViewModel var vm = new Vue({el: ’#app’,data: { msg: ’msg’},methods: {},//定义私用局部过滤器。只能在当前 vue 对象中使用filters: { dataFormat(msg) {return msg+’xxxxx’; }} });vue自定义指令--directive

Vue中内置了很多的指令，如v-model、v-show、v-html等，但是有时候这些指令并不能满足我们，或者说我们想为元素附加一些特别的功能，这时候，我们就需要用到vue中一个很强大的功能了—自定义指令。

在开始之前，我们需要明确一点，自定义指令解决的问题或者说使用场景是对普通 DOM 元素进行底层操作，所以我们不能盲目的胡乱的使用自定义指令。

Vue.directive(’focus’, { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.setAttribute(’placeholder’, ’这是自定义指令加入的’) el.focus() }})局部指令

directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } }}使用

<input v-focus>

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode及其子 VNode全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

按顺序执行

//自定义指令Vue.directive(’focus’, { bind: function (el, binding, vnode) { console.log('1') }, inserted: function (el, binding, vnode) { console.log('2'); }, update: function (el, binding, vnode, oldVnode) { console.log('3'); }, componentUpdated: function (el, binding, vnode, oldVnode) { console.log(’4’); }, unbind: function (el, binding, vnode) { console.log(’5’); }})

以上就是详解Vue中的filter与directive的详细内容，更多关于Vue中的filter与directive的资料请关注好吧啦网其它相关文章！