一个父组件 和 一个子组件 生命周期钩子 加载顺序
父beforeCreate-父created-父beforeMount-子beforeCreate-子created-子beforeMount-子mounted-父mounted
<body>
<div id="app">
商品价格
<input type="text" v-focus="50">
</div>
<script src="./vue.js"></script>
<script>
// 全局组件
Vue.directive('focus', {
bind(){},//只加载一次,指令第一次绑定要元素上调用,作用一次性的初始化
inserted(el, binding){
// el 指令所在 元素 插入到父节点时触发,el是这个dom对象 binding.value是使用这个指令传的值
console.log(el);
console.log(binding)
el.focus();
},
componentUpdated(el,binding){
// 指令所占组件(及其子组件)的虚拟dom更新完毕时触发
},
upbind(){}
// 指令和元素解绑时触发 (比如元素移除了 )
// 指令中如果涉及到了 定时器或者全局事件绑定在这里要清除
})
const vm = new Vue({
el: '#app',
data: {
item:{
price: 10
}
},
})
</script>
</body>
局部指令
+ 局部指令
const Home = {
directives: {
'指令名': {
inserted(el,binding){
// el 指令所在 元素 插入到父节点时触发,el是这个dom对象 binding.value是使用这个指令传的值
},
componentUpdated(el,binding){
// 指令所占组件(及其子组件)的虚拟dom更新完毕时触发
},
unbind(){
// 指令和元素解绑时触发 (比如元素移除了 )
// 指令中如果涉及到了 定时器或者全局事件绑定在这里要清除
}
}
}
}