Vue 学习笔记 (四)：内置指令、自定义指令和生命周期

2024-01-14 15:37:57

内置指令

Vue.js 内置了许多有用的指令，可以简化你与 DOM 元素的交互。这些指令以 v- 开头，可以在模板中使用。

v-text 指令

v-text 指令用于设置元素的文本内容。它可以用来动态地改变元素的文本内容，例如根据数据的状态显示不同的信息。

<div id="app">
  <p v-text="message"></p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})

运行这段代码，你会看到一个包含文本 "Hello, Vue!" 的段落。

v-html 指令

v-html 指令用于设置元素的 HTML 内容。它可以用来动态地改变元素的 HTML 内容，例如根据数据的状态显示不同的组件。

<div id="app">
  <div v-html="htmlContent"></div>
</div>

new Vue({
  el: '#app',
  data: {
    htmlContent: '<p>Hello, Vue!</p>'
  }
})

运行这段代码，你会看到一个包含文本 "Hello, Vue!" 的段落。

v-cloak 指令

v-cloak 指令用于隐藏元素，直到 Vue 实例被创建。这可以防止在 Vue 实例创建之前显示未初始化的数据。

<div id="app">
  <p v-cloak>{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})

运行这段代码，你会看到一个空的段落。当 Vue 实例被创建后，段落会显示文本 "Hello, Vue!"。

v-once 指令

v-once 指令用于只渲染元素一次。这可以提高性能，尤其是在元素的内容不会改变的情况下。

<div id="app">
  <p v-once>{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})

运行这段代码，你会看到一个包含文本 "Hello, Vue!" 的段落。当 Vue 实例被创建后，段落不会改变。

v-pre 指令

v-pre 指令用于阻止 Vue.js 编译元素。这可以用来在模板中包含未经编译的 HTML 代码，例如第三方组件的代码。

<div id="app">
  <div v-pre><third-party-component></third-party-component></div>
</div>

new Vue({
  el: '#app'
})

运行这段代码，你会看到一个包含第三方组件的段落。Vue.js 不会编译这个段落，所以第三方组件可以正常工作。

自定义指令

除了内置指令外，你还可以创建自己的自定义指令。自定义指令可以让你扩展 Vue.js 的功能，创建更强大的应用程序。

要创建自定义指令，你需要使用 Vue.directive() 方法。这个方法接受两个参数：指令的名称和一个对象，用于定义指令的行为。

Vue.directive('my-directive', {
  bind(el, binding) {
    // 指令被绑定到元素时调用
  },
  inserted(el, binding) {
    // 指令被插入到元素时调用
  },
  update(el, binding) {
    // 指令被更新时调用
  },
  componentUpdated(el, binding) {
    // 组件更新时调用
  },
  unbind(el, binding) {
    // 指令被解除绑定时调用
  }
})

在上面的示例中，我们创建了一个名为 my-directive 的自定义指令。这个指令有五个生命周期钩子函数：bind、inserted、update、componentUpdated 和 unbind。这些函数在指令的不同阶段被调用。

你可以在模板中使用自定义指令，就像使用内置指令一样。

<div id="app">
  <p v-my-directive></p>
</div>

new Vue({
  el: '#app'
})

运行这段代码，你会看到一个包含文本 "Hello, Vue!" 的段落。

生命周期

Vue.js 组件的生命周期是一个对象，它定义了组件的不同阶段。这些阶段包括：

beforeCreate: 在组件实例被创建之前调用。
created: 在组件实例被创建之后调用。
beforeMount: 在组件的模板被挂载到 DOM 之前调用。
mounted: 在组件的模板被挂载到 DOM 之后调用。
beforeUpdate: 在组件的 props 或 data 发生变化之前调用。
updated: 在组件的 props 或 data 发生变化之后调用。
beforeDestroy: 在组件被销毁之前调用。
destroyed: 在组件被销毁之后调用。

你可以使用生命周期钩子函数来在组件的不同阶段执行特定的任务。例如，你可以在 mounted 钩子函数中执行组件的初始化逻辑，在 updated 钩子函数中执行组件的更新逻辑，在 destroyed 钩子函数中执行组件的销毁逻辑。

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    // 在组件的模板被挂载到 DOM 之后调用
    console.log('组件已挂载')
  },
  updated() {
    // 在组件的 props 或 data 发生变化之后调用
    console.log('组件已更新')
  },
  destroyed() {
    // 在组件被销毁之前调用
    console.log('组件已销毁')
  }
}