。1 <！DOCTYPEのHTML > 2 < HTML > 3。 < ヘッド> 4。 < メタ文字セット= "UTF-8" > 5。 < タイトル> </ タイトル> 6。 </ ヘッド> 7。 < スタイル> 8。 <！ - V-マントプラグない発現は、フリッカの問題を解決することができる- > 9。 〔のV-クローク] { 10 表示：なし; 11 } 12である </ スタイル> 13れます <体> 14 < divの上記のid =「アプリケーション」> 15 <！ - V-デフォルトのテキストが点滅しません- > 16 <！ - V-テキスト要素は、元のコンテンツにカバーされますが、唯一自分の補間式に置き換えられますプレースホルダ、素子の全体の内容が空ではありません> - 17 < DIV V-テキスト= "MSG1" > </ DIV > 18である 19は、 <！ - バインドのV結合特性、と略記します：- > 20は 、< INPUTのタイプ= "ボタン" 値= "クリック" ：タイトル= "MyTitle + '123'" @click = "始まり" /> 21 22 <！ - @と略記結合V-ONのイベント、- > 23は、 < INPUTのタイプ= "ボタン" 値= "停止" ：タイトル= "mytitle1 + '123'" @click = "STOP" /> 24 25 - <！MSG値を直接添加し表示することができた後、{} {}ページ上で、このそれは上書きされますので、それはV-テキスト晴れた天気に表示できない場合は、補間の利点の表現ですが、今日は良いです- > 26 < P- V-マントは> {{MSG}}が晴れた天気が今日は良いです/ < P > 27 28 <！ - 直接出力html形式- > 29 < divのV-HTML = "MSG2" > </ divの> 30 </ DIV > 31 32 </本体> 33である </ HTML > 34である < スクリプトSRC = "../ JS / vue.js" > </ スクリプト> 35 < スクリプト> 36 VAR VM = 新しい新しいヴュー（{ 37 [ EL：' #app ' 、 38は データ： { 39 MSG1：' 笑' 、 40 MSG：' 123456,789 ' 、 41は MSG2：「私があったH1 <のH1> </ H1>"、 42は MyTitle：' クリック' 、 43は mytitle1：' 停止をクリック' 、 44は INTERVALID：NULL // タイマー同上データに定義 45 }、 46は {：方法 47 を開始（）{ 48 はconsole.log（この.MSG ） 49 IF （この.intervalId =！ ヌル）のリターン; 50 // これの最初の文字を取得する 51は、 この.intervalId= のsetInterval（（）=> { 52である VaRのスタート= この.msg.substring（0 、1 ） 53は 、// 取得した後続文字 54は、 VaRの終了= この.msg.substring（1 ） 55 // スプライシング再新しい与えますストリング 56は 、この.MSG = エンド+ 開始 57である }、400 ） 58 }、 59 STOP（）{ // 停止タイマ 60 clearInterval（この.intervalId）; 61がある // タイマがクリアされた後、INTERVALIDを設定する必要がヌルたびに 62がある 。この.intervalId = ヌル; 63はある } 64 }、 65 }） 66 </ スクリプト> 67 68 69 70 <！ - 1.基本的なコードの構造を定義する方法のVue - > 71 <！ - 2.補間テキスト表現とV - > 72 <！ - 3. V-マント - > 73れます <！ - HTML-V 4 - > 74 <！ -5. V-バインド機構提供のVueの省略形を結合属性：- > 75 <！ - 頭文字のVueで提供6. V-ONイベントバインディングメカニズム@ - >