<!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>
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css">
<body>
<div id="app">
<input type="button" value="修改msg" @click="msg='no'">
<span id="s">{{msg}}</span>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'ok',
},
methods: {
show: function () {
console.log('执行了show方法')
},
},
//------------创建阶段的生命周期函数------------
//在beforeCreate生命周期函数执行的时候,data和methods都没有被初始化
beforeCreate() {
console.log('data中msg数据是:' + this.msg);
},
//在create中,data和methods都已经初始化好了,如果要调用methods中的方法
//或者操作data中的数据,最早只能在create中操作
created() {
console.log('data中msg数据是:' + this.msg);
},
//模板已经在内存中编译完成,尚未挂载到页面中
//在beforeMount执行的时候,页面中的元素,还没有被真正替换过来,只是一些模板字符串
beforeMount() {
console.log('界面上元素的内容:' + document.getElementById('s').innerText)
},
//内存中的模板已经挂载到了页面中
//mounted是实例创建后的最后一个生命周期函数,此时实例已经被完全已创建
//如果要通过某些插件操作页面上的dom节点,最早要在mounted中进行
mounted() {
console.log('界面上元素的内容:' + document.getElementById('s').innerText)
},
//-------------运行阶段的生命周期函数------------
//这时候我们的界面还没有更新,数据更新了
beforeUpdate() {
console.log('界面上元素的内容:' + document.getElementById('s').innerText)
console.log('data中msg数据是:' + document.getElementById('s').innerText)
},
//页面和data数据已经保持同步了,是最新的
updated() {
console.log('界面上元素的内容:' + document.getElementById('s').innerText)
console.log('data中msg数据是:' + document.getElementById('s').innerText)
},
//所有属性和方法都处于可用状态
beforeDestroy() {
console.log('data中msg数据是:' + this.msg);
},
//所有属性和方法不可用,被销毁
destroy() {
console.log('data中msg数据是:' + this.msg);
}
});
</script>
</body>
</html>
lifecycle
网友评论