|
|
@@ -0,0 +1,71 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ {{count}}
|
|
|
+ <button @click="add()">+1</button>
|
|
|
+ <button @click="des()">销毁</button>
|
|
|
+ </div>
|
|
|
+ <script src="vue.js"></script>
|
|
|
+ <script>
|
|
|
+ var app = new Vue({
|
|
|
+ el: '#app',
|
|
|
+ data: {
|
|
|
+ count: 1,
|
|
|
+ mount: setInterval(() => {
|
|
|
+ console.log(1)
|
|
|
+ }, 1000)
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ add(){
|
|
|
+ this.count++
|
|
|
+ },
|
|
|
+ des(){
|
|
|
+ clearInterval(this.mount)
|
|
|
+ this.$destroy()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //组件实例刚刚创建之前 属性计算之前
|
|
|
+ beforeCreate(){
|
|
|
+ console.log('beforeCreate',this.$data,this.$el)
|
|
|
+ },
|
|
|
+ //组件实例刚刚创建完成 属性绑定 dom没有生成 el不存在
|
|
|
+ created(){
|
|
|
+ console.log('created',this.$data,this.$el)
|
|
|
+ },
|
|
|
+ //挂载前
|
|
|
+ beforeMount(){
|
|
|
+ console.log('beforeMount',this.$data,this.$el)
|
|
|
+ },
|
|
|
+ //挂载后
|
|
|
+ mounted(){
|
|
|
+ console.log('mounted',this.$data,this.$el)
|
|
|
+ },
|
|
|
+ beforeUpdate(){
|
|
|
+ console.log('beforeUpdate',this.$data,this.$el)
|
|
|
+ },
|
|
|
+ updated(){
|
|
|
+ console.log('updated',this.$data,this.$el)
|
|
|
+ },
|
|
|
+ beforeDestroy(){
|
|
|
+ console.log('beforeDestroy',this.$data,this.$el)
|
|
|
+ },
|
|
|
+ destroyed(){
|
|
|
+ console.log('destroyed',this.$data,this.$el)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
zsydgithub