communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Voir.js > Comment utiliser la syntaxe des modèles de Vue3 ?

Comment utiliser la syntaxe des modèles de Vue3 ?

WBOY
Libérer： 2023-05-10 09:34:16
avant
1235 Les gens l'ont consulté

1. Qu'est-ce que la syntaxe du modèle ?

Nous pouvons comprendre directement la syntaxe du modèle de Vue.js en tant qu'extension de la syntaxe HTML. Toutes ses déclarations de nœuds de modèle, paramètres d'attribut et enregistrements d'événements sont conçus pour. être étendu selon la syntaxe du HTML. Selon la déclaration officielle, « tous les modèles Vue sont syntaxiquement légaux HTML et peuvent être utilisés par les navigateurs et les analyseurs HTML conformes à la spécification. Analyse".

Vue.js 的模板语法，直接理解为 HTML 语法的一种扩展，它所有的模板节点声明、属性设置和事件注册等都是按照 HTML 的语法来进行扩展设计的。按照官方的说法就是“所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析”。

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上

二、内容渲染指令

1. v-text

使用 v-tex t指令，将数据采用纯文本方式填充其空元素中

// 组合式
<script setup>

    import { reactive } from &#39;vue&#39;

    let student = reactive({
        name: &#39;Jack&#39;,
        desc: &#39;<h4>我是来自中国的小朋友！</h4>&#39;
    })
    
</script>

<template>

  <!-- 使用v-text指令，将数据采用纯文本方式填充其空元素中 -->
  
  <div v-text="student.name"></div>

  <!-- v-text：以纯文本的方式显示数据 -->
  <div v-text="student.desc"></div>

  <!-- 下面的代码会报错：div 元素不是空元素 -->
  <!-- <div v-text="student.name">这是原始的div数据</div> -->
   
</template>
Copier après la connexion

2. {{ }} 插值表达式

在元素中的某一位置采用纯文本的方式渲染数据

// 组合式
<script setup>

import { reactive } from &#39;vue&#39;

let student = reactive({
    name: &#39;Jack&#39;,
    desc: &#39;<h4>我是来自中国的小朋友！</h4>&#39;
})

</script>

<template>

    <!-- 插值表达式：在元素中的某一位置采用纯文本的方式渲染数据 -->
    <div>这是一个 DIV 元素，{{ student.name }}，{{ student.desc }}</div>

</template>
Copier après la connexion

3. v-html

使用 v-html 指令，将数据采用 HTML 语法填充其空元素中

// 组合式
<script setup>

import { reactive } from &#39;vue&#39;

let student = reactive({
    name: &#39;Jack&#39;,
    desc: &#39;<h4>我是来自中国的小朋友！</h4>&#39;
})


</script>

<template>

    <!-- 使用v-html指令，将数据采用HTML语法填充其空元素中 -->

    <div v-html="student.name"></div>

    <!-- v-html：以 HTML 语法显示数据 -->
    <div v-html="student.desc"></div>

    <!-- 下面的代码会报错：div 元素不是空元素 -->
    <!-- <div v-html="student.name">这是原始的div数据</div> -->

</template>
Copier après la connexion

三、双向绑定指令

1. v-model

v-model 双向数据绑定指令，视图数据和数据源同步<br/>一般情况下 v-model 指令用在表单元素中：

  • 文本类型的 和