vue2初体验(七)：指令缩写+实例

一. Vue 指令的参数与缩写形式

1. v-bind 指令及其缩写

完整形式

<!-- 绑定属性 -->
<a v-bind:href="url">链接</a>
<img v-bind:src="imageSrc">
<div v-bind:class="{ active: isActive }"></div>

缩写形式 “:”

<!-- 缩写形式 (推荐) -->
<a :href="url">链接</a>
<img :src="imageSrc">
<div :class="{ active: isActive }"></div>

动态参数 (Vue 2.6+)

<!-- 动态属性名 -->
<a :[attributeName]="url">链接</a>
<!-- 当 attributeName 为 'href' 时，等同于 :href="url" -->

2. v-on 指令及其缩写

完整形式

<!-- 事件监听 -->
<button v-on:click="handleClick">点击</button>
<input v-on:input="onInput">
<form v-on:submit.prevent="onSubmit"></form>

缩写形式 “@”

<!-- 缩写形式 (推荐) -->
<button @click="handleClick">点击</button>
<input @input="onInput">
<form @submit.prevent="onSubmit"></form>

动态事件名 (Vue 2.6+)

<!-- 动态事件名 -->
<button @[eventName]="handleEvent">按钮</button>
<!-- 当 eventName 为 'click' 时，等同于 @click="handleEvent" -->

二. 实际应用示例

组合使用示例

<template>
  <div>
    <!-- v-bind 缩写 -->
    <img :src="imageUrl" :alt="imageAlt">
    
    <!-- v-on 缩写 -->
    <button @click="toggleMenu">菜单 {{ isOpen ? '▲' : '▼' }}</button>
    
    <!-- 动态参数示例 -->
    <a :[linkAttr]="pageUrl">首页</a>
    <input @[inputEvent]="handleInput">
    
    <!-- 修饰符使用 -->
    <form @submit.prevent="submitForm">
      <input type="text" v-model="username">
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '/logo.png',
      imageAlt: '公司Logo',
      isOpen: false,
      linkAttr: 'href',
      pageUrl: '/home',
      inputEvent: 'input',
      username: ''
    }
  },
  methods: {
    toggleMenu() {
      this.isOpen = !this.isOpen
    },
    handleInput(e) {
      console.log('输入值:', e.target.value)
    },
    submitForm() {
      alert(`用户名: ${this.username}`)
    }
  }
}
</script>

三. 特殊用法说明

1. v-bind 绑定对象

可以一次性绑定多个属性：

<template>
  <div v-bind="objectOfAttrs"></div>
  <!-- 等价于 -->
  <div :id="objectOfAttrs.id" :class="objectOfAttrs.class"></div>
</template>

<script>
export default {
  data() {
    return {
      objectOfAttrs: {
        id: 'container',
        class: 'wrapper'
      }
    }
  }
}
</script>

2. v-on 多事件处理器

<button @click="one($event), two($event)">点击</button>

3. 修饰符组合

<!-- 按键修饰符 + 系统修饰键 -->
<input @keyup.ctrl.enter="submit">

<!-- 事件修饰符链式调用 -->
<div @click.stop.prevent="doThis"></div>

四. 最佳实践建议

1. 一致性：在项目中统一使用缩写形式或完整形式（推荐使用缩写）
2. 复杂逻辑：当绑定值或事件处理逻辑复杂时，使用计算属性或方法

   <button :disabled="isButtonDisabled">提交</button>
   
   <script>
   export default {
     computed: {
       isButtonDisabled() {
         return !this.formValid || this.submitting
       }
     }
   }
   </script>
   

3. 动态参数：确保动态参数表达式结果为字符串或 null（null 表示移除绑定）
4. 修饰符顺序：注意修饰符顺序会影响效果（如 @click.prevent.self 与 @click.self.prevent 不同）

五. 技术原理

Vue 的模板编译器会将缩写形式转换为完整形式：

// 编译前
<a :href="url" @click="handleClick">链接</a>

// 编译后
createElementVNode("a", {
  href: _ctx.url,
  onClick: _ctx.handleClick
}, "链接")

缩写语法只是语法糖，最终生成的渲染函数代码相同。