はじめに卿のブログ|（中）Vue2.0内部命令

セクションIV：V-テキスト＆V-HTML

使用してHTML出力データ値{{メッセージ}}。しかし、このような状況の欠点があり、我々は、低速のインターネット接続やJavaScriptエラーを持っている場合、公開するということである私達の{{メッセージ}}。Vueのは、私たちを提供し、V-テキストは、この問題を解決することです。

<P> {{メッセージ}} </ P> = <PのV-テキスト= "メッセージ"> </ P>

あなたがv-テキスト出力で、javascriptのhtmlタグに書かれている場合は出ないが、我々は使用する必要がv-htmlラベルの
インスタンスを：

<DIV ID = "アプリケーション"> 
    <スパンV-テキスト= "メッセージ"> </ span>の
    <スパンV-HTML = "myHtml"> </スパン> 
</ div> 
<スクリプト> 
    VARアプリ=新しいヴューを（{ 
        EL： "＃アプリ" 
        データ：{ 
            メッセージ"Hello World"の、
            myHtml： "<H2>のHello World </ H2>" 
        } 
    }）
</スクリプト>

セクションV：バインディングVオンイベント

JSコードの一部トリガーするV-上の命令にDOMイベントを聞くことができる
例は：

  <DIV ID = "アプリ"> 
       本场比赛得分：{{カウント}} <BR/> 
       <ボタンVオン：= "追加"をクリック>加分</ button>の
       <ボタン@クリック= "減らす">减分</ボタン> 
</ div> 
    <スクリプトタイプ= "テキスト/ javascriptの"> 
        VARアプリ=新しいヴュー（{ 
            エル： '＃アプリ'、
            データ：{ 
                カウント：1 
            }、
            メソッド：{ 
                追加：関数（）{ 
                    this.count ++; 
                }、
                低減：関数（）{ 
                    this.count--; 
                } 
            } 
        }）
    </スクリプト>

V-にシンプルな言葉遣い、@に置き換えられます

<ボタン@クリック= "減らす">减分</ボタン>

VI：Vモデル命令

即ち、V字モデルバインディング指示データソース。特定のフォーム要素にデータをバインドすることです、あなたは簡単に結合双方向のデータを実装することができます。

まず、テキスト

<DIV ID = "アプリケーション"> 
    <P>原始数据：{{メッセージ}} </ P> 
    の<input type = "text"のVモデル= "メッセージ"> 
</ div> 
<スクリプト> 
   VARアプリ=新しいヴュー（{ 
       EL： "＃アプリ" 
       データ：{ 
           メッセージ"Hello World"の
       } 
   }）
</スクリプト>

第二に、複数行のテキスト

<div id="app">
    <p>Message is: {{message}}</p>
   <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
</div>
<script>
   var app=new Vue({
       el:"#app",
       data:{
           message:"hello world"
       }
   })
</script>

三、复选框

1、单个勾选框

<div id="app">
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
</div>
<script>
   var app=new Vue({
       el:"#app",
       data:{
           checked:false
       }
   })
</script>

2、多个勾选框，绑定到同一个数数组:

<div id="app">
    <input type="checkbox" id="checkboxA" v-model="checked" value="A">
    <label for="checkboxA">A</label>
    <input type="checkbox" id="checkboxB" v-model="checked" value="B">
    <label for="checkboxB">B</label>
    <input type="checkbox" id="checkboxC" v-model="checked" value="C">
    <label for="checkboxC">C</label>
    <p>{{checked}}</p>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            checked:[]
        }
    })
</script>

3、单选按钮

<div id="app">
    <p>
       <input type="radio" id="one" value="男" v-model="sex">
       <label for="one">男</label>
       <input type="radio" id="two" value="女" v-model="sex">
       <label for="two">女</label>
       <p>您选择的性别是: {{sex}}</p>
   </p>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"hello world",
            isTrue:true,
            web_names:[],
            sex:'男'
        }
    })
</script>

オリジナル：ビッグボックス（中）Vue2.0内部命令|はじめ卿さんのブログ