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

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

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 }

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

2 Il y a quelques semaines By DDD

R.E.P.O. Comment réparer l'audio si vous n'entendez personne

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Comment déverrouiller tout dans Myrise

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7455

Tutoriel CakePHP

1375

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus

Related knowledge

Comment référencer le fichier JS avec Vue.js Apr 07, 2025 pm 11:27 PM

Il existe trois façons de se référer aux fichiers JS dans Vue.js: spécifiez directement le chemin à l'aide du & lt; script & gt; étiqueter;; importation dynamique à l'aide du crochet de cycle de vie monté (); et l'importation via la bibliothèque de gestion de l'État Vuex.

Comment utiliser Bootstrap en Vue Apr 07, 2025 pm 11:33 PM

L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.

Comment utiliser Watch in Vue Apr 07, 2025 pm 11:36 PM

L'option Watch dans Vue.js permet aux développeurs d'écouter des modifications de données spécifiques. Lorsque les données changent, regardez déclenche une fonction de rappel pour effectuer des vues de mise à jour ou d'autres tâches. Ses options de configuration incluent immédiatement, qui spécifie s'il faut exécuter un rappel immédiatement, et profond, ce qui spécifie s'il faut écouter récursivement les modifications des objets ou des tableaux.

Que signifie la charge paresseuse? Apr 07, 2025 pm 11:54 PM

Dans vue.js, le chargement paresseux permet de charger dynamiquement les composants ou les ressources, en réduisant le temps de chargement des pages initiales et en améliorant les performances. La méthode de mise en œuvre spécifique comprend l'utilisation de & lt; keep-alive & gt; et & lt; composant est & gt; composants. Il convient de noter que le chargement paresseux peut provoquer des problèmes de FOUC (écran d'éclat) et ne doit être utilisé que pour les composants qui nécessitent un chargement paresseux pour éviter les frais généraux de performances inutiles.

Comment interroger la version de Vue Apr 07, 2025 pm 11:24 PM

Vous pouvez interroger la version Vue en utilisant Vue Devtools pour afficher l'onglet Vue dans la console du navigateur. Utilisez NPM pour exécuter la commande "NPM List -g Vue". Recherchez l'élément VUE dans l'objet "dépendances" du fichier package.json. Pour les projets Vue CLI, exécutez la commande "Vue --version". Vérifiez les informations de la version dans le & lt; script & gt; Tag dans le fichier html qui fait référence au fichier VUE.

Vue réalise l'effet de défilement de chapiteau / texte Apr 07, 2025 pm 10:51 PM

Implémentez les effets de défilement marquee / texte dans VUE, en utilisant des animations CSS ou des bibliothèques tierces. Cet article présente comment utiliser l'animation CSS: créer du texte de défilement et envelopper du texte avec & lt; div & gt;. Définissez les animations CSS et défini: caché, largeur et animation. Définissez les images clés, Set Transforment: Translatex () au début et à la fin de l'animation. Ajustez les propriétés d'animation telles que la durée, la vitesse de défilement et la direction.

Comment ajouter des fonctions aux boutons pour Vue Apr 08, 2025 am 08:51 AM

Vous pouvez ajouter une fonction au bouton VUE en liant le bouton dans le modèle HTML à une méthode. Définissez la logique de la fonction de méthode et d'écriture dans l'instance Vue.

Comment revenir à la page précédente par Vue Apr 07, 2025 pm 11:30 PM

Vue.js dispose de quatre méthodes pour revenir à la page précédente: $ router.go (-1) $ router.back () utilise & lt; router-link to = & quot; / & quot; Composant Window.History.back (), et la sélection de la méthode dépend de la scène.

See all articles

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

1. Compréhension des modèles

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

单向数据绑定

双向数据绑定 指令 v-model

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

4. v-text与v-html

5. 条件渲染指令

Liaison de données unidirectionnelle

Instructions de liaison de données bidirectionnellesv-model

比较v-if与v-show

6. 总结

Outils d'IA chauds

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

Article chaud

Outils chauds

Bloc-notes++7.3.1

SublimeText3 version chinoise

Envoyer Studio 13.0.1

Dreamweaver CS6

SublimeText3 version Mac

Sujets chauds

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

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

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

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