ホームページ > 記事 > ウェブフロントエンド > Vue 2.0 の内部ディレクティブとは何ですか
Vue 2.0 の内部ディレクティブとは何ですか
- 一个新手オリジナル
- 2017-10-16 09:49:101429ブラウズ
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 に似ています。
例は次のとおりです。<body>
<div id="app">
<p v-if="flag">if</p>
<p v-else>else</p>
<p v-show="flag">show</p>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
flag:true
}
});
</script> DOM 構造では、3 つの p タグ内のコンテンツがページに表示されるかどうかは、flag の boolean 属性によって決まります。 flag が true の場合、if と show の両方が表示されますが、else は DOM 構造内に存在しません。 v-if と v-show の違いは次のとおりです。 v-if は条件の値に基づいてロードするかどうかを決定します。これにより、サーバーへの負荷が軽減されますが、条件の値が変更されると、条件の値が true であるかどうかに関係なく、v-show を再度ロードする必要があるという欠点があります。条件が true の場合、表示属性はデフォルトの属性に設定され、それ以外の場合は none に設定されます)
2-2.v-for ループ コマンド
例は次のとおりです:<body>
<div id="app">
<ol>
<li v-for="b in b">{{b}}</li>
</ol>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
b:['a','b','c',1,2]
}
});
</script> ページには 5 li が表示されます。補間の効果は、li が配列 b に対応する要素を 1 対 1 で表示することです。
2-3 v -text v-html text (html 文字列) コマンド
<body>
<div id="app">
<p v-text="msgText"></p>
<p v-html="msgHtml"></p>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
data:{
msgText:"China",
msgHtml:"<span>中国</span>"
}
});
</script> は、jquery の text() と html() に関連付けることができます。これまでのコマンドでは補間演算、つまり {{}} が使用されていることがわかります。
2-4 v-on イベント リスナーのバインディング
例は次のとおりです:<body>
<div id="app">
<button v-on:click="Hi()">Button</button>
</div>
</body>
<script>
var vm= new Vue({
el:"#app",
methods:{
Hi:function(){
alert("Hello World!")
}
}
});
</script> jquery の on() メソッドと同様に、特定のイベントに対してバインディングします。この例では、-on:click は @click と省略できます。Click は、mouseout、mouseover などの他のマウス操作に置き換えることができます。
2-5 v-bind コマンドの例は次のとおりです。
<body>
<div id="app">
<a v-bind:style="{color:'red'}" :src="message">{{message}}</a>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>その効果は、a タグが赤色で表示され、その src 属性が vm.message であることです。 v-bind ディレクティブは、主に html タグの属性を設定するために使用されます。その略称は v-bind:——> です。 ;: 2-6 v-model データの双方向バインディング命令
例は次のとおりです:
<body>
<div id="app">
<p>{{message}}</p>
<p v-pre>{{message}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script>input の値が変化すると、p タグに含まれる内容も変化し、前者と一致します。 2-7 v-pre 命令
例は次のとおりです:<body>
<div id="app">
<p>{{message}}</p>
<p v-pre>{{message}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师"
}
});
</script> 最初の p タグは「フロントエンド エンジニア」を出力し、2 番目の p タグは vue のコンパイルと出力をスキップします。元の値、つまり {{message}}
2-8 v-cloak コマンド
v-cloak コマンドの機能は、DOM ツリーが構築され、ページがレンダリングされた後に実行することです。 CSS と一緒に使用する必要があります2-9 v-once コマンド
v-once コマンドは、DOM ツリーが初めてレンダリングされるときにのみ機能します。
以上がVue 2.0 の内部ディレクティブとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。