コンポーネントとは何ですか?
コンポーネントは、Vue.js の最も強力な機能の 1 つです。コンポーネントは HTML 要素を拡張し、再利用可能なコードをカプセル化できます。大まかに言うと、コンポーネントは、Vue.js のコンパイラーが特別な機能を追加するカスタム要素です。場合によっては、コンポーネントは、 is 属性で拡張されたネイティブ HTML 要素の形式を取ることもできます。
次に、vuejsの一方向バインディング、双方向バインディング、リストレンダリング、レスポンス関数の基礎知識を紹介します。具体的な内容は以下の通りです。
(1) 一方向バインディング
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</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: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>効果は:
①入力入力ボックスには初期値があり、その値はデータ内のメッセージ属性の値です。
②入力ボックスの値を変更すると外部の値に影響を与える可能性があります。戻り値
<div id="app">
{{ message() }}
<br/>
<input v-model="message()"/>
</div>
<script>
new Vue({
el: '#app',
data: {
message: function () {
return 'Hello Vue.js!';
}
}
})
</script>
①出力値はメッセージの戻り値でもあります。 
そして、v-forタグのあるところを、それ単位で複数回コピーします。
(5) ユーザー入力の処理
<div id="app">
<ul>
<li v-for="list in todos">
{{list.text}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
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: '#app',
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: '#app',
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>④ v-for
です。
⑤ v-on: イベント
イベントの後には、keypress.enter はキャリッジ リターン、keypress.space はスペースなど、より具体的なイベントが続くことができます。
⑥ new vue
data はデータを表し、直接アクセスできます。たとえば、v-model または {{変数名}} で使用されます。
methods はメソッドを表します。
⑦ 変数は、この変数を通じて関数 内で呼び出されます。名前、例:<input v-model="DATE" type="date"/>
<li>{{DATE}}</li>data: {
val: "1",
values: []
},
methods: {
addToList: function () {
console.log(this.val);、理由としては、ここのvalはv-forのスコープ内にあると個人的に思っているので、valuesのvalのvalの方がスコープチェーン内で優先度が高いです
ご質問がございましたら、メッセージを残してください。すぐにご返信させていただきます。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。
Vuejs の一方向バインディング、双方向バインディング、リスト レンダリング、および応答関数に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
