Heim > Artikel > Web-Frontend > Eine eingehende Analyse der Vorlagensyntax in Vue: Interpolation und Anweisungen

Eine eingehende Analyse der Vorlagensyntax in Vue: Interpolation und Anweisungen

青灯夜游nach vorne: 2021-11-17 19:42:422128Durchsuche

Dieser Artikel führt Sie durch die Vorlagensyntax in Vue und stellt die Interpolationssyntax und die Befehlssyntax vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Vue verfügt über eine große Vorlagensyntax, die besonders einfach zu verwenden ist. Sie können eine von Vue definierte Vorlagensyntax in HTML schreiben, um Daten, Bindungsmethoden usw. schnell anzuzeigen. Dies ist einer der Gründe, warum Vue so schnell einsetzbar ist.

1. Verständnis von Vorlagen

Lassen Sie uns zunächst verstehen, was eine Vorlage ist.

Die Vorlage ist die dynamische HTML-Seite, die etwas js-Syntaxcode enthält

Vues Vorlagensyntax ist in zwei Typen unterteilt, nämlich:

[Interpolationssyntax] Ausdruck in doppelten Klammern („Mustache“-Syntax) [Eins]
[Anweisungssyntax] Anweisungen (benutzerdefinierte Tag-Attribute beginnend mit v-) [Viele]

1. Interpolationssyntax:

Funktion: Wird verwendet, um den Inhalt des Tag-Körpers zu analysieren und auf der Seite auszugeben Daten
Schreiben: {{xxx}}, xxx ist ein js-Ausdruck, und alle Attribute in den Daten können direkt gelesen und die Methode des Objekts aufgerufen werden{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性，可以调用对象的方法
备注：里面写js表达式：有返回值的js代码，而不是js语句

2、指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）
举例：v-bind:href="xxx" 或简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性
备注：Vue中有很多的指令，且形式都是：v-????

【相关推荐：《vue.js教程》】

下面我们来介绍几个常用的指令语法。

2. 指令语法：强制数据绑定 `v-bind:`

功能：指定变化的属性值

完整写法

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

简洁写法

:xxx=&#39;yyy&#39;

单向数据绑定

语法：v-bind:href ="xxx" 或简写为 :href ="xxx"
特点：数据只能从 data 流向页面

双向数据绑定指令 `v-model`

语法：v-mode:value="xxx" 或简写为 v-model="xxx"
特点：数据不仅能从 data 流向页面，还能从页面流向 data

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会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。

3、严重注意：v-html有安全性问题！！！！

(1). 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2). 一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

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

        <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(&#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>

Eine eingehende Analyse der Vorlagensyntax in Vue: Interpolation und Anweisungen

5. 条件渲染指令

移除标签删除

v-if
v-else

写法：

v-if="表达式"
v-else-if="表达式"
v-else="表达式"

适用于：切换频率较低的场景。特点：不展示的DOM元素直接被移除。注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

添加样式隐藏（display: none）

v-show

写法：v-show="表达式"

Bemerkungen: Schreiben

js-Ausdruck in der Formel

: js-Code mit Rückgabewert, nicht 🎜js-Anweisung 🎜🎜🎜🎜 2. Anweisungssyntax: 🎜🎜🎜 Funktion: wird zum Parsen von Tags verwendet (einschließlich: Tag-Attribute, Tag-Textinhalt, Bindungsereignisse ...) .)🎜🎜Beispiel: v-bind:href="xxx" oder abgekürzt als :href="xxx", xxx muss auch einen js-Ausdruck schreiben und kann sein Lesen Sie direkt alle Attribute in Daten🎜🎜Hinweis: Es gibt viele Anweisungen in Vue und die Formen sind: v-????🎜🎜🎜[Verwandte Empfehlungen: "vue.js-Tutorial》】🎜🎜Lassen Sie uns unten einige gängige Befehlssyntax vorstellen. 🎜

2. Befehlssyntax: Datenbindung erzwingen v-bind: 🎜🎜🎜Funktion: Geben Sie den geänderten Attributwert an🎜🎜🎜Vollständige Schreibmethode🎜

<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>

🎜Prägnantes Schreiben🎜rrreee

Einseitige Datenbindung

v- bind:href ="xxx"

:href ="xxx"

Anweisungen zur bidirektionalen Datenbindung`v-model`

v- Modus: value="xxx"

v-model="xxx"

v-on:

4. v-text und v-html🎜🎜v-text🎜

v-text

{{xx}}

v-html

{{xx}}

v-html

Eine eingehende Analyse der Vorlagensyntax in Vue: Interpolation und Anweisungen

5. Bedingter Rendering-Befehl 🎜🎜🎜remove tag delete🎜🎜🎜🎜v-if🎜🎜v-else🎜🎜🎜Schreiben: 🎜

v - if="expression"

v-else-if="expression"

v-else="expression"

v-show="expression"

比较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>

Eine eingehende Analyse der Vorlagensyntax in Vue: Interpolation und Anweisungen

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 }

更多编程相关知识，请访问：编程入门！！

Das obige ist der detaillierte Inhalt vonEine eingehende Analyse der Vorlagensyntax in Vue: Interpolation und Anweisungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css vue.js html xss if for 回调函数 JS 对象事件 dom href display

Stellungnahme：

Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Fassen Sie einige grundlegende Front-End-Interviewfragen zu Vue zusammen und teilen Sie sieNächster Artikel：Fassen Sie einige grundlegende Front-End-Interviewfragen zu Vue zusammen und teilen Sie sie

In Verbindung stehende Artikel

Mehr sehen

Eine eingehende Analyse der Vorlagensyntax in Vue: Interpolation und Anweisungen

1. Verständnis von Vorlagen

2. 指令语法：强制数据绑定 v-bind:

单向数据绑定

双向数据绑定 指令 v-model

3. 指令语法：绑定事件监听 v-on:

4. v-text与v-html

5. 条件渲染指令

Einseitige Datenbindung

Anweisungen zur bidirektionalen Datenbindungv-model

比较v-if与v-show

6. 总结

In Verbindung stehende Artikel

2. 指令语法：强制数据绑定 `v-bind:`

双向数据绑定指令 `v-model`

3. 指令语法：绑定事件监听 `v-on:`

Anweisungen zur bidirektionalen Datenbindung`v-model`