//根据获得的新值执行对应的更新
//对于初始值也会调用一次
console.log('指令my-directive的update执行啦');
},
componentUpdated: function(){
console.log('指令my-directive的componentUpdated执行啦');
},
unbind: function(){
//做清理操作
//比如移除bind时绑定的事件监听器
console.log('指令my-directive的unbind执行啦');
}
})
// 3. 注入组件
Vue.mixin({
created: function () {
console.log('注入组件的created被调用啦');
console.log('options的值为',options)
}
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
console.log('实例方法myMethod被调用啦');
}
}
//调用MyPlugin
Vue.use(MyPlugin,{someOption: true })
//3.挂载
new Vue({
el: '#app'
});
更多请戳 vue中extend，mixins，extends，components,install的几个操作
15. Vue.nextTick
2.1.0 新增
场景:页面加载时需要让文本框获取焦点
用法:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
mounted(){ //因为 mounted 阶段 dom 并未渲染完毕,所以需要$nextTick
this.$nextTick(() => {
this.$refs.inputs.focus() //通过 $refs 获取dom 并绑定 focus 方法
})
}
16.Vue.directive
16.1 使用
场景:官方给我们提供了很多指令,但是我们如果想将文字变成指定的颜色定义成指令使用,这个时候就需要用到Vue.directive
// 全局定义
Vue.directive("change-color",function(el,binding,vnode){
el.style["color"]= binding.value;
})// 使用
<template>
<div v-change-color>{{message}}
</div>
</template>
<script>
export default{
data(){
return{
color:'green'
}
}
}
</script>
16.2 生命周期
1.bind 只调用一次，指令第一次绑定到元素时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。
2.inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)
3.update: 被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新
4.componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用
5.unbind: 只调用一次，指令月元素解绑的时候调用
17. Vue.filter
场景:时间戳转化成年月日这是一个公共方法,所以可以抽离成过滤器使用
