V-IF
条件は、ラベル要素をfalse原則であることが示されている場所を示していない事実である：要素をロードしません
V-ショー
設定表示：ラベル要素がfalseは原則として表示されないことが示される場合条件が真であるなしを。
あなたは、同じコンテンツを参照してください、それ以外の効果や違いの両方の存在を尋ねます。それはないとして、V-ショー命令の場合：隠された内部の要素が表示されないまず、使用するのであれば、V-、VUEは、対応するHTMLコードを生成しようとしません。隠された内容を改善するためにV-場合、ロードされていないことをこれは意味
V-ための循環
直接書込みサイクルのアレイ場合エレメントの各アレイ素子のうち項目
<ul v-for="(value) in dog2" :key="value.name">
<li> {{value}}</li>
</ul>
dog: [{
name: "大",
url: "www",
slogan: "热爱知识！"
}, {
name: "大白",
url: "www.dreamstudio",
slogan: "热爱知识，传递"
}, {
name: "大白菜",
url: "www.dreamstudio.top",
slogan: "热爱知识，传递技术！"
}],
目標ループサイクル数（値、キー）一定の順序
<ul v-for="(value,key) in dog1" :key="value.name">
<li> {{value}} - {{key}}</li>
</ul>
-------------------------------------------------- ------------------------------------------
V-bindコマンドは、HTML属性に値をバインドするために使用されます。通常、動的な属性値にこれを行うために、コロンで表さ増減することができます
反応します
アプリケーションの初期化が完了した後に作成された関数メソッドが実行されます。VUEライフサイクルフックは後で詳しく説明します、我々は、データオブジェクトの対応する値に直接このメソッドの機能についてはあまりthis.seconds心配しないで、それを操作することで、テンプレートを更新します。
created() {
setInterval(() => {
this.time++;
}, 1000)
},
//当time改变时vue可以检测到 做出响应VUE応答実装原理
オブジェクトが変更されたときにデータオブジェクトを変更するために追加VUEは、達成に応答VUEを、通知されます。オブジェクトの各属性は、変更時にVUEは、彼が変更されたことを知っているようにゲッターセッターメソッドは、したがって、それらを使用するために、通常のオブジェクトのように使用することができます置き換えられます
注意事項
オブジェクトのためのノートへの応答がVUEのインスタンスに初期化する必要があり、追加したときに、もはや適切なスタイルであるという性質の強度を作成した後に追加していきません
canst vm = new Vue({
data: {
formData: {
time:'som use'
}
}
});
vm.formData.name = 'username';
//time是响应式的 name属性不是后加的
非応答ソリューションのI
1、
まあデフォルト値に割り当てられた名前などの属性データの値が事前に定義された（最も単純で最も一般的に使用されます）
formData: {
use name ：'someuse'
name: undefined
}再作成したオブジェクトへのオブジェクトを覆う2、
vm.formData =Object.assign({}, vm.formData, {
name: 'Some User'
});
図3に示すように、設定された方法
VUEはVue.set（）メソッドを提供します
配列の目的のために注意すべきです
配列インデックスによって配列の値を設定しません
ソリューション
古い要素を削除するには、新しい要素を追加するために、スプライス（）メソッドを使用して、井戸
vm.dogs.splice（2、1、 'ボブ'）。
2、VUEはVue.set（）メソッドを提供しました
Vue.set（vm.dogs、2、 'ボブ'）。
配列の長さを変更します
配列を変更することはできません監視することはできませんVUE
-------------------------------------------------- ------------
V-バインドプロパティがバインディング代わりに使用することができます::
<body>
<div id="vue-div">
//使用（v-bind:）该属性值与data中相关联可以改变
<img v-bind:src="imgUrl" style="width: 50px;height: 50px;display: block;"/>
使用（:src），简写方式
<img :src="imgUrl" style="width: 50px;height: 50px;"/>
</div>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#vue-div",
data: {
msg : "aabbdDD-Hello-World",
imgUrl : "https://cn.vuejs.org/images/logo.png"
}
});
</script>
</body>
</html>他のクラスとスタイル属性の結合にV-バインド
1、バインディングクラス
<div :class="['active']">ddd</div>
<div :class="{active:bool}">ddd</div>
<div class="ddd" tabindex="-1">ddd</div>
//对象跟数组可以写直接量 也可以配合写变量
スタイルプロパティのバインド
<div :style="['active']">ddd</div>
<div :style="{active:bool}">ddd</div>
//对象跟数组可以写直接量 也可以配合写变量
-------------------------------------------------- -----
Vモデルの入力データとタグ値VUEインスタンスオブジェクト相互作用を結合フォームウェイデータ
あなたは使用することができ v-model 、フォームの指示 <input>、<textarea> および <select> 要素に結合双方向のデータを作成します。これは自動的に制御型の要素を更新するための正しい方法を選択します。
v-model すべてのフォーム要素は無視され value、checked、selected プロパティの初期値をデータソースとしては常にヴューインスタンスデータ。あなたは合格しなければならない組立JavaScriptの data 初期値のオプションの宣言を。
v-model 内部的に異なる入力要素のためのさまざまなイベントを異なる属性を使用して投げます：
- 使用して、テキストとTEXTAREA要素
valueのプロパティとinputイベントを、 - チェックボックスとラジオ使用
checkedのプロパティとchangeイベント。 - フィールドを選択
value小道具として、およびchangeイベントとして。
修飾子
.lazy
デフォルトでは、v-model 毎回 input 入力ボックスを同期させるためのトリガイベント後のデータの値は、あなたが追加することができ lazy 、それによって使用に、修飾子を change 変更イベントへの入力イベントからトリガ同期入力:(完了）のシフトに相当するイベント無駄な結合双方向データが得られます
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >.trim
あなたは自動的にフィルタと最後の空白文字は、ユーザーが入力したしたい場合は、できる v-model 追加 trim 修飾子を：
これは、データバインディング方法には影響しません。
<input v-model.trim="msg">
