【学vue跟玩一样】快速学会常用指令及如何理解生命周期

在Vue.js中，指令是用来在DOM上进行数据绑定的一种功能，它们以v-开头。Vue的生命周期钩子是Vue实例从创建到销毁过程中的一些时间点，你可以在这些时间点编写自己的逻辑。

常用的Vue指令包括：

1. v-text: 更新元素的textContent。
2. v-html: 更新元素的innerHTML，慎用，因为它会导致跨站脚本攻击（XSS）。
3. v-if: 条件性地渲染元素，如果为false，元素会被移除。
4. v-else: 必须跟v-if或v-else-if一起使用，表示v-if的else块。
5. v-else-if: v-if的else if块。
6. v-show: 根据表达式之真假，切换元素的display CSS属性。
7. v-for: 基于源数据多次渲染元素或模板块。
8. v-on: 监听事件，用法为v-on:event或简写为@event。
9. v-bind: 绑定元素的属性，用法为v-bind:attribute或简写为:attribute。
10. v-model: 在表单元素上创建双向数据绑定。

Vue的生命周期钩子包括：

1. beforeCreate: 实例初始化之后，数据观测(data observer)和事件/watcher 设置之前调用。
2. created: 实例创建完成后被调用，在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。
3. beforeMount: 模板编译/挂载之前调用，$el属性仍不可见。
4. mounted: 实例挂载到DOM上之后被调用，这时候可以进行DOM相关的操作。
5. beforeUpdate: 数据更新时调用，但是在虚拟DOM重新渲染和打补丁之前。
6. updated: 由于数据更改导致的虚拟DOM重新渲染和打补丁，组件DOM已经更新。
7. beforeDestroy: 实例销毁之前调用，实例仍然完全可用。
8. destroyed: Vue实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。

示例代码：

<template>
  <div>
    <h1 v-text="message"></h1>
    <button @click="updateMessage">Update Message</button>
    <div v-if="isEditing">
      <input v-model="message">
    </div>
    <div v-else>
      <p>{{ message }}</p>
    </div>
    <button @click="toggleEdit">{{ isEditing ? 'Save' : 'Edit' }}</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      isEditing: false
    }
  },
  methods: {
    updateMessage() {
      this.message = 'Updated message!';
    },
    toggleEdit() {
      this.isEditing = !this.isEditing;
    }
  },
  beforeCreate() {
    console.log('beforeCreate: Data and events are not available.');
  },
  created() {
    console.log('created: Data and events are