フォームのコマンド
どのように使用するには：
v-modelテキストボックス
<input type="text" name="name" id="user" placeholder="请输入账号" v-model="v1">
<input type="text" v-model="v1" name="user">
v1:'123' 先定义一个默认值データは、2つのフレームの連結になり、値ボックスは、二つの外枠不定の値が変化します
チェックボックス
<p>男：<input type="radio" name="sex" value="male" v-model="v2"></p>
<p>女：<input type="radio" name="sex" value="female" v-model="v2"></p>
v2:'female' 默认选择的是female，页面刷新之后就会默认选择自定义的属性，必须与value一起使用checked 表示默认选中,参数チェックボックス
111：<input type="checkbox" name="hobbies" value="111" v-model="v3">
222：<input type="checkbox" name="hobbies" value="222" v-model="v3">
333：<input type="checkbox" name="hobbies" value="333" v-model="v3">
v3:['111','222'] 会在页面上自动默认选中自己定义的框IDと名前と値
ID
番号IDは、IDに一度だけ、ユニークです。
一般的に、多くの場合、JavaScriptのインチ
値
- ボタン付きの値はなど、「OK」、「削除」として表示されるボタンのテキストを参照してください。
- 値のボックスには、このボックスの値を参照し
- 同じ値を持つラジオボタンやチェックボックス
- 値のリストをドロップダウンメニューには、それぞれの子の値であり、
- 値を持つ隠しフィールドは、ボックスの内容の内側に表示されています
あなたは、フォームのデータページにある場合、その値の内容を取得するためのデータを取得するために利用したい場合は、バックグラウンドチェックボックスの値はの値であり、
名
- 名前は、コントロールの名前である（Sコントロールが同じ名前を取ることができる）、値がコントロールの値です。
- すべてのコントロールの値は、チェックボックス、ラジオ、隠されたとして、表示されるわけではありません。
- 定義されたコントロールの名前と値は、サーバ上のこのコントロールとその値を取得することができます。
- ブラウザは、それはまた、ブラウザを定義して提出する前に、その名前を無視するという名前を提出見ていない、という意味ではありません
- 名前、サーバーは同じ名前とその値を取得することができます。
- コントロールは、名前/値だけ利便性と区別し、サーバーについて表示することができる定義していないだけで、その名前/値を定義受け取ります
- もちろん、ボタンのみ値とその値が位置していますが、また表示します。
単にフォームの動作は、VUEは、前項で記述されたフレームワークであることを意味し、これらの命令は、フロントエンド上の操作の数です。
条件付き命令
条件が満たされていない条件の実装に設定されている場合、条件は、判断され、実行されません。
v-show = "布尔变量" 会以display的行式显示
v-if = "布尔变量" 为false的时候， 直接就不显示，页面代码也不显示，用的最多（保证不渲染的数据泄露）V-IF
v-if
v-else-if
v-elseサイクル命令
：によってループ命令を使用します
v-for = " c in info"
v-for = " (k,v) in info"
v-for = "(v,k,i) in info"ユースケース
<i v-for="c in info">{{ c }} </i>
<i v-for="(c, i) in info">{{i}}:{{c}}<br></i>
<div v-for="e in stus">{{ e }}</div>
<div v-for="(e, i) in stus">{{ i }}:{{ e }}</div>
<div v-for="v in people">{{ v }}</div>
<div v-for="(v, k, i) in people">{{ i }} - {{ k }}:{{ v }}</div>
<div v-for="tea in teas">
<span v-for="(v, k, i) in tea"><span v-if="i !== 0"> | </span>{{ k }}:{{ v }}</span>
</div> # 可以循环嵌套标签使用リサイクルのためのいくつかの方法については
unshift, push 是首尾增
shift，pop 是首尾删
数组操作最全的方法：splice
splice(begin_index，count，...argsl,)セパレータ（こちら）
区別するために、競合を使用してレンダリングする通常のフロントページに使用されるテンプレートの構文と文法VUE、区別するために次のメソッドを使用します
{{ msg }} # 正常的div页面
[{ msg }] # vue实例的页面中使用フィルタ
フィルタの効果は、フィルタ値の要件に応じた出力値であります
フィルタ法で1.定義フィルタ
値の2 Aの複数をフィルタリングすることができる、フィルタの通過追加の補助パラメータを持つことができ
結果は再びフィルタリングすることができます3.フィルタは次のように
<p>{{ num | f1 }}</p>
<p>{{ a, b | f2(30, 40) | f3 }}</p>
filters: {
// 传入所有要过滤的条件，返回值就是过滤的结果
f1 (num) {
console.log(num);
return num * 10;
},
f2 (a, b, c, d) {
console.log(a, b, c, d);
return a + b + c + d;
},
f3 (num) {
return num * num;
}
}計算されたプロパティ
計算された属性、メソッド属性（属性法は、必ずしもデータ宣言で繰り返されない）、宣言することができる1.computed
2. method属性がページをレンダリングする必要があり、結合法を可能にする、方法を結合することはmethod属性の戻り値であります
3.なりモニタに表示されるすべての変数を結合させる方法、方法を結合する再トリガ更新の値の変化は、プロパティメソッドの値を更新します
4.解決すべき一般的な問題：複数の変数に従属変数を
<div id="app">
<input type="number" min="0" max="100" v-model="n1">
+
<input type="number" min="0" max="100" v-model="n2">
=
<button>{{ result }}</button>
</div>
data: {
n1: '',
n2: '',
},
computed: {
result () {
console.log('被调用了');
n1 = +this.n1;
n2 = +this.n2;
return n1 + n2;
}
}リスナーのプロパティ
n個の属性のリスニングの現在値であり、oは、コールバックリスナーの属性値がメソッドをリッスンし、毎回値であり、
要約：
1.リスナーのプロパティがデータ内で宣言する必要があり、この方法は、リスナーの戻り値を必要としません。
2.リスナーのメソッド名は、プロパティの値が更新されると、プロパティ名のリスナーがコールバックメソッドをリッスンしますです
3.モニターコールバックメソッドは、2つのパラメータ、現在の値、最後の値を有します
複数の変数に従属変数：問題を解決するために、
<div id="app">
<p>姓名：<input type="text" v-model="full_name"></p>
<p>姓：{{ first_name }}</p>
<p>名：{{ last_name }}</p>
</div>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '未知',
last_name: '未知',
},
watch: {
full_name(n, o) {
name_arr = n.split('');
this.first_name = name_arr[0];
this.last_name = name_arr[1];
},
}
})バブルソート
<script>
new Vue({
el: '#app',
data: {
}
})
</script>
<script>
# 例1 将数组中的值进行排列
let arr = [3, 2, 5, 4, 1];
for (let i = 0; i < arr.length - 1; i++) { // 外层循环控制趟数
for (let j = 0; j < arr.length - 1 - i; j++) { // 内存循环控制比较次数
if (arr[j] > arr[j + 1]) {
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
# 例2 按照分数来进行排列
stus = [
{
name: 'Bob',
grade: 98
},
{
name: 'Tom',
grade: 87
},
{
name: 'Jerry',
grade: 92
},
];
// 按照分数进行排名
for (let i=0; i<stus.length-1; i++) {
for (let j=0; j<stus.length-1-i; j++) {
// 处理条件即可
if (stus[j].grade > stus[j + 1].grade) {
let temp = stus[j];
stus[j] = stus[j + 1];
stus[j + 1] = temp;
}
}
}
console.log(stus);
</script>