说几个常见的vue指令

Vue.js 提供了许多内置的指令（也称为绑定语法），它们帮助开发者将数据绑定到HTML元素上，并处理一些常见的交互行为。以下是几个常用的Vue指令：

1. `v-bind` 或者 `:` (冒号)：用于数据绑定，将Vue实例的数据属性绑定到HTML元素的属性上，如`<div v-bind:class="{'active': isActive}"></div>`。

2. `v-if`：条件渲染指令，如果表达式为真，则显示元素，为假则隐藏。

3. `v-for`：迭代指令，遍历数组或对象，常用在列表渲染中，例如 `<ul v-for="(item, index) in items" :key="index">...</ul>`。

4. `v-model`：双向数据绑定，主要用于表单输入元素，比如`<input v-model="message">`，用户的输入会实时同步到数据模型。

5. `v-on` 或 `@`: 事件监听器，用于添加自定义事件处理器，如`<button v-on:click="doSomething"></button>`。

6. `v-show` 和 `v-hide`：用于控制元素的显示和隐藏，但是它们不会更新DOM，只是改变CSS样式。

7. `v-html`：允许安全地插入HTML内容，需谨慎使用以防XSS攻击。

8. `v-bind:key`：在使用`v-for`时设置唯一键，有助于优化列表渲染性能，避免不必要的DOM操作。

相关问题

vue生命周期有几个

Vue的生命周期有8个阶段：

1. beforeCreate（创建前）：在实例初始化之后，创建之前被调用。此时，数据观测和事件配置尚未开始。

2. created（创建完成）：在实例创建完成后被调用。此时，实例已完成数据观测，属性和方法的运算，但尚未挂载到DOM上。

3. beforeMount（挂载前）：在挂载开始之前被调用。此时，模板编译已完成，但尚未将编译结果替换到宿主DOM中。

4. mounted（挂载完成）：在DOM挂载完成后被调用。此时，实例已经挂载到DOM上，可以进行DOM操作。

5. beforeUpdate（更新前）：在数据更新之前被调用。此时，虚拟DOM已经重新渲染，并准备应用差异更新到DOM上。

6. updated（更新完成）：在数据更新完成后被调用。此时，Vue实例的数据已经更新，DOM也已经重新渲染。

7. beforeDestroy（销毁前）：在实例销毁之前被调用。此时，实例仍然完全可用。

8. destroyed（销毁完成）：在实例销毁完成后被调用。此时，Vue实例的所有指令都已解绑，事件监听器也已移除，所有子实例也被销毁。

以上是Vue的生命周期阶段，开发者可以在各个阶段的钩子函数中执行相应的逻辑操作。

vue自定义指令写法

Vue自定义指令的写法如下：

1. 在Vue实例中，使用`Vue.directive()`方法来注册自定义指令。该方法接受两个参数，第一个参数是指令的名称，第二个参数是一个对象，包含了指令的相关配置。

2. 在配置对象中，可以定义如下几个钩子函数：
- `bind`: 指令绑定到元素时触发。
- `inserted`: 元素插入到父节点时触发。
- `update`: 组件更新时触发。
- `componentUpdated`: 组件更新完成时触发。
- `unbind`: 指令与元素解绑时触发。

3. 在钩子函数内部，可以通过`el`参数获取到当前绑定指令的DOM元素，通过`binding`参数获取到指令的相关信息，例如传入的值、修饰符等。

下面是一个示例的Vue自定义指令的写法：

Vue.directive('my-directive', {
  bind(el, binding) {
    // 指令绑定到元素时触发
    // el为当前绑定的DOM元素
    // binding为指令的相关信息
  },
  inserted(el, binding) {
    // 元素插入到父节点时触发
  },
  update(el, binding) {
    // 组件更新时触发
  },
  componentUpdated(el, binding) {
    // 组件更新完成时触发
  },
  unbind(el, binding) {
    // 指令与元素解绑时触发
  }
});