Vuejsの一方向バインディング、双方向バインディング、リストレンダリング、レスポンス関数

コンポーネントとは何ですか?

コンポーネントは、Vue.js の最も強力な機能の 1 つです。コンポーネントは HTML 要素を拡張し、再利用可能なコードをカプセル化できます。大まかに言うと、コンポーネントは、Vue.js のコンパイラーが特別な機能を追加するカスタム要素です。場合によっては、コンポーネントは、 is 属性で拡張されたネイティブ HTML 要素の形式を取ることもできます。

次に、vuejsの一方向バインディング、双方向バインディング、リストレンダリング、レスポンス関数の基礎知識を紹介します。具体的な内容は以下の通りです。

(1) 一方向バインディング

<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: &#39;#app&#39;,
data: {
message: &#39;Hello Vue.js!&#39;
}
})
</script>

①el は binding を意味する必要があり、タグ id=app

のバインディングを次のように変更することもできます:

<div class="app">
{{ message }}
</div>

el: '.app',

も同様に有効です。

ただし複数ある場合は最初のもののみ有効です:

<div class="app">
{{ message }}
</div>
<div class="app">
{{ message }}
</div>
Hello Vue.js!
{{ message }}

②データ内のメッセージ変数は{{message}の値を表します

(2) 双方向バインディング

<div id="app">
{{ message }}
<br/>
<input v-model="message"/>
</div>
<script>
new Vue({
el: &#39;#app&#39;,
data: {
message: &#39;Hello Vue.js!&#39;
}
})
</script>

効果は:

①入力入力ボックスには初期値があり、その値はデータ内のメッセージ属性の値です。

②入力ボックスの値を変更すると外部の値に影響を与える可能性があります。戻り値

<div id="app">
{{ message() }}
<br/>
<input v-model="message()"/>
</div>
<script>
new Vue({
el: &#39;#app&#39;,
data: {
message: function () {
return &#39;Hello Vue.js!&#39;;
}
}
})
</script>

効果:

①出力値はメッセージの戻り値でもあります。

②欠点: 双方向バインディングが失われます。 ②そして、次の行のlist.textをtodos[list].textと理解します

そして、v-forタグのあるところを、それ単位で複数回コピーします。

(5) ユーザー入力の処理

<div id="app">
<ul>
<li v-for="list in todos">
{{list.text}}
</li>
</ul>
</div>
<script>
new Vue({
el: &#39;#app&#39;,
data: {
todos: [
{text: "1st"},
{text: "2nd"},
{text: "3rd"}
]
}
})
</script>

効果:

①入力ボックスの値については、追加ボタンを1回クリックすると、値が+1されます

②追加できない場合は、次のように戻ります。通常の式が間違って追加されました。NaN などの結果です。

③data のメッセージの値は、カンマで区切られた関数のコレクションです。

⑤値を取得するときに、次のように追加します。 this.message として取得されるのは message の値です。

(6) 多機能

<div id="app">
<input v-model="message">
<input type="button" value="值+1" v-on:click="add"/>
<input type="button" value="值-1" v-on:click="minus"/>
<input type="button" value="重置归零" v-on:click="reset"/>
</div>
<script>
new Vue({
el: &#39;#app&#39;,
data: {
message: 1
},
methods: {
add: function () {
this.message++; //这步要加this才能正确获取到值
},
minus: function () {
this.message--;
},
reset: function () {
this.message = 0;
}
}
})
</script>

効果:

①最初の入力ボックスの値は 1 です。

②入力ボックスで Enter キーを押すと、入力ボックスの内容が数値に変換されます。そして、変換された数値と削除ボタンを含むリストに追加すると、入力ボックス内の値は数値に 1 を加えた後の値になります。

図に示すように:

③ 彼の追加は、双方向バインディングを使用して入力値をデータ内の値配列にプッシュし、レンダリング リストの効果を使用して複数行を出力します。価値観。

④buttonタグでは、行のインデックスとなるパラメータに関数のパラメータ名を与えます。パラメータ名は$indexです

⑤buttonタグでは、トリガーされる関数の関数名を指定できます。括弧内に追加してもしなくても、実際の測定には影響がないようです。

(7) ラベルと API の概要 (1)

① {{ 変数名}}

は、

② v-model="variable" を呼び出すときに使用する必要があります。

双方向バインディングが使用されます。入力に型が追加されない場合は、テキストになります。例:

<div id="app">
<input v-model="val" v-on:keypress.enter="addToList">
<ul>
<li v-for="val in values">
{{val.val}}
<input type="button" value="删除" v-on:click="removeList($index)"/>
</li>
</ul>
</div>
<script>
new Vue({
el: &#39;#app&#39;,
data: {
val: "1",
values: []
},
methods: {
addToList: function () {
var val = parseInt(this.val.trim()); //注意，因为当上面的val是字符串类型的时候，才能用trim()，如果是数字类型，则用this.val
if (val) {
this.values.push({val: val});
}
this.val = String(val + 1);
},
removeList: function (index) {
this.values.splice(index, 1);
}
}
})
</script>

は、日付型の値をバインドします。 li タグに表示される内容を入力ボックスに入力します。

③ v-on:click=”関数名”

この関数は、()を付けるか付けないかでインデックスを表すパラメータとして使用され、インデックス値は0から始まります。 。

④ v-for

双方向バインディングは、v-model と同様に、配列の内容が更新された後にリアルタイムで更新されます

for in ステートメントと同様に、何度も使用されるのは

です。

⑤ v-on: イベント

トリガーされるイベントには、クリックとキープレスが含まれます

イベントの後には、keypress.enter はキャリッジ リターン、keypress.space はスペースなど、より具体的なイベントが続くことができます。

その他のニーズ View

⑥ new vue

vue のインスタンスを new に渡し、オブジェクトをパラメーターとしてこのインスタンスに渡します

ここで:

el はバインドされたテンプレートを表します (最初にバインドされたテンプレートのみが返されます)。一致した)

data はデータを表し、直接アクセスできます。たとえば、v-model または {{変数名}} で使用されます。

methods はメソッドを表します。

⑦ 変数は、この変数を通じて関数

内で呼び出されます。名前、例:

<input v-model="DATE" type="date"/>
<li>{{DATE}}</li>

This.val ここでは上記の data.val ですが、HTML では {{val}} であり、v-model="val" でもありますが、val ではありません.val in

data: {
val: "1",
values: []
},
methods: {
addToList: function () {
console.log(this.val);

、理由としては、ここのvalはv-forのスコープ内にあると個人的に思っているので、valuesのvalのvalの方がスコープチェーン内で優先度が高いです

ご質問がございましたら、メッセージを残してください。すぐにご返信させていただきます。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。

Vuejs の一方向バインディング、双方向バインディング、リスト レンダリング、および応答関数に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。