核心语法

1. 模板语法

文本插值

<span>Message: {{ msg }}</span>

原始HTML

<div v-html="rawHtml"></div>

属性绑定

<div v-bind:id="dynamicId"></div>
<!-- 缩写 -->
<div :id="dynamicId"></div>

2. 条件渲染

v-if

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>C</div>

v-show

<div v-show="isShow">显示或隐藏</div>

3. 列表渲染

基础用法

<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ item.message }}
  </li>
</ul>

对象遍历

<ul>
  <li v-for="(value, key, index) in object" :key="key">
    {{ index }}. {{ key }}: {{ value }}
  </li>
</ul>

4. 事件处理

基础用法

<button v-on:click="counter += 1">Add</button>
<!-- 缩写 -->
<button @click="counter += 1">Add</button>

事件修饰符

<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 键修饰符，按下enter时触发 -->
<input @keyup.enter="submit">

5. 表单输入绑定

v-model基础用法

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

不同表单类型

<!-- 文本框 -->
<input v-model="message">

<!-- 多行文本 -->
<textarea v-model="message"></textarea>

<!-- 复选框 -->
<input type="checkbox" v-model="checked">

<!-- 单选按钮 -->
<input type="radio" v-model="picked" value="One">

<!-- 选择框 -->
<select v-model="selected">
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>

6. 计算属性和侦听器

计算属性

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}
</script>

侦听器

<script>
export default {
  data() {
    return {
      question: ''
    }
  },
  watch: {
    question(newValue, oldValue) {
      // 值变化时执行
      this.handleQuestionChange()
    }
  }
}
</script>

7. Class与Style绑定

Class绑定

<!-- 对象语法 -->
<div :class="{ active: isActive, 'text-danger': hasError }"></div>

<!-- 数组语法 -->
<div :class="[activeClass, errorClass]"></div>

Style绑定

<!-- 对象语法 -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

<!-- 数组语法 -->
<div :style="[baseStyles, overridingStyles]"></div>

8. 生命周期钩子

<script>
export default {
  beforeCreate() {
    // 实例初始化之后，数据观测和事件配置之前
  },
  created() {
    // 实例创建完成后被立即调用
  },
  beforeMount() {
    // 挂载开始之前被调用
  },
  mounted() {
    // 实例被挂载后调用
  },
  beforeUpdate() {
    // 数据更新时调用
  },
  updated() {
    // 数据更改导致的虚拟DOM重新渲染后调用
  },
  beforeDestroy() {
    // 实例销毁之前调用
  },
  destroyed() {
    // 实例销毁后调用
  }
}
</script>

注意事项

1. v-if vs v-show：v-if是"真正"的条件渲染，v-show只是CSS display的切换
2. key的重要性：在v-for中使用key可以优化虚拟DOM的更新
3. 计算属性vs方法：计算属性有缓存，方法每次都会执行
4. v-model的修饰符：.lazy, .number, .trim的合理使用
5. 生命周期钩子中的this指向：指向当前Vue实例