ホームページ > 記事 > ウェブフロントエンド > Vue のテンプレート構文の詳細な分析: 補間とディレクティブ
Vue のテンプレート構文の詳細な分析: 補間とディレクティブ
- 青灯夜游転載
- 2021-11-17 19:42:422188ブラウズ
この記事では、Vue のテンプレート構文を説明し、補間構文と命令構文を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
Vue には、特に使いやすいテンプレート構文がたくさんあります。Vue で定義されたテンプレート構文を HTML で記述すると、データやバインディング メソッドなどをすばやく表示できます。これが、Vue がすぐに使い始められる理由の 1 つです。
1. テンプレートの理解
まずテンプレートとは何なのかを理解しましょう。
テンプレートは ダイナミック HTML ページ で、いくつかの js 構文コードが含まれています
Vue のテンプレート構文は 2 つのタイプに分かれています。
- [補間構文] 二重中括弧式 (「Mustache」構文) [1 つ]
- [命令構文] 命令 (v- 属性で始まるカスタム ラベル) [多数] ]
1. 補間構文:
- 機能: タグ本体の内容を解析し、ページにデータを出力するために使用されます
- 記述方法:
{{xxx}}, xxx は js 式であり、データ内のすべての属性を直接読み取ることができ、オブジェクトのメソッドを呼び出すことができます。 内の #js 式: - js ステートメント 2 の代わりに、戻り値を含む js コード。命令構文:
関数: usedタグを解析します (タグ属性、タグ本体のコンテンツ、バインディング イベントなど)
- 例:
- v-bind:href="xxx"### または :href と省略されます。 ="xxx"###、xxx も js 式を記述する必要があり、データ内のすべての属性を直接読み取ることができます
-
注: Vue には多くの命令があり、その形式は次のとおりです。 ???[関連する推奨事項: 「 - vue.js チュートリアル
」] 一般的に使用される手順をいくつか紹介します。
2. コマンド構文: データ バインディングを強制する v-bind:
関数: 変更された属性値を指定する
v-bind:xxx='yyy' // yyy会作为表达式解析执行
簡潔な書き方:xxx='yyy'一方向データバインディング
構文:
v-bind:href ="xxx"または
:href ="xxx"###特徴: データはデータからページにのみ流れることができます## 双方向データ バインディング命令v-model- 構文: v-mode:value="xxx"### または # と省略されます。 ##v -model="xxx"
-
3 . 命令構文: イベント リスナーのバインド
関数: 指定されたイベント名のコールバック関数をバインドしますv-on: -
完全な書き方
v-on:click='xxx' v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'
簡潔な書き方##
@click='xxx' @keyup='xxx' @keyup.enter='xxx'4. v-text と v-html
機能: テキスト コンテンツを、それが配置されているノードにレンダリングします。 と補間構文の違い:
v-text
はノード内のコンテンツを置き換えますが、{{xx}} は置き換えません。
v-html
- 1. 機能: HTML 構造を含むコンテンツを指定されたノードにレンダリングします。
v-html2. 補間構文との違い:(1). は、ノード内のすべてのコンテンツ
はできません。 (2).
はhtml構造を識別できます。
3. 重大な注意:- v-html
- にはセキュリティ上の問題があります。 ！ ！ ！
(1). Web サイト上で任意の HTML を動的にレンダリングすることは非常に危険であり、簡単に XSS 攻撃につながる可能性があります。(2). - v-html
は常に信頼できるコンテンツに対して使用し、ユーザーが送信したコンテンツには決して使用しないでください。#<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 -if
v-else
書き込み: 
v-else-if="expression"
- ##v-else="expression"
適用対象: [頻度の低いシナリオ] を切り替えます。 機能: 表示されていない DOM 要素は直接削除されます。 注: v-if は、v-else-if および v-else と一緒に使用できますが、構造が「中断」されてはなりません。
- スタイルの非表示を追加 (表示: なし)
- v-show
- v-show= 「式」
は、スイッチング周波数が高いシナリオに適しています。 特徴: 表示されていないDOM要素は削除されているのではなく、スタイルを使って非表示にしているだけです。[備考] v-ifを使用すると要素が取得できない場合がありますが、v-を使用すると必ず取得できます。見せる。
比较v-if与v-show
v-if是控制元素是否加载到页面上（有性能开销） v-show是控制元素的显示与隐藏 （初始创建时加载一次）
- 如果需要频繁切换 v-show 较好
- 当条件不成立时, v-if 的所有子节点不会解析
<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>
6. 总结
一些常用的指令
-
v-text: 更新元素的 textContent -
v-html: 更新元素的 innerHTML -
v-if: 如果为true, 当前标签才会输出到页面 -
v-else: 如果为false, 当前标签才会输出到页面 -
v-show: 通过控制display样式来控制显示/隐藏 -
v-for: 遍历数组/对象 -
v-on: 绑定事件监听, 一般简写为@ -
v-bind: 强制绑定解析表达式, 可以省略v-bind -
v-model: 双向数据绑定 -
ref: 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象 -
v-cloak: 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
更多编程相关知识，请访问：编程入门！！
以上がVue のテンプレート構文の詳細な分析: 補間とディレクティブの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。