この記事では、Vue のテンプレート構文を説明し、補間構文と命令構文を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
Vue には、特に使いやすいテンプレート構文がたくさんあります。Vue で定義されたテンプレート構文を HTML で記述すると、データやバインディング メソッドなどをすばやく表示できます。これが、Vue がすぐに使い始められる理由の 1 つです。
まずテンプレートとは何なのかを理解しましょう。
テンプレートは ダイナミック HTML ページ で、いくつかの js 構文コードが含まれています
Vue のテンプレート構文は 2 つのタイプに分かれています。
1. 補間構文:
{{xxx}}, xxx は js 式であり、データ内のすべての属性を直接読み取ることができ、オブジェクトのメソッドを呼び出すことができます。 関数: usedタグを解析します (タグ属性、タグ本体のコンテンツ、バインディング イベントなど)
注: Vue には多くの命令があり、その形式は次のとおりです。 ???」]
2. コマンド構文: データ バインディングを強制する v-bind:
関数: 変更された属性値を指定するv-bind:xxx='yyy' // yyy会作为表达式解析执行
簡潔な書き方一方向データバインディング:xxx='yyy'ログイン後にコピー
構文:
v-bind:href ="xxx"##特徴: データはデータからページにのみ流れることができます ## 双方向データ バインディング命令 v-model
3 . 命令構文: イベント リスナーのバインドv-on:
完全な書き方
v-on:click='xxx' v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'
@click='xxx' @keyup='xxx' @keyup.enter='xxx'
機能: テキスト コンテンツを、それが配置されているノードにレンダリングします。 と補間構文の違い:
{{xx}} は置き換えません。
v-html
2. 補間構文との違い: (1).
はできません。 (2).
はhtml構造を識別できます。
3. 重大な注意:(1). Web サイト上で任意の HTML を動的にレンダリングすることは非常に危険であり、簡単に XSS 攻撃につながる可能性があります。 は常に信頼できるコンテンツに対して使用し、ユーザーが送信したコンテンツには決して使用しないでください。 #<body>
<div id='app'>
<h2>1. 大括号表达式</h2>
<p>{{msg}}</p> <!--textContent -->
<p>{{msg.toUpperCase()}}</p>
<p v-html="msg"></p> <!--innerHTML -->
<p v-text="msg"></p> <!--textContent -->
<p v-text="msg.toUpperCase()"></p>
<h2>2. 指令一： 强制数据绑定</h2>
<img src="imgUrl" alt="Vue"> <!--无法显示图片，没有识别成js表达式 -->
<img v-bind:src="imgUrl" alt="Vue"> <!--属性值识别成js表达式 -->
<img :src="imgUrl" alt="Vue">
<h2>3. 指令二： 绑定事件监听</h2>
<button v-on:click="test1">test1</button>
<button @click="test1">test1</button>
<button @click="test2('abc')">test2</button> <!--可以传参数 -->
<button @click="test2(msg)">test2</button>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '<a href="http:www.baidu.com">I Will Back!</a>',
imgUrl: "https://cn.vuejs.org/images/logo.png"
},
methods: {
test1() {
alert('heheh');
},
test2(content){
alert(content);
}
}
})
</script>
</body>#5. 条件付きレンダリングの手順
書き込み: 
v-else-if="expression"
適用対象: [頻度の低いシナリオ] を切り替えます。 機能: 表示されていない DOM 要素は直接削除されます。 注: v-if は、v-else-if および v-else と一緒に使用できますが、構造が「中断」されてはなりません。
は、スイッチング周波数が高いシナリオに適しています。
特徴: 表示されていないDOM要素は削除されているのではなく、スタイルを使って非表示にしているだけです。v-if是控制元素是否加载到页面上（有性能开销） v-show是控制元素的显示与隐藏 （初始创建时加载一次）
<body>
<div id="demo">
<p v-if="ok">成功了</p> <!-- 移除标签删除 -->
<p v-else>失败了</p>
<p v-show="ok">又成功了</p> <!-- 添加样式隐藏 -->
<p v-show="!ok">又失败了</p>
<button @click="ok = !ok">切换</button>
</div>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#demo',
data: {
ok: false,
}
})
</script>
</body>
一些常用的指令
v-text : 更新元素的 textContentv-html : 更新元素的 innerHTMLv-if : 如果为true, 当前标签才会输出到页面v-else: 如果为false, 当前标签才会输出到页面v-show : 通过控制display样式来控制显示/隐藏v-for : 遍历数组/对象v-on : 绑定事件监听, 一般简写为@v-bind : 强制绑定解析表达式, 可以省略v-bindv-model : 双向数据绑定ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }更多编程相关知识，请访问：编程入门！！
以上がVue のテンプレート構文の詳細な分析: 補間とディレクティブの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
