广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

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

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

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

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

// 组合式<script setup>import { reactive } from 'vue'let student = reactive({    name: 'Jack',    desc: '<h4>我是来自中国的小朋友！</h4>'})</script><template>    <!-- 插值表达式：在元素中的某一位置采用纯文本的方式渲染数据 -->    <div>这是一个 DIV 元素，{{ student.name }}，{{ student.desc }}</div></template>

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

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

文本类型的 <input> 和 <textarea> 元素会绑定 value 属性并侦听 input 事件

<input type="checkbox"> 和 <input type="radio"> 会绑定 checked 属性并侦听 change 事件

<select>会绑定 value 属性并侦听 change 事件

// 组合式<script setup>import { ref } from 'vue' let inputText = ref('ABC')  // 单行文本框let message = ref('本次更新有以下几点：……') // 多行文本框let open = ref(true) // 开灯（复选框）let determine = ref('不确定') // 是否确定（复选框）let likes = ref(['YMQ']) // 兴趣爱好（复选框）let sex = ref('woman') // 性别（单选按钮）let level = ref('B') //  // 证书等级（单选下拉框）let city = ref(['苏C', '苏B']) // 去过的城市（多选下拉框）</script><template>    <!-- 单行文本框 -->    <input type="text" v-model="inputText">    <hr>    <!-- 多行文本框 -->    <textarea v-model="message"></textarea>    <hr>    <!-- 默认情况下，复选框的值：true/false -->    <input type="checkbox" v-model="open"> 灯    <hr>    <!-- 自定义复选框值： true-value/false-value -->    <input type="checkbox" true-value="确定" false-value="不确定" v-model="determine"> 是否确定    <hr>    <input type="checkbox" value="LQ" v-model="likes"> 篮球    <input type="checkbox" value="ZQ" v-model="likes"> 足球    <input type="checkbox" value="YMQ" v-model="likes"> 羽毛球    <input type="checkbox" value="PPQ" v-model="likes"> 乒乓球    <hr>    <input type="radio" value="man" v-model="sex"> 男    <input type="radio" value="woman" v-model="sex"> 女    <hr>    证书等级：    <select v-model="level">        <option value="C">初级</option>        <option value="B">中级</option>        <option value="A">高级</option>    </select>    <hr>    去过的城市：    <select multiple v-model="city">        <option value="苏A">南京</option>        <option value="苏B">无锡</option>        <option value="苏C">徐州</option>        <option value="苏D">常州</option>    </select></template>

// 组合式<script setup>import { ref } from 'vue' let age = ref(20)let nickname = ref('')</script><template>        <p>将用户输入的值转成数值 .number，懒更新 .lazy</p>    <!-- 。number 将用户输入的值转成数值，如果用户输入的内容无法转成数字，将不会更新数据源 -->    <!-- .lazy 在 change 跟新数据源，而不是 input  -->    <input type="text" v-model.lazy.number="age">    <hr>    <p>去掉首尾空白字符</p>    <input type="text" v-model.trim="nickname"></template>

响应式地绑定一个元素属性，应该使用 v-bind: 指令

如果绑定的值是 null 或者 undefined，那么该属性将会从渲染的元素上移除

因为 v-bind 非常常用，我们提供了特定的简写语法:

// 组合式<script setup>import { reactive } from 'vue'let picture = reactive({    src: 'https://cache.yisu.com/upload/information/20230306/112/35391.jpg', // 图像地址    width: 200 // 显示宽度})</script><template>    <input type="range" min="100" max="500" v-model="picture.width">    <hr>    <!-- v-bind: 为 src 属性绑定指定的数据源 -->    <img v-bind:src="picture.src" v-bind:width="picture.width">    <hr>    <!-- : 是 v-bind: 的缩写形式 -->    <img :src="picture.src" :width="picture.width">    <hr>    <!-- 如果绑定的值是 null 或者 undefined，那么该属性将会从渲染的元素上移除 -->    <button @click="picture.width = null">设置宽度为NULL</button></template>

直接使用 v-bind 来为元素绑定多个属性及其值

// 组合式<script setup>import {reactive} from 'vue'let attrs = reactive({    class: 'error',    id: 'borderBlue'})</script><template>        <!-- 直接使用 v-bind 来为元素绑定多个属性及其值 -->    <button v-bind="attrs">我是一个普通的按钮</button></template><style>    .error {        background-color: rgb(167, 58, 58);        color: white;    }    #borderBlue {        border: 2px solid rgb(44, 67, 167);    }</style>

渲染结果：<button class="redBack" id="btnBorderBlue">我是一个普通按钮</button>

class 和 style 可以和其他属性一样使用 v-bind 将它们和动态的字符串绑定；但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的；因此， Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强；除了字符串外，表达式的值也可以是对象或数组。

class属性绑定

绑定对象

// 组合式<script setup>import { ref, reactive } from 'vue'let btnClassObject = reactive({    error: false, // 主题色    flat: false // 阴影})let capsule = ref(false)// 胶囊let block = ref(false)// 块</script><template>    <input type="checkbox" v-model="btnClassObject.error"> error    <input type="checkbox" v-model="btnClassObject.flat"> flat    <br>    <br>    <button :class="btnClassObject">我是一个普通的按钮</button>    <hr>    <input type="checkbox" v-model="capsule"> 胶囊    <input type="checkbox" v-model="block"> 块    <br>    <br>    <button :class="{ 'rounded': capsule, 'fullWidth':  block }">我是一个普通的按钮</button></template><style>button {    border: none;    padding: 15px 20px;    background-color: rgb(179, 175, 175);}.error {    background-color: rgb(167, 58, 58);    color: white;}.flat {    box-shadow: 0 0 8px gray;}.rounded {    border-radius: 100px;}.fullWidth {    width: 100%;}</style>

绑定数组

// 组合式<script setup>import { ref, reactive } from 'vue'let btnTheme = ref([]) // 按钮class数组let capsule = ref(false)// 胶囊let widthTheme = ref([])// 宽度数组</script><template>    <input type="checkbox" value="error" v-model="btnTheme"> error    <input type="checkbox" value="flat" v-model="btnTheme"> flat    <br>    <br>    <!-- 直接使用数组数据源，数组中有哪些值，直接在该元素的class里出现对应的类名 -->    <button :class="btnTheme">我是一个普通的按钮</button>    <hr>    <input type="checkbox" v-model="capsule"> 胶囊    <input type="checkbox" value="fullWidth" v-model="widthTheme"> 块    <br>    <br>    <!-- 数组和对象一起使用 -->    <button :class="[{ 'rounded': capsule }, widthTheme]">我是一个普通的按钮</button></template><style>button {    border: none;    padding: 15px 20px;    background-color: rgb(179, 175, 175);}.error {    background-color: rgb(167, 58, 58);    color: white;}.flat {    box-shadow: 0 0 8px gray;}.rounded {    border-radius: 100px;}.fullWidth {    width: 100%;}</style>

style属性绑定

绑定对象

// 组合式<script setup>import { reactive, ref } from 'vue'let btnTheme = reactive({    backgroundColor: '#FF0000', // 背景色    color: '#000000' // 文本色})let backColor = ref('#0000FF')  // 背景色let color = ref('#FFFFFF')  // 文本色let borRadius = ref(20) // 边框圆角</script><template>    背景色：<input type="color" v-model="btnTheme.backgroundColor">    文本色：<input type="color" v-model="btnTheme.color">    <br>    <br>    <!-- style：可以直接绑定对象数据源，但是对象数据源的属性名当样式属性（驼峰命名法，kebab-cased形式） -->    <button :>我是一个普通的按钮</button>    <hr>    背景色：<input type="color" v-model="backColor">    文本色：<input type="color" v-model="color">    边框圆角：<input type="range" min="0" max="20" v-model="borRadius">    <br>    <br>    <!-- style：可以直接写对象，但是对象的属性名当样式属性（驼峰命名法，kebab-cased形式） -->    <button :style="{        backgroundColor: backColor,        color,        'border-radius': borRadius + 'px'    }">我是一个普通的按钮</button></template><style>button {    border: none;    padding: 15px 20px;    background-color: rgb(179, 175, 175);}</style>

绑定数组

还可以给 :style 绑定一个包含多个样式对象的数组，这些对象会被合并后渲染到同一元素上

// 组合式<script setup>import { reactive } from 'vue'let student = reactive({    name: 'Jack',    desc: '<h4>我是来自中国的小朋友！</h4>'})</script><template>    <!-- 插值表达式：在元素中的某一位置采用纯文本的方式渲染数据 -->    <div>这是一个 DIV 元素，{{ student.name }}，{{ student.desc }}</div></template>0

v-if 指令用于条件性地渲染元素；该内容只会在指令的表达式返回真值时才被渲染

v-else-if 提供的是相应于 v-if 的 else if 区块，它可以连续多次重复使用

你也可以使用 v-else 为 v-if 添加一个 else 区块

v-else 和 v-else-if 指令必须配合

v-if 指令一起使用 ，否则它将不会被识别，而且语句块中间不能出现无关其他元素v-if 支持在 <template> 元素上使用，这只是一个不可见的包装器元素，最后渲染的结果并不会包含这个 <template> 元素

// 组合式<script setup>import { reactive } from 'vue'let student = reactive({    name: 'Jack',    desc: '<h4>我是来自中国的小朋友！</h4>'})</script><template>    <!-- 插值表达式：在元素中的某一位置采用纯文本的方式渲染数据 -->    <div>这是一个 DIV 元素，{{ student.name }}，{{ student.desc }}</div></template>1

v-show 按条件显示一个元素的指令v-show 会在 DOM 渲染中保留该元素

v-show 仅切换了该元素上名为 display 的 CSS 属性

v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用

// 组合式<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-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事；条件区块只有当条件首次变为 true 时才被渲染

v-show 元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销；如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适

我们可以使用 v-on: 指令 (简写为@) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript用法：v-on:click="" 或 @click=""

用法：

// 组合式<script setup>import { reactive } from 'vue'let student = reactive({    name: 'Jack',    desc: '<h4>我是来自中国的小朋友！</h4>'})</script><template>    <!-- 插值表达式：在元素中的某一位置采用纯文本的方式渲染数据 -->    <div>这是一个 DIV 元素，{{ student.name }}，{{ student.desc }}</div></template>4

.prevent ：阻止该事件的默认行为

// 组合式<script setup>import { reactive } from 'vue'let student = reactive({    name: 'Jack',    desc: '<h4>我是来自中国的小朋友！</h4>'})</script><template>    <!-- 插值表达式：在元素中的某一位置采用纯文本的方式渲染数据 -->    <div>这是一个 DIV 元素，{{ student.name }}，{{ student.desc }}</div></template>5

.stop ：阻止事件产生的冒泡现象

// 组合式<script setup>import { reactive } from 'vue'let student = reactive({    name: 'Jack',    desc: '<h4>我是来自中国的小朋友！</h4>'})</script><template>    <!-- 插值表达式：在元素中的某一位置采用纯文本的方式渲染数据 -->    <div>这是一个 DIV 元素，{{ student.name }}，{{ student.desc }}</div></template>6

.once ：绑定的事件只触发 1 次

// 组合式<script setup>import { reactive } from 'vue'let student = reactive({    name: 'Jack',    desc: '<h4>我是来自中国的小朋友！</h4>'})</script><template>    <!-- 插值表达式：在元素中的某一位置采用纯文本的方式渲染数据 -->    <div>这是一个 DIV 元素，{{ student.name }}，{{ student.desc }}</div></template>7

.self ：只有在 event.target 是当前元素自身时触发事件处理函数

// 组合式<script setup>import { reactive } from 'vue'let student = reactive({    name: 'Jack',    desc: '<h4>我是来自中国的小朋友！</h4>'})</script><template>    <!-- 插值表达式：在元素中的某一位置采用纯文本的方式渲染数据 -->    <div>这是一个 DIV 元素，{{ student.name }}，{{ student.desc }}</div></template>8

.capture 给元素添加一个监听器

当元素事件产生冒泡时，先触发的是该修饰符的元素的事件

如果有多个该修饰符，则由外向内依次触发

// 组合式<script setup>import { reactive } from 'vue'let student = reactive({    name: 'Jack',    desc: '<h4>我是来自中国的小朋友！</h4>'})</script><template>    <!-- 插值表达式：在元素中的某一位置采用纯文本的方式渲染数据 -->    <div>这是一个 DIV 元素，{{ student.name }}，{{ student.desc }}</div></template>9

.passive ：不阻止事件的默认行为，与 .prevent 不要同时使用

// 组合式<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>0

按键别名：.enter、.tab、.esc、.space、.up、.down、.left、.right、.delete (捕获 Delete 和 Backspace 两个按键)系统修饰符：.ctrl、.alt、.shift、.meta准确的修饰符：.exact

// 组合式<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

鼠标按键修饰符：.left、.right、.middle

// 组合式<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>2

使用 v-for 指令基于一个数组来渲染一个列表

语法：

in 前一个参数：item in itemsitem ：值items ：需要循环的数组in 前两个参数：(value, index) in itemsvalue ：值index ：索引items ：需要循环的数组

// 组合式<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>3

使用 v-for 来遍历一个对象的所有属性，遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定语法：

in 前一个参数：value in objectvalue ：属性值items ：需要循环的对象in 前两个参数：(value, name) in objectvalue ：属性值name ：键items ：需要循环的对象in 前三个参数：(value, name, index) in objectvalue ：属性值name ：键index ：索引items ：需要循环的对象

// 组合式<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>4

当列表的数据变化时，默认情况下，Vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能；但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能；此时，需要为每项提供一个唯一的key属性：key 的注意事项：

key 的类型只能是 Number/String

key 值必须具有唯一性

建议循环的列表有一个属性当 key（该属性的值在此列表中唯一）

不使用索引当 key

建议使用 v-for 指令时一定要指定 key 的值

// 组合式<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>5

以上就是如何使用Vue3的模板语法？的详细内容，更多请关注9543建站博客其它相关文章！