지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > View.js > 본문

Vue3의 템플릿 구문을 사용하는 방법은 무엇입니까?

WBOY
풀어 주다： 2023-05-10 09:34:16
앞으로
1225명이 탐색했습니다.

1. 템플릿 구문이란 무엇인가요?

우리는 HTML 구문의 확장으로 Vue.js의 템플릿 구문을 직접 이해할 수 있습니다. 모든 템플릿 노드 선언, 속성 설정 및 이벤트 등록은 다음과 같이 설계되었습니다. HTML 구문에 따라 확장됩니다. 공식 성명에 따르면 "모든 Vue 템플릿은 구문적으로 합법적인 HTML이며 사양을 준수하는 브라우저 및 HTML 파서에서 사용할 수 있습니다. 분석".

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>
로그인 후 복사

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>
로그인 후 복사

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>
로그인 후 복사

三、双向绑定指令

1. v-model

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

  • 文本类型的 和