钩子函数类似于回调函数
回调函数 : 让开发者在特定的时候 执行自定义逻辑
vue自定义指令的钩子函数
bind :
让开发者在将自定义指令绑定到dom元素上时 执行自定义逻辑
inserted :
让开发者在元素插入dom树的时候 执行自定义逻辑
update :
让开发者在元素状态发生改变的时候 执行自定义逻辑
Vue.directive("" , {
})
vue 的生命周期钩子
html :
<div id="app">
<h2>{{message}}</h2>
<input type="text" v-model="message">
</div>
js:
const app = new Vue({
el : "#app",
data : {
message : "你好吗?"
},
生命周期钩子
beforeCreate
vue的实例化对象刚刚创建完毕 但是数据 以及方法都还没有设置到这个vue实例上 所以访问不到
beforeCreate() {
console.log("beforeCreate");
console.log(this.message);
},
reated
vue实例创建完毕 并且 传入的参数 数据 都已经设置到vue上通常用来做初始化操作
created() {
console.log("created");
console.log(this.message);
},
打印结果:
beforeMount
各种数据 组件都已经创建完成 但是还没有开始任何操作 所以获取到的是原始的dom元素,没有个vue对象参数任何关联
beforeMount() {
console.log("挂载前");
console.log(this.$el);
console.log(this.$data);
},
mounted
组件等数据都加载到 vue对象上面去
mounted() {
console.log("挂载后");
console.log(this.$el);
console.log(this.$data);
},