<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
{{a}}
</div>
<script>
var vm = new Vue(
{
el: "#app",
data: {
a: "hello vue"
},
// 对象初始化之后，数据观察(data observe)和事件配置(event watcher)之前调用
beforeCreate: function () {
console.log("beforeCreate");
},
// 在实例创建完成后被立即调用
created: function () {
console.log("created");
},
// 在挂载开始之前被调用,相关的渲染函数被调用
beforeMount: function () {
console.log("beforeMount");
},
// el被新创建的vm.$el替换，挂载成功
mounted: function () {
console.log("mouted");
},
// 数据更新时调用
beforeUpdate: function () {
console.log("beforeUpdate");
},
// 组件dom已经更新，组件更新完毕
updated: function () {
console.log("updated");
},
}
);
// 异步函数
setTimeout(function() {
vm.a = "value changed";
}, 3000);
</script>
</body>
</html>