详解Vue中的filter与directive
作者：用户3548369956673
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的资料请关注脚本之家其它相关文章！