Vue3基础——模板语法

插值语法

适用于元素的文本内容，使用双大括号

<div>
    {{message}}
</div>

若需要仅插值一次，加上v-once指令

<div v-once>
    {{message}}
</div>

指令语法

vue中的指令以v-开头，支持HTML元素属性的绑定，使用指令时，引号的部分作为JavaScript表达式处理

指令的结构

Vue指令的完整结构由名称、参数、修饰符和值组成

• Name：Vue指令以v-开头

• Modifier：修饰符，表示该指令通过特殊方式绑定

• Argument：指令参数，如v-bind:id的参数为id，v-on:click的参数为click

  支持动态参数，即使用表达式指定参数，表达式的结果必须为一个字符串，当结果为null时，该属性不生效

  <div v-bind:[attr]="value"></div>
  <a v-on:[eventName]="doSomething"></a>
      
  <!--可简写-->
  <div :[attr]="value"></div>
  <a @[eventName]="doSomething"></a>
  

属性绑定

• 使用v-bind绑定属性

  <div v-bind:id="id"></div>
  

• v-bind指令可以简写，使用冒号:开头

  <div :id="id"></div>
  

• 同名简写：当属性名与变量名相同可简写

  <div v-bind:id></div>
  

• 可绑定一个对象，同时绑定多个属性

  let obj = {
      id: "myid",
      class: "my-class"
  }
      
  // html
  // <div v-bind="obj"></div>
  

• 对class和style属性的绑定增强

  value可以传入对象或数组以支持多个值的需求

  <!--传入对象-->
  <!--通过isClass1Active和isClass2Active两个状态，可以控制是否添加class1或class2-->
  <div :class="{class1: isClass1Active, class2: isClass2Active}"></div>
  <!--通过fontSize状态来修改样式-->
  <div :style="{ 'font-size': fontSize + 'px' }"></div>
      
  <!--传入数组-->
  <div :class="[activeClass, errorClass]"></div>
  <div :style="[baseStyles, overridingStyles]"></div>
  

  传入对象时可以不使用字面量

  const classObject = reactive({
    active: true,
    'text-danger': false
  })
  // <div :class="classObject"></div>
      
  const styleObject = reactive({
    color: 'red',
    fontSize: '13px'
  })
  // <div :style="styleObject"></div>
  

双向绑定

使用v-model指令实现双向绑定

<input type="text" v-model="value1">
<!--实际实现-->
<input type="text" 
       :value="value1" 
       @input="value1 = ($event.target as HTMLInputElement).value">

从用户输入获取的值默认为字符串，通过修饰符可对字符串进行处理

• lazy：当输入框失去焦点或按下回车时，才触发数据更新
• number：将字符串转换为数字
• trim：去除首尾空格