VUE共通命令

viewコマンドの出力アクション：モデルビューへの結合

V-テキストおよびV-HTML

1.初期V-テキスト無しフリッカの問題がなく、V-テキスト{}は{}と略称、および論理演算をサポートすることができます
2. V-テキストエレメントは、元のコンテンツに覆われるが、この補間式1は、要素の全内容を空にする、そのプレースホルダを置き換えることはありません
3.デフォルトでは、内側のV-HTMLコンテンツ、HTML出力をカバー

V-テキスト の例

<span v-once>这个将不会随msg属性的改变而改变: {{ msg }}</span>

V-HTMLの 例

<p v-html="html"></p>

第二に、ディレクティブの結合特性：動的バインディングモデルビュー

v-bind ：Vueが結合特性（タイトル）のための指示を提供します

1.直接使用する命令v-bind
2.縮小命令 :
結合要素を、結合ステッチの時には3：
```
:title="btnTitle + ', 这是追加的内容'"
```
実際の例

通常、我々は通過しますv-bind、我々は、動的な、このように、結合またはクラススタイルなどいくつかのプロパティの値を切り替えることができるように、オブジェクトを：

// isBlue是布尔值，blue类是否存在取决于isBlue是否为真
<div :class="{ blue: isBlue }"></div> 

// thisFont是变量，字体大小随thisFont而变化
<div :style="{ fontSize: thisFont + 'px' }"></div> 

// 当然如果属性多的话，可以这样写
<div :style="styleBox"></div> 
// JS
data () {
    return {
        styleBox: {
            fontSize: 20px,
            color: #ccc,
            ...
        }
    }
}

第三に、イベント結合ディレクティブの 役割：onclickの結合動的モデル

イベントは、他のイベントをバインドすることができますクリックをバインドするだけでなく、結合機構
短縮形：@
VMにバインドされたコントロールのイベント
+ .Stop泡立ちを防ぐ
+デフォルトのイベント防ぐ.prevent
イベントリスナーを追加.capture +使用イベントキャプチャモードを
+イベントは、要素自体（例えば、いない子要素）に発生したとき.selfにのみ、コールバックをトリガ
+ .onceイベントのみトリガ
例

	    <!-- 使用  .stop  阻止冒泡 -->
	    <div class="inner" @click="div1Handler">
	      <input type="button" value="戳他" @click.stop="btnHandler">
	    </div> 
	
	    <!-- 使用 .prevent 阻止默认行为 -->
	    <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>
	
	    <!-- 使用  .capture 实现捕获触发事件的机制 -->
	    <div class="inner" @click.capture="div1Handler">
	      <input type="button" value="戳他" @click="btnHandler">
	    </div> 
	
	    <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
	    <div class="inner" @click="div1Handler">
	      <input type="button" value="戳他" @click="btnHandler">
	    </div> 
	
	    <!-- 使用 .once 只触发一次事件处理函数 -->
	  	 <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>

効果は4、Vモデル：2ウェイバインディング、もはや単に表示するためにバインドされていないが、値の変更は、モデルに基づいて行動します見ます

指示を結合する唯一の方法

注：Vモデルのみフォーム要素入力で使用することができる（ラジオ、テキスト、住所、電子メール...）を選択し、チェックボックスTEXTAREA

1. HTML 代码结构


	      <div id="app">
    		<input type="text" v-model="n1">
    		<select v-model="opt">
    		  <option value="0">+</option>
    		  <option value="1">-</option>
    		  <option value="2">*</option>
    		  <option value="3">÷</option>
    		</select>
    		<input type="text" v-model="n2">
    		<input type="button" value="=" v-on:click="getResult">
    		<input type="text" v-model="result">
		  </div>



2. Vue实例代码：


	// 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        n1: 0,
        n2: 0,
        result: 0,
        opt: '0'
      },

      methods: {
        getResult() {
          switch (this.opt) {
            case '0':
              this.result = parseInt(this.n1) + parseInt(this.n2);
              break;
            case '1':
              this.result = parseInt(this.n1) - parseInt(this.n2);
              break;
            case '2':
              this.result = parseInt(this.n1) * parseInt(this.n2);
              break;
            case '3':
              this.result = parseInt(this.n1) / parseInt(this.n2);
              break;
          }
        }
      }
    });

五、V-用とキー属性

反復配列- 通常の配列-オブジェクトの配列

<ul>
  <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
</ul>

<ul>
   <p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
</ul>

繰り返しオブジェクトの属性

<!-- 循环遍历对象身上的属性 -->
<div v-for="(val, key, i) in userInfo">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</ div>

--- 1から始まる反復回数を数えます

<p v-for="i in 10">这是第 {{i}} 个P标签</p>

2.2.0+バージョン、機器に使用される V-ため、キーが今不可欠であるとき。

Vue.jsは、V-の更新されたリスト要素であるがレンダリングされているとすると、「使用してデフォルト現場の再利用に戦略」。データ項目の順序が変更された場合、Vueがしますデータ項目の順序と一致するDOM要素を移動していないが、単にここで、各要素を再利用し、各要素は、特定のインデックスでレンダリングされていることを確認するように見えます。

、プロンプトのVueを与えるために、それは、それによって再利用を各ノードのステータスを追跡し、既存の要素を並べ替えることができるように、あなたは、各プロパティの一意のキーを提供する必要があります。

第六に、v-ifそしてv-show

一般的には、V-場合、より高いスイッチング消費高い初期レンダリング消費をV-示しています。あなたが頻繁に切り替え、V-ショーを必要とする場合の条件は、V-あれば良く、実行時に変更することはほとんどありませんのであれば、より良いです。

おすすめ