<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id= "app">
<span id="num">{{num}}</span>
<button @click="num++">赞！</button>
<h3>{{name}},有{{num}}个人点赞</h3>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
name:"张三",
num:100
},
methods: {
show() {
return this.name;
},
add() {
this.num++;
}
},
beforeCreate() {
console.log("=================beforeCreate==============");
console.log("数据模型未加载："+this.name,this.num);
console.log("方法未加载："+this.show);
console.log("html模板未加载："+ document.getElementById("num"));
},
created() {
console.log("=================created===================");
console.log("数据模型已加载："+this.name,this.num);
console.log("方法已加载："+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("==================updated======================");
console.log("数据模型已更新："+this.num);
console.log("html模板已更新："+document.getElementById("num").innerText);
},
})
</script>
</body>
</html>
