Vue基础教程（40）Vue.js语法之缩写：Vue.js缩写秘籍：摸鱼程序员必备，代码少打50%的骚操作！-优快云博客

一、引言：为什么你的Vue代码像老太太的裹脚布？

兄弟们，摸着自己良心说，写Vue的时候有没有遇到过这种场景：

<button v-bind:disabled="isLoading">提交</button>
<input v-on:input="handleInput">

一眼望去全是v-bind和v-on，代码长得能绕地球半圈！别慌，Vue官方早就看穿了咱们的懒癌晚期，偷偷埋了缩写语法彩蛋。今天咱就扒一扒这些“偷懒神器”，让你代码瞬间清爽如夏天喝冰可乐！

二、v-bind缩写：把“v-bind”变成“:”，键盘少按5次！

1. 完整写法 vs 缩写写法

完整版：v-bind:属性名="数据"
缩写版：:属性名="数据"
举个栗子，给按钮绑个disabled状态：

<!-- 完整写法 -->
<button v-bind:disabled="isLoading">加载中...</button>

<!-- 缩写写法（键盘少按5个键！） -->
<button :disabled="isLoading">加载中...</button>

2. 实战场景：动态样式切换
比如根据用户等级显示不同颜色标签：

<template>
  <div>
    <span :class="userLevelClass">{{ username }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '摸鱼小王',
      level: 'vip'
    }
  },
  computed: {
    userLevelClass() {
      return this.level === 'vip' ? 'text-gold' : 'text-gray'
    }
  }
}
</script>

<style>
.text-gold { color: gold; }
.text-gray { color: gray; }
</style>

3. 偷懒精髓

用:代替v-bind，代码瞬间短小精悍
支持所有属性（:id、:style、:src等）
老板路过时，还以为你在写神秘符号学代码！

三、v-on缩写：把“v-on”变成“@”，点击事件一秒搞定！

1. 完整写法 vs 缩写写法

完整版：v-on:事件名="方法名"
缩写版：@事件名="方法名"
比如绑定点击事件：

<!-- 完整写法 -->
<button v-on:click="submitForm">提交</button>

<!-- 缩写写法（像不像发微博@人？） -->
<button @click="submitForm">提交</button>

2. 实战场景：购物车计数器

<template>
  <div>
    <button @click="decrease">-</button>
    <span>{{ count }}</span>
    <button @click="increase">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increase() {
      this.count++
    },
    decrease() {
      if (this.count > 0) this.count--
    }
  }
}
</script>

3. 进阶玩法：事件修饰符
比如阻止表单默认提交行为：

<form @submit.prevent="onSubmit">
  <input type="text">
  <button type="submit">提交</button>
</form>

@submit.prevent相当于event.preventDefault()
还有.stop（阻止冒泡）、.once（只触发一次）等修饰符
用缩写后，代码读起来像在聊微信：“@提交，给我阻止默认行为！”

四、特殊场景：缩写不是万能的，这些坑别踩！

1. 动态参数缩写
动态属性名不能用缩写（Vue会懵圈）：

<!-- 正确写法 -->
<button v-bind:[key]="value"></button>

<!-- 错误写法（别试！会报错） -->
<button :[key]="value"></button>

2. 插值表达式里不能用缩写
模板里{{ }}不能混用缩写：

<!-- 错误示范 -->
<p>{{ :message }}</p> <!-- 这啥玩意儿？ -->

<!-- 正确姿势 -->
<p>{{ message }}</p>

3. 缩写是语法糖，本质不变
底层编译后，缩写会自动还原成完整写法。所以别担心性能问题，偷懒不扣分！

五、完整示例：用缩写实现一个“摸鱼待办清单”

下面这个例子融合了所有缩写技巧，复制粘贴就能跑：

<!DOCTYPE html>
<html>
<head>
  <title>摸鱼待办清单</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    .done { text-decoration: line-through; }
    .container { max-width: 400px; margin: 20px auto; }
  </style>
</head>
<body>
  <div id="app" class="container">
    <input v-model="newTask" @keyup.enter="addTask" placeholder="输入任务按回车">
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        <span :class="{ done: task.done }">{{ task.text }}</span>
        <button @click="toggleDone(index)">{{ task.done ? '重置' : '完成' }}</button>
        <button @click="deleteTask(index)">删除</button>
      </li>
    </ul>
  </div>

  <script>
    const { createApp } = Vue
    createApp({
      data() {
        return {
          newTask: '',
          tasks: []
        }
      },
      methods: {
        addTask() {
          if (this.newTask) {
            this.tasks.push({ text: this.newTask, done: false })
            this.newTask = ''
          }
        },
        toggleDone(index) {
          this.tasks[index].done = !this.tasks[index].done
        },
        deleteTask(index) {
          this.tasks.splice(index, 1)
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

代码解读：