生命周期过程
| 名称 | 含义 |
|---|---|
| before Created | 创建之前 el 初始化data |
| Created | 创建 |
| before Mounted | 挂载之前 |
| Mounted | 挂载 |
| before Updated | 更新之前 |
| Updated | 更新 |
| before Destroyed | 销毁之前 |
| Destroyed | 销毁 |
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<input type="text" v-model="value">
</div>
</body>
</html>
<script src="js/demo3.js"></script>
JS 代码
window.onload = function(){
var data = {
msg:'hello vue.js',
value:'app'
}
var methods = {
}
// 构造器 构造函数 创建一个实例 vm是Vue的实例 Vue是VM的构造器
var vm = new Vue({
el:'#app',
data:data,
// 实例创建成功自动执行
created:function(){
console.log("实例创建成功！")
},
mounted:function(){
console.log("数据挂载完成！")
},
updated:function(){
console.log("数据修改成功！")
},
methods:methods
})
console.log(data.msg === vm.msg);
console.log(data.msg);
// 设置属性会改变原始属性
vm.msg = "world vue.js";
console.log(data.msg);
// 访问el和data属性
console.log(vm.$el === document.getElementById("app"));
console.log(vm.$data === data);
// 监听属性改变的方法
vm.$watch('value',function(newvalue,oldvalue){
console.log("value值在改变！");
console.log(newvalue,oldvalue);
})
/*针对生命周期提供了 钩子函数
created
Mounted
Updated
Destroyed
*/
}
网友评论