ホームページ > 記事 > ウェブフロントエンド > Vue 2.0 の内部ディレクティブ
Vue 2.0 の内部ディレクティブ
- php中世界最好的语言オリジナル
- 2018-04-17 14:39:561456ブラウズ
今回は 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 が
arrayb に 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() を考えることができます。ここまでで、以前の補間演算、つまり {{}} が使用されていることがわかります。このアプローチはパフォーマンスにある程度影響します。
例は次のとおりです。 同様に、イベントをバインドするために使用される 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}} を出力します。
2-8 V-マントの説明
v-cloak命令の機能は、DOMツリーが構築され、ページがレンダリングされた後に実行することであり、cssと一緒に使用する必要があります
2-9 v-once コマンドv-once ディレクティブは、DOM ツリーが初めてレンダリングされるときにのみ機能します。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
以上がVue 2.0 の内部ディレクティブの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。