Vue3 中的模板语法

Posted 清风 与我

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3 中的模板语法相关的知识，希望对你有一定的参考价值。

目录

前言

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: '<h3>我是来自中国的小朋友！</h3>'
    )
    
</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: '<h3>我是来自中国的小朋友！</h3>'
)

</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: '<h3>我是来自中国的小朋友！</h3>'
)


</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 指令用在表单元素中：

  1. 文本类型的 <input> 和 <textarea> 元素会绑定 value 属性并侦听 input 事件
  2. <input type="checkbox"> 和 <input type="radio"> 会绑定 checked 属性并侦听 change 事件
  3. <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>

2. v-model的修饰符

修饰符作用示例
.number自动将用户的输入值转为数值类型<input v-model.number="age" />
.trim自动过滤用户输入的首尾空白字符<input v-model.trim="msg" />
.lazy在 chang 时而非 input 时更新<input v-model.lazy="msg" />
// 组合式
<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://uploadfile.bizhizu.cn/2015/0424/20150424015229741.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>

1. 动态绑定多个属性值

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

2. 绑定class和style属性

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 :style="btnTheme">我是一个普通的按钮</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  ref, reactive  from 'vue'

const btnTheme = ref([
    
        backgroundColor: '#FF0000', // 背景色
        color: '#FFFFFF' // 文本色
    ,
    
        borderRadius: 0 // 边框圆角
    
])

const colorTheme 以上是关于Vue3 中的模板语法的主要内容，如果未能解决你的问题，请参考以下文章
 

 Vue3 中的模板语法


 2022前端技术栈


 Vue3 高级语法—— h函数jsx


 Vue3.2中的setup语法糖,保证你看的明明白白！


 vue3.x 模板语法-指令


 vue3.x模板语法-插值