Vue.js データの双方向バインディングと共通命令-jsチュートリアル-php.cn

データの双方向バインディング(ES6書き込み方式)

効果:

入力ボックスの値を変更しない場合:

Vue.js データの双方向バインディングと共通命令

入力ボックスの値をクリアする場合:

Vue.js データの双方向バインディングと共通命令

Re -入力ボックスを入力します。入力ボックスの値が変化すると、Douhou ページのスパンで {{testData.name}} にバインドされる値が変化します。Vue.js では、v-model ディレクティブを使用できます。フォーム要素に双方向データを作成します。また、v-model ディレクティブは、、の 3 つのタグにのみ使用できます。

<template>
<div>
 <div class="form-inline mg-top">
  <div class="form-group">
   <label class="control-label">姓名:</label>
   <input type="text" v-model=&#39;testData.name&#39; class="form-control">
   <span class="control-span">姓名变为:{{testData.name}}</span>
  </div>
 </div>
</div>
</template>
 
 
<script>
export default {
 components: {
 },
 ready: function(){
 },
 methods: {
 },
 data() {
 return {
  testData:{
  id:&#39;1&#39;,
  name:&#39;张三&#39;,
  age:&#39;18&#39;
  }
 }
 }
}
</script>

ログイン後にコピー

Vue.js コンポーネントは、事前定義された動作を持つ ViewModel クラスとして理解できます。コンポーネントは多くのオプションを事前定義できますが、主なものは次のとおりです: Vue.js データの双方向バインディングと共通命令

テンプレート (テンプレート): テンプレートは、データと最終的にユーザーに表示される DOM の間のマッピング関係を宣言します。

登録されたコンポーネント: 登録後、親コンポーネントテンプレートのカスタム要素の形式で子コンポーネントを呼び出すことができます。

初期データ (data): コンポーネントの初期データ状態。再利用可能なコンポーネントの場合、これは通常プライベート状態です。

受け入れられる外部パラメータ (小道具): データはパラメータを通じてコンポーネント間で転送および共有されます。パラメータはデフォルトで一方向 (上から下) にバインドされますが、明示的に双方向として宣言することもできます。

メソッド: データの変更操作は通常、コンポーネントのメソッド内で実行されます。ユーザー入力イベントとコンポーネントメソッドは、v-on ディレクティブを通じてバインドできます。

ライフサイクルフック: コンポーネントは、作成、アタッチ、破棄などの複数のライフサイクルフック関数をトリガーします。これらのフック関数では、いくつかのカスタムロジックをカプセル化できます。従来の MVC と比較すると、Controller のロジックがこれらのフック関数に分散されていることがわかります。
プライベートリソース (アセット): Vue.js では、ユーザー定義の命令、フィルター、コンポーネントなどを総称してリソースと呼びます。グローバルに登録されたリソースは名前の競合を引き起こしやすいため、コンポーネントは独自のプライベートリソースを宣言できます。プライベートリソースは、コンポーネントとそのサブコンポーネントによってのみ呼び出すことができます。

一般的に使用される命令:

いわゆる命令は、実際にはテンプレートに表示される特別なタグであり、これらのタグに基づいて、フレームワークはここで DOM 要素に対してどのような操作を実行する必要があるかを認識します。

よく使用されるコマンド:

v-if コマンド

v-show コマンド

v-else コマンド

v-for コマンド

v-bind コマンド

v-on コマンド

v-if コマンド:

v-if は、式の値の true または false 条件に基づいて要素をレンダリングします。要素とそのデータバインディング/コンポーネントは破棄され、スイッチ上で再作成されます。要素が