Vue3中的模板语法怎么使用

一、什么是模板语法？

我们可以把 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: '
我是来自中国的小朋友！
'
})

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 事件</p></li><li><p><input type="checkbox"> 和 <input type="radio"> 会绑定 checked 属性并侦听 change 事件</p></li><li><p><select>会绑定 value 属性并侦听 change 事件</p></li></ul><pre class="brush: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 时更新

  // 组合式
  
  
  import { ref } from 'vue' 
  
  let age = ref(20)
  let nickname = ref('')
  
  
  
  

  四、属性绑定指令

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

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

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

  // 组合式
  
  
  import { reactive } from 'vue'
  
  let picture = reactive({
      src: 'https://cache.yisu.com/upload/information/20230306/112/35391.jpg', // 图像地址
      width: 200 // 显示宽度
  })
  
  
  
  

  1. 动态绑定多个属性值

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

  // 组合式
  
  
  import {reactive} from 'vue'
  
  let attrs = reactive({
      class: 'error',
      id: 'borderBlue'
  })
  
  
  
  
  
  

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

  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)// 块
  
  
  
  
  
  

  绑定数组

  // 组合式
  
  
  import { ref, reactive } from 'vue'
  
  let btnTheme = ref([]) // 按钮class数组
  
  let capsule = ref(false)// 胶囊
  let widthTheme = ref([])// 宽度数组
  
  
  
  
  
  

  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) // 边框圆角
  
  
  
  
  
  

  绑定数组

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

  // 组合式
  
  
  import { ref, reactive } from 'vue'
  
  const btnTheme = ref([
      {
          backgroundColor: '#FF0000', // 背景色
          color: '#FFFFFF' // 文本色
      },
      {
          borderRadius: 0 // 边框圆角
      }
  ])
  
  const colorTheme = reactive({
      backgroundColor: '#000000', // 背景色
      color: '#FFFFFF' // 文本色
  })
  
  const radiusTheme = reactive({
      borderRadius: 0 // 边框圆角
  })
  
  
  
  
  
  

  五、条件渲染指令

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

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

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

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

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

  • v-if 指令一起使用 ，否则它将不会被识别，而且语句块中间不能出现无关其他元素v-if 支持在

    2. v-show

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

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

    • v-show 不支持在