<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id ="app">
<span id="num">{{num}}</span>
<button @click="num++">赞!</button>
<h2>{{name}} ,有{{num}}个人点赞</h2>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let app =new Vue({
el:"#app",
data:{
name:"haoxiansheng",
num:23
},
methods: {
show(){
return this.name;
},
add() {
return this.num++;
}
},
beforeCreate() {
console.log("======beforeCreate=======");
console.log("数据未加载:" +this.name, this.num);
console.log("方法未加载"+this.show());
console.log("html模版方法未加载:"+ document.getElementById);
},
created() {
console.log("======created=======");
console.log("数据yi加载:" +this.name, this.num);
console.log("方法yi加载"+this.show());
console.log("html模版方法未渲染:"+ document.getElementById("num"));
console.log("html模版方法未渲染:"+ document.getElementById("num").innerText);
},
beforeMount() {
console.log("=====beforeMount===");
console.log("html模版方法未渲染:"+ document.getElementById("num").innerText);
},
mounted() {
console.log("=====mounted===");
console.log("html模版方法已渲染:"+ document.getElementById("num").innerText);
},
beforeUpdate() {
console.log("=====beforeUpdate===");
console.log("数据模型已经更新"+this.num)
console.log("html模版未更新:"+ document.getElementById("num").innerText);
},
updated() {
console.log("=====beforeUpdate===");
console.log("数据模型已经更新"+this.num)
console.log("html模版更新:"+ document.getElementById("num").innerText);
},
})
</script>
</body>
</html>
【前段】12 VUE 生命周期与狗子函数
最新推荐文章于 2024-04-18 21:51:51 发布