第6章テンプレートの構文 - 命令

V-場合の手順は：表示または非表示にします

V-bindコマンド：そのようなV-バインドとしてHTML結合特性、：ID = "1"

@click：イベントをクリックし、偶発click.stop停止バブリング@、自分でクリックすると、クリックイベントの祖先には影響を与えません。

レンダリング：

 

 コード：

<！DOCTYPE HTML > 
< HTML LANG = "EN" のxmlns：V-バインド= "http://www.w3.org/1999/xhtml" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < タイトル> </ タイトル> 
    < リンクタイプ= "テキスト/ cssの" REL = "スタイルシート" のhref = " " /> 
    < スタイルタイプ="テキスト/ cssの" > 
        * { 
            マージン：0 ;
        } 
    </ スタイル> 
    < スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > </ スクリプト> 
</ ヘッド> 
< 身体> 
< DIV ID = "ワン" > 
    <！ - V-IF（表示または非表示）真実（ブール値：真、偽）表示内容のpかどうかを判断する値- > 
    < p個のV-IF = "trueOrFalse" >あなたを参照してください？</ P > 
    <！ - Vバインドに：HTMLの結合特性- > 
    < V-バインド：HREF = "URL" >
    <！ - クリック= "XXX" @：イベントをクリック- > 
    < divの@click = "クリック1" > 
        <！ - .Stopは、祖先要素にバブリング防ぐため、これらを防止することがクリックイベントが来る- > 
        < divの@ click.stop = "click2" >コンソール出力を見るために私をクリックします。</ DIV > 
    </ DIV > 
</ DIV > 
< スクリプトタイプの= "テキスト/ JavaScriptを" > 
    VAR VM_one =  新しい新しいヴュー（{ 
        EL：「#one " 、
        データ：{ 
            trueOrFalse：偽、
            URL：' Https://www.baidu.com ' 
        }、
        メソッド：{ 
            クリック1：関数（）{ 
                にconsole.log（' クリック1がクリック' ）
            }、
            click2：関数（）{ 
                にconsole.log（' click2がクリック' ）
            } 
        } 
    }）
</ スクリプト> 
</ ボディ> 
</ HTML >