<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue</title>
<script src="../vue-2.7.14.js"></script>
</head>
<body>
vue 的基本模板
<div id="app">
{{message}}
</div>
<script>
//------------------------vue的基本模板----------------
/* let message = 'helloworld!';
//通过vue构造函数创建了一个vue对象
const vue = new Vue({
//作用范围 视图部分作用范围
el: '#app',
//vue的数据部分
data: {
message
}
})
*/
//---------------------------vue的生命周期--------------------
const vue = new Vue({
el: '#app',
data: {
message: "helloworld!"
},
methods: {
say() {
console.log('say');
}
}, //第一个钩子函数:此阶段data和method都没有准备好,vue中此时只有一个空架子,适合在此处放一个加载动画,提高用户体验
beforeCreate() {
console.log('第一个钩子函数beforeCreate'); //第一个钩子函数beforeCreate
console.log(this.message); //undefined
console.log(this.say); //undefined
console.log(document.getElementById("app").innerHTML); //{{message}}
},
//第二个钩子函数,完成了对vue中的data和methods的加载,适合进行业务的处理,Ajax适用于此处。但是此时的模板仍旧未渲染,所以message还是message。
created() {
console.log('第二个钩子函数created'); //第二个钩子函数created
console.log(this.message); //helloworld!
console.log(this.say); //ƒ say() { console.log('say'); }
console.log(document.getElementById("app").innerHTML); //{{message}}
},
//第三个钩子函数,此阶段完成了模板的编译,但是还没有挂在到页面中。原因是此处vue使用了虚拟DOM技术,在内存中实现对整个页面的编译,但此阶段并未挂载到页面上。优点用户交互较好,缺点对内存的占用量较大。
beforeMount() {
console.log('第三个钩子函数beforeMount'); //第三个钩子函数beforeMount
console.log(this.message); //helloworld!
console.log(this.say); //ƒ say() { console.log('say'); }
console.log(document.getElementById("app").innerHTML); //{{message}}
},
//第四个钩子函数,此阶段标志着vue实例化阶段完全结束了,此时模板也已经渲染结束,元素会挂在到html中
mounted() {
console.log('第四个钩子函数mounted'); //第四个钩子函数mounted
console.log(this.message); //helloworld!
console.log(this.say); //ƒ say() { console.log('say'); }
console.log(document.getElementById("app").innerHTML); //helloworld!
},
//运行阶段的钩子函数beforeUpdate:如果data发生改变,触发此钩子函数,data改变了,但是页面的DOM元素还没有改变。这仍旧和虚拟DOM有关
//在浏览器控制器中改变message的值:vue._data.message=123,触发此函数
beforeUpdate() {
console.log('运行阶段的钩子函数beforeUpdate'); //运行阶段的钩子函数beforeUpdate
console.log(this.message); //123
console.log(document.getElementById("app").innerHTML); //helloworld!
},
//updated 钩子函数 ,data改变了,页面的DOM元素也重新渲染
updated() {
console.log('运行阶段的钩子函数Updated'); //运行阶段的钩子函数updated
console.log(this.message); //123
console.log(document.getElementById("app").innerHTML); //123
},
//销毁阶段的钩子函数:实例即将销毁,该阶段实例还是可以使用
beforeDestroy() {
console.log(this.message);
console.log(this.say);
},
//该钩子函数:实例已经销毁,data和methods都无法使用
destroyed() {
},
})
</script>
</body>
</html>