VUE过滤器
filter 过滤器,分为全局和局部; 过滤后的值 要 return 返回;
全局过滤器
全局: Vue.filter(‘过滤器名字’,function(值(要过滤的内容, 过滤器的参数){过滤器要实现的方法}))
局部: 在vue根内部, filters : {过滤器的名字 : function(data(内容), 参数 = ‘’){过滤器要实现的方法}}
如果全局和局部 过滤器 名称一致, 就近原则;
<div id="app">
{{ time | dataTime }}
<p v-col="'skyblue'">全局指令</p>
<input type="text" v-focus @keyup.f2='alert("自定义修饰符f2")'>
<div>{{ msg }}</div>
</div>
<script>
Vue.filter('dataTime', (times) => {
return new Date(times).toLocaleDateString();
})
</script>
局部过滤器
过滤器加S
methods: {},
// 局部过滤器;
filters: {
dataTime: (times) => {
let showTime = new Date(times);
return showTime.toLocaleString();
}
},
VUE自定义指令
指令都是以 ‘v-’ 开头,
Vue.directive() 定义全局的指令
参数1 : 指令的名称, 注意:在定义的时候不用加 v- 前缀;
但在使用时 必需加 v- 前缀进行调用;
参数2 : 是一个对象,这个对象有一些相关的函数,这些函数可以在特定的阶段,执行相关操作;一般常用的有三个阶段
Vue.directive('指令名',{
bind : function(el,binding){
// 每当 指令 绑定到元素上的的时候,会立即执行bind 这个函数 只执行一次
注意 : 在每个 函数中,第一个参数,永远都是 el ,表示 被绑定了指令的那个函数,这个el 参数,是一个原生的JS对象;
如果是添加 获取焦点事件 或 失去 焦点事件时 要注意 要等页面渲染完在执行指令 否则无效,也不会报错;
在元素 刚绑定了指令的时候,还没有 插入到DOM 中去,这时候调用 focus(获取焦点) 方法没作用;
// el.focus() 无效因为DOM元素还没插入到页面就会执行这个函数;
// 定义样式指令可以放在bind 样式不依赖他;
binding 是个对象 里面方的有 指令的名字,指令传的值,更详细的 可以打印 binding 查看;
},
inserted : function(el){
// inserted 表示元素 插入到DOM中的时候,会执行 inserted函数,只执行一次
el.focus(); // 获取焦点
el.blur(); // 失去焦点
},
updated : function(){
// 当VNode(DOM 更新时) 更新的时候,会执行updated 函数,可能会执行多次 }
});
全局指令
定义全局指令: 第一个参数是名字,第二个参数是个对象
例如:
Vue.directive('col', {
bind: (el, binding) => {
// 在元素 刚绑定了指令的时候,还没有 插入到DOM 中去,这时候调用 focus(获取焦点) 方法没作用;
console.log(el);
console.log(binding);
// el.style.color = 'red';
el.style.color = binding.value;
},
inserted: el => {
el.focus()
}
})
私有指令
directives需要加S
directives: {
focus: {
bind(el, binding) {
// el.focus();
},
inserted(el, binding) {
el.focus();
},
updated() {}
}
}
简写为
定义私有指令: directives : {
指令名 : {钩子函数},
简写:
指令名 : function(el,binding){ // 这个function 等同于把代码写到 bind 和 updated 里面中;
}
}
简写函数只能代替 bind 和 updated 函数里面中;一般样式都是在bind中写入
关于binding
binding是私有指令的一个参数
钩子函数有两个参数,一个是el,另一个是binding,它是一个对象,包含以下的属性
在bind中的使用方法为: