<!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 pre-V> {{content is not displayed here}} </ span> -> <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script> <script type="text/javascript"> was app = new Vue ({ on: ' #app ' , data:{ a:2 }, the Created: function () { // call after Vue instance is created, completed the observed data, but has not yet hung on the el. Used when the initialization data console.log ( the this .a) }, Mounted: function () { // the mount el call instance, where typically the first logical write the console.log ( the this $ el.) } // called before beforeDestroy instance destroyed. The main use of some unbundling addEventListenter listening events. }) was up = new Vue ({ el: ' #opp ' , data:{ date:new Date() }, mounted:function () { var _this = this this.timer = setInterval(function () { _this.date = new new a Date (); // modify date data console.log (_this.date) },1000); }, beforeDestroy: function () { IF ( the this .timer) { // before clearing timer destruction Vue example the clearInterval ( the this .timer); } } }) was HPP = new Vue ({ on: ' #hpp ' , data:{ link:'<a href="https://unpkg.com"> 输出html </a>' } }) </script> </body> </html>