前書き
vueのhtml要素の属性とイベントは、変数による動的な変更をサポートします。これは、元のjsdom操作とは多少異なります。これは、vueのプロパティバインディングとイベントバインディングの方法の概要、およびネイティブjsとの比較です。
プロパティバインディング
属性バインディングとは、html要素の属性値を変数に設定することです。
<input type = "text" />などのネイティブhtmlでは、ここでのtypeの値はtextです。
Vueでは、テキストを変数input_typeに設定できます。
<input：type = "input_type" />と書くことができます。これは、vue属性バインディングです。typeの値は、input_typeの変更に伴って変更されます。
プロパティバインディング構文
プロパティバインディングを作成する方法は2つあります
- ：attr = "var"
- v-bind：attr = "var"
上記の例では、最初の書き込み方法に対応する<input：type = "input_type" />と記述します。これは、<input v-bind：type = "input_type" />と記述することもできます。プロジェクトは通常、最初の略語を使用します。
ネイティブjsを比較する
ネイティブjsを使用してdom要素の属性を操作する場合、通常は最初に入力要素を取得してから、js属性設定メソッドを使用して入力要素を変更します。
イベントバインディング
属性のバインドと同様に、html要素のイベントも<button @ click = "changeType（）"> </ button>などの特定の変数にバインドできます。
ここで、clickメソッドはchangeType関数にバインドされています。このボタンをクリックすると、changeType関数が呼び出されます。
イベントバインディングを作成する方法も2つあります
- @ event = "eventhandler（param ..）"
- v-on：event = "eventhandler（param ..）"
イベントは、クリックなどのイベントを表します。Eventhandlerは、変数（1つ以上）を渡すことができる処理関数を参照します。属性バインディング関数には、関数名だけでなく（）が必要であることに注意してください。
<button id = 'testBtn' @ click = "changeType（）"> </ button>は、最初の書き込み方法に対応します。
<button id = 'testBtn' v-on：click = "changeType（）"> </ button>と書くこともできます。通常、最初のメソッドが使用されます。
ネイティブjsを比較する
ネイティブjsを使用してイベントをバインドする場合は、要素にイベント監視とイベントバインドを設定できます。
#jsEventバインディングメソッド 。ボタンdocument.getElementById（ "testBtn"）。onclick = changeType; #jsEventモニタリングメソッドにバインドできるイベントは1つだけです。複数のイベントをボタン document.getElementById（ "testBtn"）にバインドできます。.addEventListener（ "click"、changeType）;
vueの要素は、カスタムvueコンポーネントms-navなどのネイティブjsイベント監視を使用します。クリックイベントをこのコンポーネントにバインドしたいのですが、通常の状況では有効になりません。
＃ここに.nativeを追加して、ネイティブjsイベントをリッスンしていることを示す必要があります <ms-nav @ click.native = 'handleJsClick'> </ ms-nav>
実例
vue属性バインディングとイベントバインディングのコードスニペット
<input v-bind：type = "input_type" />
<button @ click = "changeType（）"> </ button>
export default {
data（）{
return {
input_type： 'text'
}
}、methods：
{
changeType（ ）{
this.input_type = "radio"
}
}
}
ブロガー：お金を稼ぐためのテスト
モットー：テストと自動化に焦点を当て、元の蓄積を完了するためのテストと勤勉さ、読書と財務管理から経済的自由まで、R＆D効率の向上に努めます。
csdn：https：//blog.csdn.net/ccgshigao
ブログパーク：https：//www.cnblogs.com/qa-freeroad/
51cto：https：//blog.51cto.com/14900374