<!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 = thisthis.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>
