. 1 <! DOCTYPE HTML > 2 < HTML > . 3 < head > . 4 < Meta charset = "UTF-. 8" > . 5 < title > </ title > . 6 </ head > . 7 < style > . 8 <-! V-Cloak plug-expression can solve flicker problems -> . 9 [V-Cloak] { 10 the display : none ; . 11 } 12 is </ style > 13 is <body> 14 < div the above mentioned id = "App" > 15 <-! V-default text does not flicker -> 16 <-! V-text elements will be covered in the original content, but will only replace their interpolation expression is a placeholder, the entire contents of the element will not empty -> . 17 < div V-text = "MSG1" > </ div > 18 is . 19 <-! V-binding properties of the bind, abbreviated as: -> 20 is < INPUT type = "Button" value = "click" : title = "MyTitle + '123'" @click = "the begin" /> 21 22 <-! V-ON event binding, abbreviated as @ -> 23 is < INPUT type = "Button" value = "Stop" : title = "mytitle1 + '123'" @click = "STOP" /> 24 25 <-! {} {} After MSG value can be displayed directly added on the page, this is an expression of the benefits of interpolation, if it can not be displayed with v-text sunny weather is good today, because it will be overwritten -> 26 < the p- v-Cloak > {{msg}} sunny weather is good today </ P > 27 28 <-! directly output html format -> 29 < div V-html = "Msg2" > </ div > 30 </div> 31 32 </body > 33 is </ HTML > 34 is < Script the src = "../ JS / vue.js" > </ Script > 35 < Script > 36 var VM = new new Vue ({ 37 [ EL: ' #app ' , 38 is Data: { 39 MSG1: ' hahaha ' , 40 MSG: ' 123456,789 ' , 41 is Msg2: ' <h1 of> I was a h1 </ h1>', 42 is MyTitle: ' Click ' , 43 is mytitle1: ' click stop ' , 44 is the intervalId: null // defined in the timer Id Data 45 }, 46 is Methods: { 47 the begin () { 48 the console.log ( the this a .msg ) 49 IF ( the this .intervalId ! = null ) return ; 50 // get the first character of the this 51 is the this .intervalId= The setInterval (() => { 52 is var Start = the this .msg.substring ( 0 , . 1 ) 53 is // acquired subsequent characters 54 is var End = the this .msg.substring ( . 1 ) 55 // re-splicing to give new the string 56 is the this a .msg = End + Start 57 is }, 400 ) 58 }, 59 sTOP () { // stop timer 60 the clearInterval ( the this .intervalId); 61 is // every time after the timer is cleared, the need to set intervalId null 62 is the this .intervalId = null ; 63 is } 64 }, 65 }) 66 </ Script > 67 68 69 70 <! - 1. how to define a basic code structure Vue -> 71 <-! 2. interpolation-text expressions and V -> 72 <-! 3. V-Cloak -> 73 is <! - HTML-V 4. -> 74 <! -5. v-bind attribute binding mechanism provided Vue abbreviations: -> 75 ! <- 6. v-ON event binding mechanism provided by the acronym Vue @ ->