1. テンプレートの理解

または

v-text

1. 大括号表达式

2. 指令一：强制数据绑定

3. 指令二：绑定事件监听

比较v-if与v-show

6. 总结

ホームページ

ウェブフロントエンド

Vue.js

Vue のテンプレート構文の詳細な分析: 補間とディレクティブ

青灯夜游

Nov 17, 2021 pm 07:42 PM

vue

この記事では、Vue のテンプレート構文を説明し、補間構文と命令構文を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Vue のテンプレート構文の詳細な分析: 補間とディレクティブ

Vue には、特に使いやすいテンプレート構文がたくさんあります。Vue で定義されたテンプレート構文を HTML で記述すると、データやバインディングメソッドなどをすばやく表示できます。これが、Vue がすぐに使い始められる理由の 1 つです。

1. テンプレートの理解

まずテンプレートとは何なのかを理解しましょう。

テンプレートは ダイナミック HTML ページ で、いくつかの js 構文コードが含まれています

Vue のテンプレート構文は 2 つのタイプに分かれています。

[補間構文] 二重中括弧式 (「Mustache」構文) [1 つ]
[命令構文] 命令 (v- 属性で始まるカスタムラベル) [多数] ]

1. 補間構文:

機能: タグ本体の内容を解析し、ページにデータを出力するために使用されます
記述方法: {{xxx}}, xxx は js 式であり、データ内のすべての属性を直接読み取ることができ、オブジェクトのメソッドを呼び出すことができます。
js ステートメント 2 の代わりに、戻り値を含む js コード。命令構文:

関数: usedタグを解析します (タグ属性、タグ本体のコンテンツ、バインディングイベントなど)

v-bind:href="xxx"### または
注: Vue には多くの命令があり、その形式は次のとおりです。 ???
vue.js チュートリアル」]

2. コマンド構文: データバインディングを強制する v-bind:

関数: 変更された属性値を指定する

完了書き方

v-bind:xxx=&#39;yyy&#39;  // yyy会作为表达式解析执行

ログイン後にコピー

簡潔な書き方
:xxx=&#39;yyy&#39;
ログイン後にコピー
一方向データバインディング

構文:

v-bind:href ="xxx"

または

:href ="xxx"#

##特徴: データはデータからページにのみ流れることができます ## 双方向データバインディング命令 v-model
構文:

特徴: データはデータからページに流れるだけでなく、ページからデータに流れることもできます

3 . 命令構文: イベントリスナーのバインドv-on:
関数: 指定されたイベント名のコールバック関数をバインドします

完全な書き方

v-on:click=&#39;xxx&#39;
v-on:keyup=&#39;xxx(参数)&#39;
v-on:keyup.enter=&#39;xxx&#39;

ログイン後にコピー

@click=&#39;xxx&#39;
@keyup=&#39;xxx&#39;
@keyup.enter=&#39;xxx&#39;

ログイン後にコピー

4. v-text と v-html

v-text

機能: テキストコンテンツを、それが配置されているノードにレンダリングします。

と補間構文の違い:

v-text

はノード内のコンテンツを置き換えますが、

{{xx}} は置き換えません。

v-html
1. 機能: HTML 構造を含むコンテンツを指定されたノードにレンダリングします。
2. 補間構文との違い: (1).
v-html

はできません。 (2).

v-html

はhtml構造を識別できます。

3. 重大な注意:

にはセキュリティ上の問題があります。！！！ (1). Web サイト上で任意の HTML を動的にレンダリングすることは非常に危険であり、簡単に XSS 攻撃につながる可能性があります。

v-html

 は常に信頼できるコンテンツに対して使用し、ユーザーが送信したコンテンツには決して使用しないでください。

<body>
    <div id=&#39;app&#39;>

        <h2 id="nbsp-大括号表达式">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 id="nbsp-指令一-nbsp-强制数据绑定">2. 指令一： 强制数据绑定</h2>
        <img src="/static/imghw/default1.png"  data-src="imgUrl"  class="lazy"   alt="Vue">  <!--无法显示图片，没有识别成js表达式 -->
        <img src="/static/imghw/default1.png"  data-src="imgUrl"  class="lazy"  v-bind: alt="Vue"> <!--属性值识别成js表达式 -->
        <img src="/static/imghw/default1.png"  data-src="imgUrl"  class="lazy"  : alt="Vue">


        <h2 id="nbsp-指令二-nbsp-绑定事件监听">3. 指令二： 绑定事件监听</h2>
        <button v-on:click="test1">test1</button>
        <button @click="test1">test1</button>
        
        <button @click="test2(&#39;abc&#39;)">test2</button> <!--可以传参数 -->
        <button @click="test2(msg)">test2</button>
    </div>



    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: &#39;#app&#39;,
            data: {
                msg: &#39;<a href="http:www.baidu.com">I Will Back!</a>&#39;,
                imgUrl: "https://cn.vuejs.org/images/logo.png"
            },
            methods: {
                test1() {
                    alert(&#39;heheh&#39;);
                },
                test2(content){
                    alert(content);
                }
            }

        })
    </script>
</body>

ログイン後にコピー

#5. 条件付きレンダリングの手順

タグの削除 delete

v -if v-else

書き込み: Vue のテンプレート構文の詳細な分析: 補間とディレクティブ

v-if="式"

v-else-if="expression"

適用対象: [頻度の低いシナリオ] を切り替えます。機能: 表示されていない DOM 要素は直接削除されます。注: v-if は、v-else-if および v-else と一緒に使用できますが、構造が「中断」されてはなりません。

スタイルの非表示を追加 (表示: なし)
v-show
v-show= 「式」は、スイッチング周波数が高いシナリオに適しています。特徴: 表示されていないDOM要素は削除されているのではなく、スタイルを使って非表示にしているだけです。

比较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: &#39;#demo&#39;,
            data: {
                ok: false,
            }
        })
    </script>
</body>

ログイン後にコピー

Vue のテンプレート構文の詳細な分析: 補間とディレクティブ

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7439

CakePHP チュートリアル

1369

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

Related knowledge

vue.jsでJSファイルを参照する方法 Apr 07, 2025 pm 11:27 PM

vue.jsでJSファイルを参照するには3つの方法があります。タグ;; mounted（）ライフサイクルフックを使用した動的インポート。 Vuex State Management Libraryを介してインポートします。

Vueはマーキー/テキストスクロール効果を実現します Apr 07, 2025 pm 10:51 PM

CSSアニメーションまたはサードパーティライブラリを使用して、VUEでマーキー/テキストスクロール効果を実装します。この記事では、CSSアニメーションの使用方法を紹介します。スクロールテキストを作成し、テキストを＆lt; div＆gt;をラップします。 CSSアニメーションを定義し、オーバーフローを設定します：非表示、幅、アニメーション。キーフレームを定義し、アニメーションの開始と終了時にtranslatex（）を設定します。期間、スクロール速度、方向などのアニメーションプロパティを調整します。

怠zyなロードVUEとはどういう意味ですか？ Apr 07, 2025 pm 11:54 PM

Vue.jsでは、Lazy Loadingを使用すると、コンポーネントまたはリソースを必要に応じて動的にロードすることができ、初期ページの読み込み時間を短縮し、パフォーマンスを改善できます。特定の実装方法には、＆lt; Keep-Alive＆gt;および＆lt;コンポーネントは＆gt;コンポーネント。怠zyなロードは、FOUC（スプラッシュ画面）の問題を引き起こす可能性があり、不必要なパフォーマンスのオーバーヘッドを避けるために怠zyなロードが必要なコンポーネントにのみ使用する必要があることに注意してください。

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

VueでWatchの使用方法 Apr 07, 2025 pm 11:36 PM

Vue.jsの監視オプションにより、開発者は特定のデータの変更をリッスンできます。データが変更されたら、Watchはコールバック関数をトリガーして更新ビューまたはその他のタスクを実行します。その構成オプションには、すぐにコールバックを実行するかどうかを指定する即時と、オブジェクトまたは配列の変更を再帰的に聴くかどうかを指定するDEEPが含まれます。

Vueコンポーネントの合格値はどういう意味ですか？ Apr 07, 2025 pm 11:51 PM

Vueコンポーネントの合格値は、コンポーネント間でデータと情報を渡すメカニズムです。プロパティ（小道具）またはイベントを介して実装できます：プロップ：コンポーネントで受信するデータを宣言し、親コンポーネントにデータを渡します。イベント：$ EMITメソッドを使用して、VONディレクティブを使用してイベントをトリガーし、親コンポーネントでイベントを聞きます。

Vueのバージョンを照会する方法 Apr 07, 2025 pm 11:24 PM

Vue Devtoolsを使用してブラウザのコンソールでVueタブを表示することにより、Vueバージョンを照会できます。 NPMを使用して、「NPM List -G Vue」コマンドを実行します。 package.jsonファイルの「依存関係」オブジェクトでVueアイテムを見つけます。 Vue CLIプロジェクトの場合、「Vue -Version」コマンドを実行します。＆lt; script＆gt;でバージョン情報を確認してくださいVueファイルを参照するHTMLファイルにタグを付けます。

Vue Paginationの使用方法 Apr 08, 2025 am 06:45 AM

ページネーションは、パフォーマンスとユーザーエクスペリエンスを向上させるために、大きなデータセットを小さなページに分割するテクノロジーです。 VUEでは、次の組み込みメソッドを使用してページを使用できます。ページの総数を計算します。TotalPages（）トラバーサルページ番号：V-For Directive on Currentページを設定します。

See all articles

Vue のテンプレート構文の詳細な分析: 補間とディレクティブ

1. テンプレートの理解

完了書き方

または

v-text

v-text

比较v-if与v-show

6. 总结

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック