vue自定义全局指令, 计算属性computed, 侦听器watch, 过滤器filter

自定义指令

内置指令不能满足或者不方便操作时,vue也允许注册自定义指令, 对普通DOM进行底层操作时, 会使用到自定义指令绑定到元素上执行相关操作

自定义指令分为 全局指令 和 局部指令 , 同时存在时以局部指令为准(局部优先级高)

自定义指令常用的钩子函数: — tip: 自定义指令中不能直接操作vue中的数据和方法,也就是自定义指令中的this不是vue对象

• bind — 第一次绑定到元素时调用
• update — 数据更新时调用(指令绑定元素更新时调用,可能在其子元素更新前调用)
• inserted — 被绑定元素插入父节点时调用(想操作绑定的元素,节点操作一般要找到其父级元素,再通过父级元素找到并操作它)
• componentUpdated — 数据更新时调用(指令绑定元素与其子元素全部更新才调用)
• unbind — 只调用一次, 指令与元素解绑时调用(可使用v-if测试,值为false时元素被删除,被调用)

自定义全局指令格式: (一般用全局格式)

Vue.directive(‘指令名’, {
bind(el) { },
update(el){ }
});

tip: 简写: 同时且只使用bind和update这两个钩子函数时,可以简写:
Vue.directive(‘指令名’, (el,bindings)=>{
// 直接写函数方法
// el是当前绑定元素,bindings是额外的传的参数
})

计算属性 - computed

当数据源内的数据需要进行运算时, 在程序中多处使用这个计算结果, 正常会每次使用都会进行运算, 性能不够好,
所以vue提供了计算属性,在computed属性呃逆定义的方法,只要数据源不改变,就只有第一次调用时会运算,然后缓存起来,后面再调用就读缓存
只有数据源改变, 才会重新运算, 性能提升

定义方法格式( 标准写法 — 简写 )

标准写法
computed:{
csum:{
get() { return this.n1 + this.n2 },
set(v) { this.n1 = v; this.n1 = v; return this.n1 + this.n2 } // v是通过修改csum传来的参数, 可接收后操作
// vm.csum = 10; 以这种形式修改
}
}

简写
conputed:{
cusm() {
// 直接写方法
return this.n1 + this.n2
}
}

侦听器 - watch

使用watch来侦听data中数据的变化, watch中的属性一定是data中已经存在的数据,

当需要监听一个对象的改变时,普通的监听无法监听到对象内部属性的改变,只能监听到data内的数据变化,

此时就需要 deep属性 对对象进行深度监听

书写格式
// data内已存在username:‘aaa’
watch: {
username( newVal, oldVal ) { // newVal就是改变后的值, 可以获取后直接操作 }
}

// 深度监听 — 监听对象内数据 — 元素内v-model=“obj.username”
// data内已存在obj: { username:‘aaa’ }
watch: {
obj: {
deep: true,
watch: {
handler( newVal, oldVal ){ // 操作 }
}
}
}

过滤器 - filter

数据渲染之前可以对数据进行进一步处理

小胡子语法 {{ title | mySubstring(5) }} — title是定义在data内

Vue.filter( ‘mySubstring’, (value, len)=>{
return value.substr(0, len) // 字符串截取方法
})

// 第一个形参value接收的永远是 | 之前的参数, 方法()内传的参数在筛选器内第二个参数开始