Vue 2.0 の内部ディレクティブ-jsチュートリアル-php.cn

Vue 2.0 の内部ディレクティブ

php中世界最好的语言

リリース： 2018-04-17 14:39:56

オリジナル

1463 人が閲覧しました

今回は Vue 2.0 の内部命令について説明します。Vue 2.0 の内部命令を使用する際の注意事項は何ですか? 実際のケースを見てみましょう。

1.Vue.jsの紹介

現在、主流のフロントエンドフレームワークには、Angular、React、Vue の 3 つがあります。少し前の React のライセンス論争により、Vue の人気が高まっています。さらに、Vue のわかりやすい API ドキュメントも大きな特徴です。 Vue.js は非常に軽量なツールで、MVVM フレームワークというよりも js ライブラリに似ています。 Vue.js は、応答性の高いプログラミングとコンポーネント化を特徴としています。リアクティブプログラミングとは、状態とビューの同期を保つことを意味し、状態はデータとも言えます。そのコンポーネント化の概念は React と同じです。つまり、「すべてのものはコンポーネントであり、コンポーネント化の考え方は開発に便利です」モジュラーの、フロントエンド分野

における大きなトレンドです。 2. 内部指示

2-1.v-if v-else v-show: 最初の 2 つは通常一緒に使用され、v-show の効果は v-if と似ています。

例は次のとおりです。 DOM 構造では、3 つの p タグ内のコンテンツがページに表示されるかどうかは、フラグの Boolean 属性によって決まります。 flag が true の場合、if と show の両方が表示され、else は DOM 構造に存在しません。 v-if と v-show の違いは次の点に反映されます。 v-if は条件の値に基づいてロードするかどうかを決定するため、サーバーへの負荷を軽減できますが、欠点は、条件の値が変更された場合、ページを再度ロードする必要があります。v-show は関係ありません。条件の値が true であるかどうかは、ロードされます (条件が true の場合、

display

属性はデフォルトの属性に設定されます。それ以外の場合は、なしに設定されています)

2-2.v-for ループコマンド

例は次のとおりです。ページには 5 li が表示されます。補間の効果は、li が

array

b に 1 対 1 で対応する要素を表示することです。v-for はループ内の for と多少似ています

。 2-3 v-text v-html テキスト (htmlstring

) コマンド

<body>
  <p id="app">
    <p v-if="flag">if</p>
    <p v-else>else</p>
    <p v-show="flag">show</p>
  </p>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    data:{
      flag:true
    }
  });
</script>

ログイン後にコピー

jquery の text() と html() を考えることができます。ここまでで、以前の補間演算、つまり {{}} が使用されていることがわかります。このアプローチはパフォーマンスにある程度影響します。

2-4 v-on バインディングイベントリスナー

例は次のとおりです。同様に、イベントをバインドするために使用される jquery の on() メソッドと同様に、例の v-on:click は @click と省略できます。クリックは、マウスアウト、マウスオーバーなどの他のマウス操作に置き換えることができます。

2-5 v-bindコマンド

例は次のとおりです。その結果、ラベルが赤で表示され、その src 属性が vm.message になります。 v-bind コマンドは主に

html タグ

の属性を設定するために使用されます。その略称は v-bind:——>: です。

2-6 v-model データ双方向バインディングコマンド

例は次のとおりです。入力値が変更されると、p タグに含まれる内容も変更され、前者との一貫性が維持されます。

2-7 v-pre コマンド

例は次のとおりです。最初の p タグは「フロントエンドエンジニア」を出力しますが、2 番目の p タグは vue のコンパイルをスキップして、元の値、つまり {{message}} を出力します。