1. 混入Mixin
混入类似于公共参数或者方法的初始化,使一些公共的变量或方法定义到组建中,与vuex功能类似却不相同。(混入中可以定义vue的各个变量入craeated,methods等,但是合并后,重复的以组件内为主)
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})
2.自定义指令
自定义指令用处很多,我常用在检验上,这里只介绍用到以及可能用到的。
directives的常用钩子函数:bind(初始化调用,只调用一次);inserted(被绑定元素插入父节点时调用);update(虚拟节点VNode更新时候,指令有可能也没变,通过钩子参数对比新旧值判断)
directives的常用狗子参数:el(当前节点);binding(对象,常用name,value,oldvalue)
import Vue from 'vue'
// 正整数
const int=Vue.directive('int',{
bind: function(el) {
el.handler = function() {
// el.value = Number(el.value.replace(/\D+/, ''))
el.value = Number(el.value.replace(/\D+/, ''))>100?(Number(el.value.replace(/\D+/, ''))+'').substring(0,2):Number(el.value.replace(/\D+/, ''))
setTimeout(()=>{
el.dispatchEvent(new Event('input'));
},100)
}
el.addEventListener('input', el.handler)
},
unbind: function(el) {
el.removeEventListener('input', el.handler)
}
})
export{int}
引入后v-int使用
3.过滤器
介绍提交数据或渲染时候对数值的过滤:{{value|过滤器1|过滤器2}},案例如下
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
全局可以用Vue.filters('capitalize',function(value){})进行定义
使用:{{msg|capitalize}}