V-バインド詳細な手順修飾のイベントVUE 2.xのを.prop

文書.prop修飾子のVUE公式な解釈は以下のとおりです。

clipboard.png

使用例:

clipboard.png

だから、特定の原則と使用法は、それは何ですか?これは、HTMLのDOMノードを開始する必要があります。


htmlタグでは、我々は様々な属性を定義することができます。ブラウザでページをレンダリングするためにDOMツリーを解析した後、各タグは、対応するDOMノードを生成します。ノードがオブジェクトである、それはプロパティの数が含まれています、また、プロパティのいずれかを属性。

定義

Property:节点对象在内存中存储的属性,可以访问和设置。
Attribute:节点对象的其中一个属性( property ),值是一个对象,可以通过点访问法 document.getElementById('xx').attributes 或者 document.getElementById('xx').getAttributes('xx') 读取,通过 document.getElementById('xx').setAttribute('xx',value) 新增和修改。 在标签里定义的所有属性包括 HTML 属性和自定义属性都会在 attributes 对象里以键值对的方式存在。 

例:

<input id="input" type="foo" value="11" class="class"></input> 

印刷属性オブジェクト(オブジェクトのNamedNodeMap要素は、ノードの順序なし集合属性表します):

属性


違いのプロパティと属性

1、属性オブジェクトがタグで定義されたすべてのプロパティを含む、属性プロパティのみHTMLの標準が含まれている、それがカスタムプロパティ(:データ-XXXなど)が含まれていません。

図2に示すように、属性値の属性値は、元のHTMLタグである、のsetAttribute()メソッドが変化しない限り、(例:入力タグ)を変更しないであろうユーザの入力に応じ。ページが初期化されるとき、そのノードオブジェクトがアクセスするオブジェクトのプロパティを標準的な方法を得ることができるので、プロパティマップと属性は、標準の属性で作成されたオブジェクト。ユーザ入力の後に対応する特性変化を元の値、プロパティを変更します。つまり、属性を使用して元の値を参照してくださいプロパティを使用して、最新の値を表示します。(バリュー値入力もinput.defaultValueによって元の値を見ることができます)

3、属性とプロパティがまったく同じ、例えば、REF、IDで属性名の一部、いくつかの名前と、そのようなhtmlFor、クラス名で対応するプロパティのうちの属性、クラスの属性マッピングのように、いくつかのわずかな違い、;特定のプロパティ名としてしかし、プロパティの値がまったく同じではない、制限または変更した、関連する属性は、SRC、HREF、無効化、複数などです。

例:

<input src="test.html"></input>

// input.src:
画像のキャプション
// input.attributes.src.value:
画像のキャプション

4、カスタムプロパティプロパティは読んでいないことから、全てではないに等しい属性の属性が得られた非標準の定義された範囲、デフォルトの場所で選択された標準のプロパティ値、内標準の属性値の先頭にラベル。

例:

<input id="input" type="foo"></input> // input.type === 'text' // input.attributes.type === 'foo' 

プロパティと属性それぞれの属性とメソッド

プロパティ:  のhttp://www.w3school.com.cn/js ...
属性:  のhttp://www.w3school.com.cn/js ...


.prop使用修飾子

V-バインドデフォルト属性がプロパティに使用.prop修飾結合した後、DOMノードにバインドされています

注意事項:

  • プロパティ値の最新の使用を取得します。
  • HTMLタグのカスタムプロパティの属性が表示にレンダリング後に設定され、プロパティはしません。

使用修飾子:

カスタム格納された変数と回避の露光データを属性
HTML構造の汚染を防止するために、

例えば:

<input id="input" type="foo" value="11" :data="inputData"></input> // 标签结构: <input id="input" type="foo" value="11" data="inputData 的值"></input> // input.data === undefined // input.attributes.data === this.inputData <input id="input" type="foo" value="11" :data.prop="inputData"></input> // 标签结构: <input id="input" type="foo" value="11"></input> // input.data === this.inputData // input.attributes.data === undefined 
 

おすすめ

転載: www.cnblogs.com/cfsxgogogo/p/12573963.html