Vue3 中的模板语法
目录
- 前言
- 一、什么是模板语法？
- 二、内容渲染指令
-
- 1. v-text
- 2. {{ }} 插值表达式
- 3. v-html
- 三、双向绑定指令
-
- 1. v-model
- 2. v-model的修饰符
- 四、属性绑定指令
-
- 1. 动态绑定多个属性值
- 2. 绑定class和style属性
- 五、条件渲染指令
-
- 1. v-if、v-else-if、v-else
- 2. v-show
- 3. v-if和v-show的区别
- 六、事件绑定指令
-
- 1. 事件修饰符
- 2. 按键修饰符
- 3. 鼠标按键修饰符
- 七、列表渲染指令
-
- 1. v-for渲染数组
- 2. v-for渲染对象
- 3. 通过 key 管理状态
- 总结：
前言
Vue.js从版本1.x到版本3.x，官方代码案例和推荐使用都是模板语法，那么本篇文章我们也根据官方的推荐，来了解一下模板语法是怎么一回事。
一、什么是模板语法？
我们可以把 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: '我是来自中国的小朋友！
'
})
</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: '我是来自中国的小朋友！
'
})
</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: '我是来自中国的小朋友！
'
})
</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 双向数据绑定指令，视图数据和数据源同步
一般情况下 v-model 指令用在表单元素中：
- 文本类型的
和