<!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>
586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
