视频课件截图1
<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: "张三",
num: 100
},
methods: {
show() {
return this.name;
},
add() {
this.num++;
}
},
beforeCreate() {
console.log("===========beforeCreate=============");
console.log("数据模型未加载：" + this.name, this.num);
console.log("方法未加载：" + this.show());
},
create: function() {
console.log("=============created========");
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>
2022
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
