<!DOCTYPE html> <html> <head> <title>Vue --- 生命周期</title> </head> <body> <div id="app"> <input type="text" name="" v-model="a" placeholder="你的名字"> <h1>你好！{{a}}</h1> </div> <div id="opp"> {{date}} </div> <div id="hpp"> <span v-html='link'></span> </div> <!-- <span v-pre>{{这里的内容不显示出来}}</span> --> <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script> <script type="text/javascript"> var app = new Vue({ el:'#app', data:{ a:2 }, created:function () { // Vue实例创建完成后调用，完成了数据的观测，但尚未挂在el。在初始化数据的时候使用 console.log(this.a) }, mounted:function () { // el挂载到实例后调用，一般第一个逻辑在这里写 console.log(this.$el) } // beforeDestroy实例销毁之前调用。主要解绑一些使用addEventListenter监听的事件等。 }) var opp = new Vue({ el:'#opp', data:{ date:new Date() }, mounted:function () { var _this = this this.timer = setInterval(function () { _this.date = new Date(); // 修改date数据 console.log(_this.date) },1000); }, beforeDestroy:function () { if (this.timer){ // Vue实例销毁前清除定时器 clearInterval(this.timer); } } }) var hpp = new Vue({ el:'#hpp', data:{ link:'<a href="https://unpkg.com"> 输出html </a>' } }) </script> </body> </html>