目录

• 前言
• 一、什么是模板语法？
• 二、内容渲染指令
• • 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指令，将数据采用纯文本方式填充其空元素中

// 组合式

2. {{ }} 插值表达式

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

// 组合式

3. v-html

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

// 组合式

三、双向绑定指令

1. v-model

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

1. 文本类型的 和 </code> 元素会绑定 <code>value</code> 属性并侦听 <code>input</code> 事件</li><li><code><input type="checkbox"></code> 和 <code><input type="radio"></code> 会绑定 <code>checked</code> 属性并侦听 <code>change</code> 事件</li><li><code><select></code>会绑定 <code>value</code> 属性并侦听 <code>change</code> 事件</li></ol> <pre><code class="prism language-js">// 组合式 <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">

   ---

   灯

   ---

   是否确定

   ---

   篮球 足球 羽毛球 乒乓球

   ---

   男 女

   ---

   证书等级：初级中级高级

   ---

   去过的城市：南京无锡徐州常州

   ---

   2. v-model的修饰符

   修饰符	作用	示例
   .number	自动将用户的输入值转为数值类型
   .trim	自动过滤用户输入的首尾空白字符
   .lazy	在 chang 时而非 input 时更新

   // 组合式
   
   

   ---

   四、属性绑定指令

   • 响应式地绑定一个元素属性，应该使用 v-bind: 指令
   • 如果绑定的值是 null 或者 undefined，那么该属性将会从渲染的元素上移除
   • 因为 v-bind 非常常用，我们提供了特定的简写语法:

   // 组合式
   
   

   ---

   1. 动态绑定多个属性值

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

   // 组合式
   
   

   渲染结果：
   我是一个普通按钮

   ---

   2. 绑定class和style属性

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

   class属性绑定

   绑定对象

   // 组合式
   
   

   绑定数组

   // 组合式
   
   

   style属性绑定

   绑定对象

   // 组合式
   
   

   绑定数组

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

   // 组合式
   
   
   
   

   ---

   五、条件渲染指令

   1. v-if、v-else-if、v-else

   1. v-if 指令用于条件性地渲染元素；该内容只会在指令的表达式返回真值时才被渲染
   2. v-else-if 提供的是相应于 v-if 的 else if 区块，它可以连续多次重复使用
   3. 你也可以使用 v-else 为 v-if 添加一个 else 区块
   4. v-else 和 v-else-if 指令必须配合 v-if 指令一起使用 ，否则它将不会被识别，而且语句块中间不能出现无关其他元素
   5. v-if 支持在