Vue における属性とプロパティの具体的な使用法と違い

Vue.jsにおける属性とプロパティ値および関連する処理として

属性とプロパティは、Web開発において混同されやすい概念です。値に関しては、その特殊性からさらに混同されやすいです。この記事では、それらを整理して説明しようとします。

属性とプロパティの概念

簡単に言うと、属性は要素タグの属性であり、プロパティは要素オブジェクトの属性です。次に例を示します。

<input id="入力" value="テスト値">
<スクリプト>
入力を document.getElementById('input') にします。
console.log(input.getAttribute('value')); // テスト値
console.log(input.value); // テスト値
</スクリプト>

入力の値属性はタグ内の value="test value" で定義され、input.getAttribute('value') で取得し、input.setAttribute('value', 'New Value') で更新できます。
input の value プロパティは、input.value を通じて取得および更新できます。初期値は、属性に割り当てられた値と一致します。

属性とプロパティのバインディング

最初に属性値を更新すると、プロパティ値も変更されます。

ただし、プロパティ値を更新した場合 (テキストボックスに入力するか、input.value に新しい値を割り当てた場合)、属性の値は変更されません。さらに、このアニメーションに示すように、属性の値を再度更新しても、プロパティの値は変更されません。このページにアクセスして操作を試すこともできます。

これは、実際にはダーティ値フラグが機能している状態です。ダーティ値フラグの初期値は false です。つまり、属性値を更新すると、対応するプロパティ値がデフォルトで変更されます。ただし、ユーザーがプロパティ値を操作すると、ダーティ値フラグの値は true になり、属性値を更新しても対応するプロパティ値は変更されません。

したがって、実際のプロジェクトでは、通常、プロパティの価値を扱います。

Vue.js の値の処理

一般的に使用される値:

Vue.jsのv-bindは通常、属性を処理します。プロパティとして処理したい場合は、.propを追加する必要があります。

ただし、v-bind:value は通常、プロパティ値が強制的に変換されるため、デフォルトで処理されます。例:

<input id="入力" :value="'テスト値'" >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<スクリプト>
入力 = new Vue({
  el: '#入力',
  マウントされた（）{
    console.log(this.$el.getAttribute('value')); // null
    console.log(this.$el.value); // テスト値
    console.log(this._vnode.data) // {attrs: {id: "input"}, domProps: {value: "テスト値"}}
  }
});
</スクリプト>

Vue.js は、attrs の属性ではなく、VNode のデータ内の domProps の属性として value を使用しているため、マウント後はプロパティの値になることがわかります。

Vue.js のソースコードでは、強制変換プロパティは次のように処理されます。

// src/compiler/parser/index.js
関数 processAttrs(el) {
...
        if ((修飾子 && modifiers.prop) || (
          !el.component && platformMustUseProp(el.tag, el.attrsMap.type, name)
        )) {
          addProp(el, 名前, 値, リスト[i], isDynamic)
        } それ以外 {
          addAttr(el, 名前, 値, リスト[i], isDynamic)
        }

Web プラットフォームにおける platformMustUseProp の定義は次のとおりです。

// src/platforms/web/util/attrs.js
const acceptValue = makeMap('入力,テキストエリア,オプション,選択,進行状況')
エクスポート const mustUseProp = (タグ: 文字列、型: ?文字列、属性: 文字列): boolean => {
  戻る （
    (attr === 'value' && acceptValue(tag)) && type !== 'button' ||
    (属性 === '選択' && タグ === 'オプション') ||
    (属性 === 'チェック済み' && タグ === '入力') ||
    (属性 === 'ミュート' && タグ === 'ビデオ')
  ）
}

上記のように、ボタンではない input、textarea、option、select、progress の値は強制的にプロパティになり、value.prop に設定する必要はありません。

たとえば、textareaタグ自体はvalue属性をサポートしていないため、次のコードの値は複数行テキストボックスには表示されません。

<textarea value="テスト値"></textarea>

しかし、Vue.js では、次のコードを value プロパティに正常にバインドし、複数行のテキストボックス内に表示できます。

<textarea :value="'テスト値'"></textarea>

特殊なケースの使用: value.prop

上記のVue.jsソースコードについて注意すべきもう1つの点は、プロパティとして強制される場合は、!el.componentも満たす必要があるということです。つまり、動的コンポーネントではないということです。動的コンポーネントのel.componentの値は、そのis属性の値であるためです。

つまり、動的コンポーネントの v-bind はデフォルトで属性として使用されます。プロパティとして使用したい場合は、次のように .prop を使用する必要があります。

<div id="アプリ">
  <component :is="要素" :value.prop="'テスト値'"></component>
  <button @click="change">変更</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<スクリプト>
アプリを新しいVue({
  el: '#app',
  データ： {
    要素: '入力'
  },
  メソッド: {
    変化 （） {
      this.element = 'input' === this.element ? 'textarea' : 'input';
    }
  }
});
</スクリプト>

上記コンポーネントの :value.prop の .prop を削除して textarea に切り替えると、その値は複数行テキストボックスに表示されなくなります。このページのスイッチラベルをクリックすると表示できます。

要約する

ユーザーが操作して値を更新すると、属性とプロパティ値間のバインディング関係は無効になります。
Vue.jsは一般的に、値をプロパティにするためにvalueを使用します。
Vue.jsの動的テンプレートでは、value.propを使用して値をプロパティにする必要があります。

Vue における属性とプロパティの具体的な使い方と違いについての記事はこれで終わりです。Vue の属性プロパティに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: