Cet article vous présentera la syntaxe des modèles dans Vue et présentera la syntaxe d'interpolation et la syntaxe des instructions. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Une analyse approfondie de la syntaxe des modèles dans Vue : interpolation et directives

Vue possède de nombreuses syntaxes de modèles particulièrement faciles à utiliser. Vous pouvez écrire une syntaxe de modèle définie par Vue en HTML pour afficher rapidement des données, des méthodes de liaison, etc. C'est l'une des raisons pour lesquelles Vue est si rapide à démarrer.

1. Compréhension des modèles

Commençons par comprendre ce qu'est un modèle ?

Le modèle est la page HTML dynamique, qui contient du code de syntaxe js

La syntaxe du modèle de Vue est divisée en deux types, à savoir :

[Syntaxe d'interpolation] Expression à double accolade (Syntaxe "Moustache") [Un]
[Syntaxe d'instruction] Instructions (attributs de balise personnalisés commençant par v-) [Beaucoup]

1 Syntaxe d'interpolation :

Fonction : utilisée pour analyser le contenu du corps de la balise et l'afficher sur la page. Données
Écriture : {{xxx}}, xxx est une expression js, et tous les attributs des données peuvent être directement lus, et la méthode de l'objet peut être appelée{{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会作为表达式解析执行

Copier après la connexion

简洁写法

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

Copier après la connexion

单向数据绑定

语法：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;

Copier après la connexion

简洁写法

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

Copier après la connexion

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>

Copier après la connexion

Une analyse approfondie de la syntaxe des modèles dans Vue : interpolation et directives

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="表达式"

Remarque : Écrivez

expression js à l'intérieur de la formule

: code js avec valeur de retour, pas d'instruction 🎜js 🎜🎜🎜🎜 2. Syntaxe d'instruction : 🎜🎜🎜 Fonction : utilisée pour analyser les balises (y compris : les attributs de balise, le contenu du corps de la balise, les événements de liaison.... .)🎜🎜Exemple : v-bind:href="xxx" ou abrégé en :href="xxx", xxx doit également écrire une expression js et peut être Lisez directement tous les attributs dans data🎜🎜Remarque : Il existe de nombreuses instructions dans Vue, et les formulaires sont : v-????🎜🎜🎜[Recommandations associées : "tutoriel vue.js》】🎜🎜Introduisons ci-dessous une syntaxe de commande courante. 🎜

2. Syntaxe de commande : forcer la liaison de données v-bind : 🎜🎜🎜Fonction : spécifier la valeur de l'attribut modifiée🎜🎜🎜Méthode d'écriture complète🎜

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

Copier après la connexion

🎜Écriture concise🎜rrreee

Liaison de données unidirectionnelle

v- bind:href ="xxx"

:href ="xxx"

Instructions de liaison de données bidirectionnelles`v-model`

v- mode : value="xxx"

v-model="xxx"

v-on :

4. v-text et v-html🎜🎜v-text🎜

v-text

{{xx}}

v-html

{{xx}}

v-html

Une analyse approfondie de la syntaxe des modèles dans Vue : interpolation et directives

5. Commande de rendu conditionnel 🎜🎜🎜supprimer la balise delete🎜🎜🎜🎜v-if🎜🎜v-else🎜🎜🎜Écriture : 🎜

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>

Copier après la connexion

Une analyse approfondie de la syntaxe des modèles dans Vue : interpolation et directives