vue生命周期
<html>
<div id="app">
<h1 id='m'>{{msg}}</h1>
<h1 :class="className">类名绑定</h1>
<button @click='clickEvent'>点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data() {
return {
msg:'hello',
className:'bgm',
}
},
methods: {
clickEvent(){
console.log('click');
this.msg='up';
}
},
//实例化完成，数据和方法还没有绑定到vue对象上
beforeCreate() {
console.log('beforecreate');
console.log(this); // 有结果
console.log(this.msg); // undefined
console.log(this.clickEvent);
},
//数据和方法绑定完成
created() {
console.log('created')
console.log(this.msg);
console.log(this.clickEvent);
},
//渲染之前，根据数据生成的dom对象没法拿到
beforeMount() {
console.log('beforeMount');
dom = document.querySelector('.bgm')
console.log(dom); //undefined
},
//渲染完成，根据数据生成的dom对象可以拿到
mounted() {
console.log('mounted');
dom = document.querySelector('.bgm')
console.log(dom);
},
beforeUpdate() {
console.log('beforeUpdate');
console.log(this.msg);
},
updated() {
console.log('updated');
console.log(this.msg);
},
beforeDestroy() {
//应用销毁之前
console.log('beforeDestroy');
},
destroyed() {
console.log('destroyed');
},
})
</script>
</html>
121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
