这篇文章主要介绍了Vue中的filter与directive的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
目录
- vue自定义指令--directive
- 全局指令
- 局部指令
- 使用
- 钩子函数(均为可选)
- 使用及参数
vue中的过滤器分为两种：局部过滤器和全局过滤器
过滤器可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示(官方文档)
{{ message | capitalize }}
1、定义无参全局过滤器
Vue.filter('capitalize', function(msg) {// msg 为固定的参数 即是你需要过滤的数据 if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) })
2、定义有参全局过滤器
{{ msg | msgFormat('疯狂','--')}}
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() } } }
使用
钩子函数(均为可选)
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的资料请关注本站其它相关文章！
以上就是详解Vue中的filter与directive的详细内容，更多请关注本站其它相关文章！
