目錄
如何使用Vue3的模板語法？
vue3
一、什麼是模板語法？
我們可以把Vue.js 的模板語法，直接理解為HTML 語法的一種擴展，它所有的模板節點宣告、屬性設定和事件註冊等都是依照HTML 的語法來進行擴充設計的。依照官方的說法是「所有的 Vue 範本都是語法層面合法的 HTML，可以被符合規範的瀏覽器和 HTML 解析器解析」。
Vue 使用基於HTML 的模板語法，使我們能夠聲明式地將其元件實例的資料綁定到呈現的DOM 上
二、內容渲染指令
1. v-text
使用v-tex t指令，將資料以純文字方式填入其空元素中
// 组合式
<script setup>
import { reactive } from 'vue'
let student = reactive({
name: 'Jack',
desc: '<h4>我是来自中国的小朋友！</h4>'
})
</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 'vue'
let student = reactive({
name: 'Jack',
desc: '<h4>我是来自中国的小朋友！</h4>'
})
</script>
<template>
<!-- 插值表达式：在元素中的某一位置采用纯文本的方式渲染数据 -->
<div>这是一个 DIV 元素，{{ student.name }}，{{ student.desc }}</div>
</template>登入後複製
3. v-html
使用v-html 指令，將資料採用HTML 語法填入其空元素中
// 组合式
<script setup>
import { reactive } from 'vue'
let student = reactive({
name: 'Jack',
desc: '<h4>我是来自中国的小朋友！</h4>'
})
</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 指令用在表單元素中：
文字類型的 和