|
|
@@ -0,0 +1,66 @@
|
|
|
+<!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>
|
|
|
+ <!--
|
|
|
+ 三个阶段：8个
|
|
|
+ 初始：
|
|
|
+ beforeCreate 创建前 方法和数据 都无法被调用
|
|
|
+ created 创建后 方法和数据 都可以被调用
|
|
|
+ 运行：
|
|
|
+ beforeMount 挂在前 页面数据并没有更新到视图上 对当前DOM操作无效
|
|
|
+ mounted 挂在后 页面更新到视图上 对DOM操作生效
|
|
|
+ beforeUpdate 更新前 视图变化 数据未更新
|
|
|
+ updated 更新后 视图变化 数据更新
|
|
|
+ 销毁：
|
|
|
+ beforeDestory 销毁前 对DOM操作无效
|
|
|
+ destoryed 销毁后 彻底销毁
|
|
|
+ -->
|
|
|
+ <div id="app">
|
|
|
+ <div id="hi">{{msg}}</div>
|
|
|
+ <button @click="changeMain">改变</button>
|
|
|
+ </div>
|
|
|
+ <script src="./vue.js"> </script>
|
|
|
+ <script>
|
|
|
+ var vm = new Vue({
|
|
|
+ el:"#app",
|
|
|
+ data:{
|
|
|
+ msg:"你好"
|
|
|
+ },
|
|
|
+ beforeCreate() {
|
|
|
+ console.log(this.msg,'1')
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ console.log(this.msg,'2',this.getMain())
|
|
|
+ },
|
|
|
+ beforeMount() {
|
|
|
+ console.log(this.msg,'3',this.$el)
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ console.log(this.msg,'4',this.$el)
|
|
|
+ },
|
|
|
+ beforeUpdate() {
|
|
|
+ console.log(this.msg,'5',this.$el,document.getElementById("hi").innerHTML)
|
|
|
+ },
|
|
|
+ updated() {
|
|
|
+ console.log(this.msg,'6',this.$el,document.getElementById("hi").innerHTML)
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ getMain() {
|
|
|
+ console.log("今天")
|
|
|
+ },
|
|
|
+ changeMain() {
|
|
|
+ this.msg = '新的'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
bailing