vue2 の v-model を深く理解し、コンポーネントでこの構文をサポートする方法を確認します。
この記事では、vue2 の v-model を理解し、v-model が双方向バインディングであるか一方向データ フローであるかを確認し、開発するコンポーネントで v-model をサポートする方法を説明します。みんなの役に立つように。
この記事を読む
次の内容が得られます:
- 理解:
v-model構文とは何か砂糖？vue2ネイティブ コンポーネントに対してどのような特別な処理が行われましたか? - 調べてください:
v-modelそれは 一方向データ フロー ですか、それとも 双方向データ バインディング ですか? - 理解してください:
v-model糖衣構文以外の「副作用」は何ですか? - コンポーネントで
v-model構文をサポートする方法を学習します。
1. v-model の本質は糖衣構文です。
『
v-modelは本質的に単なる糖衣構文です。ユーザー入力イベントをリッスンしてデータを更新し、いくつかの極端なシナリオに対して特別な処理を実行する役割を果たします。 』 - 公式ドキュメント。 [関連する推奨事項: vue.js チュートリアル ]
糖衣構文とは何ですか?
シンタックスシュガーとは、簡単に言うと「便利な文章」です。
ほとんどの場合、v-model="foo" は、:value="foo" に @input ="foo を加えたものと同等です。 = $event";
<!-- 在大部分情况下，以下两种写法是等价的 --> <el-input v-model="foo" /> <el-input :value="foo" @input="foo = $event" />
はい、ほとんどの場合これは当てはまります。
ただし、例外もあります。
vue2はコンポーネントにmodel属性を提供し、ユーザーが ## をカスタマイズできるようにします。 # 渡された値のプロップ名 と更新された値 のイベント名 。今回は省略し、セクション 4 で詳細を説明します。- ネイティブ
html
ネイティブ要素については、vueが私たちに無視させるために多くの「汚い仕事」を行っていますhtmlAPI の違い。次の要素の左右の書き方は同等です: - textarea
要素:
- select
ドロップダウン ボックス:
- ##input type='radio'
- ラジオ ボタン:
- 複数のチェックボックス:
プログラミング的思考の観点からは、ユーザーが「詳細を隠す」ことを支援するこの方法は、カプセル化
2. v-model は単なる構文糖ですか? (豆知識)
v-modelは糖衣構文であるだけでなく、副作用もあります。v-model
副作用は次のとおりです。
が応答オブジェクトに存在しないプロパティにバインドされている場合、vue このプロパティを追加して応答性を高めるだけです。 たとえば、次のコードを見てください:
// template中：
<el-input v-model="user.tel"></el-input>
// script中：
export default {
data() {
return {
user: {
name: '公众号: 前端要摸鱼',
}
}
}
}user.tel
属性はレスポンシブ データでは定義されていませんが、template では定義されています。 しかし、v-model は user.tel をバインドするために使用されます。入力すると何が起こると思いますか? 効果を見る:
答えを明らかにする: tel
user## に追加されます# 、および tel この属性は引き続き 応答です。 これが「副作用」の影響ですが、学習しましたか？ 3.
それは双方向のバインディングですか、それとも一方向のデータ フローですか?
2.1 v-model それは双方向バインディングですか?
はい、役人は「はい」と言いました。
『v-model ディレクティブは、、