directive的用法
Vue.directive() 定义全局的指令
Vue.directive() // 有两个参数
-
参数1 : 指令的名称, 注意:在定义的时候不用加 v- 前缀; 但在使用时 必需加 v- 前缀进行调用;
-
参数2 : 是一个对象,这个对象有一些相关的函数,这些函数可以在特定的阶段,执行相关操作;
注意 :
1、每当 指令 绑定到元素上的的时候,会立即执行bind 这个函数 只执行一次
2、在每个 函数中,第一个参数,永远都是 el ,表示 被绑定了指令的那个函数,这个el 参数,是一个原生的JS对象;
3、如果是添加 获取焦点事件 或 失去 焦点事件时 要注意 要等页面渲染完,在执行指令 否则无效,也不会报错;
4、如果对dom进行操作就不能放到bind 方法里,反之可以放在 bind 方法里;
代码:Vue.directive('指令名',{ bind : function(el,binding){ el.focus(); // 改代码执行没效果; }, inserted : function(el){ // inserted 表示元素 插入到DOM中的时候,会执行 inserted函数,只执行一次 el.focus(); // 获取焦点 el.blur(); // 失去焦点 }, updated : function(){ // 当VNode(DOM 更新时) 更新的时候,会执行updated 函数,可能会执行多次 } });
如下图:这是定义私有组件
定义私有指令:
directives : {
指令名 : {钩子函数}
}
filter的用法
- filter 过滤器,分为全局和局部; 过滤后的值 要 return 返回;
1、全局: Vue.filter(‘过滤器名字’,function((要过滤的内容, 过滤器的参数){
过滤器要实现的方法
})
)
2、 局部: 在vue根内部, filters : {过滤器的名字 : function(data(内容), 参数 = ‘’){过滤器要实现的方法}}
如果全局和局部 过滤器 名称一致, 就近原则;