Vueの命令とメンバー
命令
フォーム
フォームと命令は、一般的に連動属性コマンドで使用されている、最も一般的なされv-model="变量"、この場合、変数バインディングはフォーム要素の制御値の実際の値であり、我々は、入力ボックスの一部のコンテンツのリアルタイム同期を達成するために、このメソッドを使用することができます、単一のボックスと、次の例のチェックボックスの複数、及び
<body>
<div id="app">
<form action=""><!--这里我们定义的两个input框,一个textarea大文本框,其v-model都是绑定的同一个v1,这种情况下,我们只需要改变v1的值,三个框的值都会实时改变,而v-mode的值就是表单的value值,所以我们在input框里面输入的值就可以实时呈现出来-->
<input type="text" v-model="v1">
<input type="text" v-model="v1">
<textarea name="" id="" cols="300" rows="100" v-model="v1"></textarea>
<hr>
<!--单一复选框-->
<!---->
<input type="checkbox" name="agree" v-model="v2">
<!--这里的v2,只要给的值布尔值为真就为真,向后端发送的数据就是agree:true-->
<hr>
<!--多个复选框,多个复选框的v-model值要相同,-->
男:<input type="checkbox" name="hobbies" value="male" v-model="v3">
女:<input type="checkbox" name="hobbies" value="female" v-model="v3">
???:<input type="checkbox" name="hobbies" value="lala" v-model="v3">
<p>{{ v3 }}</p>
<hr>
<!--单选框,type类型为radio-->
中午吃啥：<br>
肉肉:<input name="food" type="radio" value="rourou" v-model="v4">
菜菜:<input name="food" type="radio" value="caicai" v-model="v4">
<p>{{ v4 }}</p>
<hr>
<button type="submit">提交</button>
</form>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
v1:'', //v1的初值可以为空
v2:true,//这里应该给的是布尔值,true或者false
v3:['male','female'],//这里是一个比较有意思的用法,我们绑定v3的框有三个,value分别是'male','female'和'lala',这个数组里我们可以指定默认的value,即生成网页的时候数组里写的value对应的多选框会默认选中
v4:'caicai',//这里的用法和上面的相似,也是生成时候的默认值,默认选中value值为'caicai'的单选框
}
})
</script>クローク
大規模なプロジェクトのいくつかについて、より適切なケープ命令、我々は通常ので、実際には、ページをレンダリングする際に、上記の{{内Vueの時間を読んでいない、体の下に配置されているVueの文をインポートするため、 }}は解決されませんが、{{}}フォームに直接表示は、もちろん、この時間は非常に短いですが、ページが大きい場合、スローダウンや速度の状況は、この問題を見て、より明白になりますしたがって、岬命令は、我々は場所で事前に解決する必要があるが、V-マントを追加し、内部のスタイルで与え、この方法は非常に簡単です、この問題を解決することを目的とするdisplay:noneこと。
<head>
<style>
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div v-cloak>
{{}}
{{}}
</div>
</body>だから私たちは一瞬波括弧がページを開くには時間内にレンダリングされていないことを持っていないだろうと。
条件
実際に多くの命令でVueの条件は、2つの一般的なクラス、すなわち、V-IFおよびV-ショー、ブール値に追加する必要があります後ろに、両方の展示ほぼ同じ結果が、わずかに異なる意味の層。
- = V-場合は、「真|偽」、それがfalseの場合、ページ上のタグをレンダリングしていない、我々は、ラベルに非表示情報には、このメソッドを使用することができます
- V-ショー=「真|偽 」、 この後者がfalseの場合、私たちは、ページ上のラベルを見ることができないが、これはラベルがレンダリングされませんという意味ではありませんが、このプロパティをラベル付けするために配置されています
display:noneプロパティは、そう何も表示されていないものの、現実には、レンダリングの結果である。そして、このプロパティはそう隠されたからといって、ページ全体の構造に存在しています。
例としては、次のとおりです：
<body>
<div id="app">
<!--这里两者的显示效果是一样的,但是真正存在形式不太一样-->
<p v-if="false">if指令</p>
<p v-show="false">show指令</p>
<!-- v-if其实就类似于我们之前所接触到的if,同样有elif,有else
v-if
v-else-if
v-else
使用的时候需要注意两点:
1、上分支成立，下分支会被屏蔽
2、else分支只要在所有上分支都为假时就会显示，不需要条件
-->
<p v-if="v1 === '1'">if分支</p>
<p v-else-if="v1 === '2'">elif分支1</p>
<p v-else-if="v1 === '3'">elif分支2</p>
<p v-else>else分支</p>
<hr>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
v1: '1'
}
})
</script>循環
Vueがものためである私達の非常に身近なものに循環するが、ここでv-for、その基本的な文法構造
v-for="成员 in 容器"
このコンテナは、1つの例私たちに下記の配列、辞書、あるいはオブジェクトとして文字列など多くのものとすることができます。
<body>
<div id="app">
<!--1、字符串-->
<p>
<span v-for="v in title">{{ v }}</span>
</p><!--只有一个v的话就是从字符串里每次取一个值,然后渲染-->
<p>
<span v-for="(v, i) in title">
<span v-if="i != 0"> | </span>
{{ v }}
</span>
</p><!--有两个参数,第一个v依然是从字符串里取出来的值,第二个参数是索引值,不仅字符串可以这样使用,数字,字典,对象都可以在最后加一个参数来取到其索引值-->
<!--2、数组-->
<div>
<p v-for="(v, i) in arr">第{{ i }}元素：{{ v }}</p>
</div>
<!--3、对象: 可以只遍历值，也可以遍历值与键，还可以遍历值、键与索引-->
<div><!--只遍历value-->
<p v-for="v in people">{{ v }}</p>
</div>
<div><!--同时遍历value和key-->
<p v-for="(v, k) in people">{{ k }}:{{ v }}</p>
</div>
<div><!--遍历value和key的同时加上索引值-->
<p v-for="(v, k, i) in people">{{ i }}-{{ k }}:{{ v }}</p>
</div>
<br>
<div><!--for循环的嵌套,即先把对象们从数组中取出来,然后对每个对象的value和key值进行遍历-->
<div v-for="(stu, i) in stus">
<hr v-if="i != 0">
<p v-for="(v, k) in stu">{{ k }}:{{ v }}</p>
</div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
title: '循环指令',
arr: [1, 4, 2, 5, 3],
people: {
name: '兔子',
color: '粉白',
price: 6.66,
},
stus: [
{
name: "Bob",
age: 18
},
{
name: "Tom",
age: 17
},
{
name: "Jerry",
age: 19
}
]
}
})
</script>メンバー
実際には、私たちのメンバーを定義new Vue({})するときのような内部の、いくつかの値をel实例成员、data数据成员、methods方法成员、computed计算成员、watch监听成员とdelimiters分隔符成员私たちは計算メンバーとリスナーのメンバーを強調表示し、下に
計算されたメンバ
キーワードにメンバーを計算しcomputed、次の点に注意するのと同じ方法とデータが、時間の使用を追加します。
- この方法で定義された計算属性、及び同様のデータので、計算定義された値と、データが反復を定義する必要はありませんが、それ以外の場合はエラー
- 戻り値に記載の方法属性は、そうでなければ、この方法のボディなしのプロパティの形態で提供され、計算されなければなりません
- レンダリング時のみで、それは、このメソッドのプロパティをトリガしません、レンダリングされませんでしたテキストに定義された計算された場合の計算方法定義された属性は、トリガされます
- 他の変数の値が再び任意の再更新のプロパティ値メソッドの外観を起こるにバインドたら、メソッド呼び出しの値に変更されるすべての変数、その後、表示された場合、計算方法定義された属性
以下の例に、この実装例は、2つの入力ボックス、リアルタイムで最初の2つのフレームを表示されると、最初の2つのボックスが空である場合は、ボタンのボタンが「結果」の文字で表示されている第3ボタンのボタンではなく、ありますそしてその：
<body>
<div id="app">
<input type="text" v-model="v1">
+
<input type="text" v-model="v2">
=
<button>{{ res }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '',
v2: '',
// res: '结果',这里没必要重复定义,因为我们已经在computed里面定义过res这个方法属性
},
computed: {
res () {
console.log('该方法被调用了');
return this.v1 && this.v2 ? +this.v1 + +this.v2 : '结果';//这个三元表达式的意思是,如果v1和v2框内都有值的情况下,res就会被返回这两者的数值和,一旦有一个框没有值,res被返回的就是"结果"这个字符串.+this.v1和+this.v2指的是取v1和v2的数值类型,而不是字符串
}
}
})
</script>モニターのメンバー
モニター、定義によって、私たちは、などの操作、以下のメンバーは、いくつかのポイントを追加するための時間に耳を傾けることに注意を行い、既存の方法のメンバーを聴くことは、リアルタイムで自分のステータスを監視現れるか、その判断を行うために属性をそこに追加することができます。
- この属性の方法で定義されていない上記のデータや計算されたが、決してリスニング時計がない場合、あるだけで、モニタ方法、既存のプロパティを見ます
- モニタが変更JSと同様のトリガ、そのロジックを実行するために、リスナー部材の内部に規定された方法の変更をトリガーする一旦時計モニタ意義は、そのプロパティの値であります
- 方法は、メンバーが計算され、区別するために、戻り値、計算されたプロパティは、メソッドが戻り値を持っている必要があります定義し、モニターする必要はありません見て。
次は最初の人と最後の名前の名前が、2つのスパンボックスの内側に表示され、リアルタイムで単語を分割し、次のように、例は次のとおりです。
<body>
<div id="app">
<p>
姓名：<input type="text" v-model="full_name">
</p>
<p>
姓：<span>{{ first_name }}</span>
</p>
<p>
名：<span>{{ last_name }}</span>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '',
last_name: '',
},
watch: {//full_name是上文中已经定义过的属性,所以可以添加监听方法
full_name() {//我们监听的方法是,当输入的姓名长度为2时,执行监听方法,以空格切割开姓名之后,取其第一个值为姓,第二个值为名,分别赋予first_name和last_name,这样是实现了实时拆分姓和名
if (this.full_name.length === 2) {
k_v_arr = this.full_name.split('');
this.first_name = k_v_arr[0];
this.last_name = k_v_arr[1];
}
}
}
})
</script>