コマンド属性の基本的な使用法
1. v-cloakは、主に補間式のフリッカー問題を解決するためのものです。
4.補間式とv-text / v-htmlの違い
要素内の既存の値については、補間式のみが元の値を保持し、元の既存の値に基づいて動的データを追加できます。
v-textとv-htmIが要素タグペアの元のコンテンツを保持できない理由は、上記の2つの指定された属性を使用する前に、タグペアのコンテンツが事前にクリアされ、動的な値が割り当てられるためです。将来の実際のプロジェクト開発で元のコンテンツに基づいて動的な値を追加する必要がある場合は、補間式を使用することを選択する必要があります。
別の見方をすれば、補間式はページフリッカーとして表示されますが（v-textとvhtmはページフリッカーとして表示されません）、元のコンテンツを保持するために、補間式のみを完了できるため、補間式はこの式にはかけがえのない利点があります。
v-textとv-htmlを比較する
v-text：主に純粋なコンテンツを提供するために使用されます。要素自体に提供されたコンテンツにhtmlが含まれている場合、v-textはページにhtmをそのまま表示し、これらのコンテンツをブラウザーで解析することはできません。
v-html：フロントエンド要素にコンテンツを割り当てることができることに加えて、さらに重要なことに、コンテンツ自体にhtmコードが含まれている場合、割り当て後に表示される最終結果はブラウザーによって解析されます。
5. v-bindは、属性をバインドするための指示を提供します
短い形式：v-bindを削除する使用のみ：
<body>
<div id="app">
<input type="text" v-bind:value="str1">
<p v-bind:title="str2">content...</p>
<input type="button" value="submit" :title="str3">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
"str1":"aaaaaa",
"str2":"bbbbbb",
"str3":"ccccccc"
}
})
</script>
</body>2-4v-onイベントバインディングを使用する
簡素化する @
<body>
<div id="app">
<input type="text" :value="str1">
<input type="button" value="点击" v-on:click="fun1"/>
<input type="button" value="点击2" @click="fun1"/>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
"str1":"aaaaaa"
},
//methods可以定义多个 函数，多个函数之间可以逗号分隔
methods:{
fun1(){
alert("abc");
}
}
})
</script>イベント修飾子の使用
a.stop
.stopを使用して、イベントのバブリングメカニズムを停止します
jsでのイベントのバブリングは、内側の要素がトリガーされている間、外側の要素がトリガーされ続けることを意味します（外側の要素は内側の要素に利益をもたらします）。クリックの過程で、内側の要素がクリックされます。レイヤー要素は、同時に外側の要素をクリックしたと見なすこともできます。したがって、両方のイベントがトリガーされます。
実際のプロジェクト開発では、このイベントバブリングメカニズムを使用する必要性はあまりないため、イベントバブリングを防止する必要があります。イベントバブリングを防止する効果は、内部要素をクリックした後、内部要素にバインドされたイベントがトリガーされることです。イベントバブリングが防止されるため、外部要素のイベントは引き続きトリガーされません。
<body>
<div id="app">
<div style="width: 200px;height: 200px;background-color: red;"@click="fun1">
<div style="width: 100px;height: 100px;background-color: blue;"@click.stop="fun2">
</div>
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
"str1":"aaaaaa"
},
methods:{
fun1(){
alert("触发外层div");
},
fun2(){
alert("触发内层div");
}
}
})
</script>
</body>b。 リンクを防止し、hrefを禁止するデフォルトの動作を防止します
<body>
<div id="app">
<a href="http://www.baidu.com" @click="fun1">点击</a>
<a href="http://www.baidu.com" @click.prevent="fun2">点击</a>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
"str1":"aaaaaa"
},
methods:{
fun1(){
alert("触发外层div");
},
fun2(){
alert("触发内层div");
}
}
})
</script>
</body>c。キャプチャ
.captureを使用して、トリガーイベントをキャプチャするメカニズムを実現します
.capture修飾子を追加した後、外側のdⅳイベントが最初にトリガーされ、内側のdivイベントが後でトリガーされます。.captureによって変更された後、イベントが最初にトリガーされます。
d.self
自己は、イベントのバブリング動作を防ぐメカニズムを実装します（前に停止について話しました）
自己バブリングを防止する動作を実現するための自己の使用（実際にはバブリングを防止しません）
e.once
once修飾子を使用して、イベントハンドラーを1回だけトリガーします
.onceは.preventと組み合わせる必要があります
<div id="app">
<a href="http://www.baidu.com" @click="fun1">点击</a>
//阻止跳转
<a href="http://www.baidu.com" @click.prevent="fun1">点击2</a>
//第一次点阻止跳转，触发点击事件，第二次点直接跳转
<a href="http://www.baidu.com" @click.prevent.once="fun1">点击3</a>
</div>v-modelを使用して、双方向のデータバインディングを実現します
v-bindは、mからvまでの一方向のバインディングしか実現できません。
vモデルの基本的な使用法
双方向のデータバインディング。mはvvに影響を与えるだけでなく、mを変更することもできます。
vモードを使用して、データを2方向にバインドします。ページ要素の値を記録するための要件はすべてフォーム要素で発生するため、vモードはフォーム要素でのみ使用できることに注意してください。形
<入力>系列タイプ：テキスト; 非表示、チェックボックス、ラジオ。
<textarea> <select>
（1）クラススタイルの使用
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>好</title>
<style>
.style1{
background-color: brown;
}
.style2{
font-style:italic;
}
.style3{
font-size:30px;
}
</style>
</head>
<body>
<div id="app">
<span :class="['style1','style2',flag?'style3':'']">helloword</span>
<span :class="['style1','style2',{'style3':flag}]">helloword</span>
<span :class="{style1:true}">helloword</span>
<span :class="mystyle">helloword</span>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
"str1":"aaaaaa",
flag:false,
mystyle:{style1:false,stylr2:true}
},
methods:{
}
})
</script>
</body>
</html>ケース1：クラススタイル配列を渡し、v-bindを介してスタイルをバインドします。このフォームは前のフォームと大差ありません。
：class = "[スタイル1、スタイル2]"
ケース2：上記の配列ブールを操作しますか？三元（メタ）演算子を使用してtrueを実行し、false実行を実行します
ケース3：オブジェクト（json）を使用して、上記の3値（メタ）演算子（スタイルフラグ）の操作を表現します
ケース4：オブジェクトによる参照スタイル
：class = {};
案例5：mystyle：{style1：false、stylr2：true}
（2）スタイルスタイルサプリメント
実際のプロジェクト開発では、styeスタイルの使用はクラスで広く使用されていません。通常、style属性は、指定された個々の要素のスタイルをさらに補足的に使用するだけです。
ケース1：参照スタイルオブジェクト
：style = "参照スタイルオブジェクト"
注：色などのスタイル属性を作成する場合、単語のみであるため、引用符を追加する必要はありません。開発中のほとんどのスタイルには、横棒（-）が含まれています（例：font-style、background-color）。このようなプレゼンテーション属性を-とともに使用する場合は、引用符で囲む必要があります。
ケース2：スタイルオブジェクトの配列を参照する
：style = "[スタイルオブジェクト1、スタイルオブジェクト2]"