Vue3 中的模板语法

2023-04-05 16:18| 来源: 网络整理| 查看: 265

目录前言一、什么是模板语法？二、内容渲染指令1. v-text2. {{ }} 插值表达式3. v-html三、双向绑定指令1. v-model2. v-model的修饰符四、属性绑定指令1. 动态绑定多个属性值2. 绑定class和style属性五、条件渲染指令1. v-if、v-else-if、v-else2. v-show3. 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指令，将数据采用纯文本方式填充其空元素中

// 组合式 import { reactive } from 'vue'let student = reactive({name: 'Jack',desc: '我是来自中国的小朋友！'}) 2. {{ }} 插值表达式

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

// 组合式 import { reactive } from 'vue'let student = reactive({name: 'Jack',desc: '我是来自中国的小朋友！' })这是一个 DIV 元素，{{ student.name }}，{{ student.desc }} 3. v-html

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

// 组合式 import { reactive } from 'vue'let student = reactive({name: 'Jack',desc: '我是来自中国的小朋友！' }) 三、双向绑定指令 1. v-model

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

文本类型的和元素会绑定 value 属性并侦听 input 事件和会绑定 checked 属性并侦听 change 事件会绑定 value 属性并侦听 change 事件 // 组合式 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']) // 去过的城市（多选下拉框）灯是否确定篮球足球羽毛球乒乓球男女证书等级：初级中级高级去过的城市：南京无锡徐州常州 2. v-model的修饰符修饰符作用示例.number自动将用户的输入值转为数值类型.trim自动过滤用户输入的首尾空白字符.lazy在 chang 时而非 input 时更新 // 组合式 import { ref } from 'vue' let age = ref(20) let nickname = ref('')将用户输入的值转成数值 .number，懒更新 .lazy去掉首尾空白字符四、属性绑定指令响应式地绑定一个元素属性，应该使用 v-bind: 指令如果绑定的值是 null 或者 undefined，那么该属性将会从渲染的元素上移除因为 v-bind 非常常用，我们提供了特定的简写语法: // 组合式 import { reactive } from 'vue'let picture = reactive({src: 'https://uploadfile.bizhizu.cn/2015/0424/20150424015229741.jpg', // 图像地址width: 200 // 显示宽度 })设置宽度为NULL 1. 动态绑定多个属性值

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

// 组合式 import {reactive} from 'vue'let attrs = reactive({class: 'error',id: 'borderBlue' })我是一个普通的按钮.error {background-color: rgb(167, 58, 58);color: white;}#borderBlue {border: 2px solid rgb(44, 67, 167);}

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

2. 绑定class和style属性

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

class属性绑定

绑定对象

// 组合式 import { ref, reactive } from 'vue'let btnClassObject = reactive({error: false, // 主题色flat: false // 阴影 })let capsule = ref(false)// 胶囊 let block = ref(false)// 块 error flat我是一个普通的按钮胶囊块我是一个普通的按钮 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%; }

绑定数组

// 组合式 import { ref, reactive } from 'vue'let btnTheme = ref([]) // 按钮class数组let capsule = ref(false)// 胶囊 let widthTheme = ref([])// 宽度数组 error flat我是一个普通的按钮胶囊块我是一个普通的按钮 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属性绑定

绑定对象

// 组合式 import { reactive, ref } from 'vue'let btnTheme = reactive({backgroundColor: '#FF0000', // 背景色color: '#000000' // 文本色 })let backColor = ref('#0000FF') // 背景色 let color = ref('#FFFFFF') // 文本色 let borRadius = ref(20) // 边框圆角背景色：文本色：我是一个普通的按钮背景色：文本色：边框圆角：

【本文地址】

公司简介

联系我们