vue3 指令详解

系列文章目录

TypeScript 从入门到进阶专栏

---

---

前言

Vue 中的指令是用来操作DOM元素的特殊属性，它们可以在模板中使用，并且通过Vue实例的指令选项进行自定义。

一、v-model （双向绑定功能）

Vue 3 中使用 v-model 的方式与 Vue 2 有所不同。

在 Vue 2 中，我们可以通过在组件上使用 v-model 指令来实现双向绑定。例如：

<child-component v-model="data"></child-component>

而在 Vue 3 中，v-model 指令被移除了，取而代之的是一个新的命名约定。

1. 在子组件中，你需要声明一个 modelValue 属性，用于接收传递给子组件的值，并且在需要更新值的时候，触发一个名为 update:modelValue 的自定义事件。

// 子组件
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script>
export default {
  props: ['modelValue'],
};
</script>

2. 在父组件中，你需要使用 .sync 修饰符来实现双向绑定。这样做可以将一个 prop 的更新转换为更新其父级的值。

<!-- 父组件 -->
<template>
  <child-component :modelValue.sync="data"></child-component>
</template>

<script>
export default {
  data() {
    return {
      data: ''
    }
  }
};
</script>

这样就可以在父组件中使用 v-model 的方式进行双向绑定了。

<child-component v-model="data"></child-component>

除了这种方式，你也可以手动创建一个绑定到 modelValue 的计算属性，然后通过 @input 事件手动更新父级的值。

<!-- 父组件 -->
<template>
  <child-component :model-value="data" @update:model-value="data = $event" />
</template>

<script>
export default {
  data() {
    return {
      data: ''
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <input :value="modelValue" @input="$emit('update:model-value', $event.target.value)" />
</template>

<script>
export default {
  props: ['modelValue'],
};
</script>

二、v-bind(用于将一个或多个属性绑定到元素的属性或组件的 prop)

使用 v-bind 来动态绑定属性或者指令到一个表达式上。使用 v-bind 的语法如下：

<template>
  <div>
    <button v-bind:disabled="isDisabled">Click me</button>
    <input v-bind:value="username" />
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const isDisabled = ref(false);
    const username = ref('');

    return {
      isDisabled,
      username,
    };
  },
};
</script>

在上面的例子中，我们使用了 v-bind 指令来绑定按钮的 disabled 属性和输入框的 value 属性到一个变量上。这些变量使用了 Vue 3 的 composition API 中的 ref 函数来创建可响应式的数据。

v-bind:disabled=“isDisabled” 表示将 isDisabled 变量的值绑定到按钮的 disabled 属性上。当 isDisabled 变量的值为 true 时，按钮将被禁用。

v-bind:value=“username” 表示将 username 变量的值绑定到输入框的 value 属性上。输入框中显示的文本将随着 username 变量的值而变化。

总之，Vue 3 中的 v-bind 用法和 Vue 2 中的用法基本相同，但是配合使用 composition API 来创建可响应式数据。

---

三、v-if、v-else、v-else-if(用于根据条件选择性地渲染元素)

v-if指令用于根据条件来渲染元素，它需要一个表达式作为参数，如果表达式的值为真，则渲染该元素，如果为假，则不渲染。

v-else指令用于指定一个条件为假时渲染的元素，它必须紧跟在v-if指令之后，而且它们必须属于同一个父元素。

v-else-if指令用于指定一个额外的条件，它必须紧跟在v-if或v-else-if指令之后，而且它们必须属于同一个父元素。v-else-if可以多次使用，用于指定多个条件，当前一个条件为假时，会检查下一个条件。

以下是一个例子，展示了如何使用v-if、v-else和v-else-if指令：

<template>
  <div>
    <p v-if="condition1">条件1为真</p>
    <p v-else-if="condition2">条件2为真</p>
    <p v-else>条件1和条件2都为假</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      condition1: true,
      condition2: false
    }
  }
}
</script>

四、v-show（根据条件显示或隐藏元素，通过改变元素的 CSS 的 display 属性）

使用 v-show 指令来控制元素的显示与隐藏。v-show 的使用方式与 Vue 2 中相同。

你可以在一个元素上添加 v-show 指令，并将一个计算属性或者一个响应式的变量作为其值。这样，当计算属性的值或者变量的值为 true
时，元素将显示；当计算属性的值或者变量的值为 false 时，元素将隐藏。

下面是一个示例：

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div v-show="isVisible">This is a hidden element</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

在上面的示例中，初始时 div 元素是隐藏的。当点击按钮时，toggle 方法会将 isVisible 的值反转，从而控制 div 元素的显示与隐藏。

注意：v-show 只是简单地切换元素的 CSS 属性（display: none），而不是真正地从 DOM 中移除或添加元素。因此，如果频繁地切换显示和隐藏，可能会影响性能。如果需要频繁地切换显示和隐藏，可以考虑使用 v-if 指令。

五、v-for（用于基于数据源循环渲染元素列表）

Vue 中，使用 v-for 指令来循环渲染列表或数组的元素。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

在上面的例子中，我们使用 v-for 指令来循环渲染 items 数组中的每个元素。需要注意的是，我们为每个循环的元素指定了一个唯一的 key 值，这有助于 Vue 跟踪每个元素的身份，以便在进行列表更新时提高性能。

你还可以使用 index 参数访问当前元素在数组中的索引：

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

此外，还可以使用 v-for 指令循环渲染对象的属性：

<template>
  <div>
    <ul>
      <li v-for="(value, key) in user" :key="key">
        {{ key }}: {{ value }}
      </li>
    </ul>
  </div>
</template>

在上面的例子中，我们循环渲染了 user 对象的属性，key 代表属性名，value 代表属性值。

除了基本的循环渲染，v-for 还支持使用 of 关键字来替代 in 关键字：

<template>
  <div>
    <ul>
      <li v-for="item of items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

使用 of 关键字的语法更接近 JavaScript 的 for...of 循环。

注意：在 Vue 3 中，v-for 不再支持同时使用 key 和 index 参数，如果需要使用索引值，可以通过在循环前手动增加一个计数器变量。

六、v-on（用于绑定事件监听器，可以使用简写的语法 @）

使用v-on指令来监听DOM事件。v-on指令可以用于绑定内联事件处理函数或组件方法。

以下是一些v-on使用示例：

1. 绑定内联事件处理函数：

<button v-on:click="handleClick">点击按钮</button>

const app = Vue.createApp({
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    }
  }
});
app.mount('#app');

2. 绑定动态事件名：

<button v-on:[eventName]="handleClick">点击按钮</button>

const app = Vue.createApp({
  data() {
    return {
      eventName: 'click'
    }
  },
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    }
  }
});
app.mount('#app');

3. 传递事件参数：

<button v-on:click="handleClick('参数')">点击按钮</button>

const app = Vue.createApp({
  methods: {
    handleClick(param) {
      console.log('参数:', param);
    }
  }
});
app.mount('#app');

除了使用v-on指令，还可以使用@符号作为v-on的简写形式。

<button @click="handleClick">点击按钮</button>
```在Vue3中，可以使用v-on指令来监听DOM事件。v-on指令可以用于绑定内联事件处理函数或组件方法。

以下是一些v-on使用示例：

1. 绑定内联事件处理函数：
```html
<button v-on:click="handleClick">点击按钮</button>

const app = Vue.createApp({
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    }
  }
});
app.mount('#app');

2. 绑定动态事件名：

<button v-on:[eventName]="handleClick">点击按钮</button>

const app = Vue.createApp({
  data() {
    return {
      eventName: 'click'
    }
  },
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    }
  }
});
app.mount('#app');

3. 传递事件参数：

<button v-on:click="handleClick('参数')">点击按钮</button>

const app = Vue.createApp({
  methods: {
    handleClick(param) {
      console.log('参数:', param);
    }
  }
});
app.mount('#app');

除了使用v-on指令，还可以使用@符号作为v-on的简写形式。

<button @click="handleClick">点击按钮</button>

七、v-text（用于将数据绑定到元素的文本内容） （vue3已废弃）

使用 v-text 指令来设置元素的文本内容。

使用 v-text 指令的语法如下：

<div v-text="message"></div>

在上面的示例中，message 是一个 Vue 实例中的 data 属性，它将被渲染到 <div> 元素中作为文本内容。

与使用双大括号插值语法 {{ message }} 不同，v-text 指令会替换元素的全部文本内容，而不只是插入变量的值。这可能对于某些特定的用例更加灵活。

需要注意的是，在 Vue 3 中，v-text 指令已经被废弃，推荐使用双大括号插值语法 {{ message }} 来代替。在 Vue 3 中，你可以使用 v-text 指令来设置元素的文本内容。

使用 v-text 指令的语法如下：

<div v-text="message"></div>

在上面的示例中，message 是一个 Vue 实例中的 data 属性，它将被渲染到 <div> 元素中作为文本内容。

与使用双大括号插值语法 {{ message }} 不同，v-text 指令会替换元素的全部文本内容，而不只是插入变量的值。这可能对于某些特定的用例更加灵活。

需要注意的是，在 Vue 3 中，v-text 指令已经被废弃，推荐使用双大括号插值语法 {{ message }} 来代替。

八、v-html（将数据作为 HTML 解析并渲染）

我们可以使用v-html指令来渲染HTML内容。v-html指令允许我们将一个字符串作为HTML代码来动态地渲染到模板中。

使用v-html指令的语法如下：

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

其中，htmlContent是一个包含HTML代码的属性或变量。

需要注意的是，使用v-html指令存在安全风险。因为它会将HTML代码直接渲染到模板中，所以要确保渲染的内容是可信的。如果渲染的内容来自不可信的来源，可能会导致XSS攻击。

为了增加安全性，Vue 3还引入了一个新的API createApp来创建应用实例时可以配置compilerOptions中的isCustomElement属性，以防止未经验证的元素被渲染。例如：

import { createApp } from 'vue';

const app = createApp({
  // ...
});

app.config.compilerOptions.isCustomElement = (tag) => tag === 'my-custom-element';

这样，只有<my-custom-element>标签会被认为是安全的自定义元素，并进行渲染，其他未经验证的标签将被忽略。在Vue 3中，我们可以使用v-html指令来渲染HTML内容。v-html指令允许我们将一个字符串作为HTML代码来动态地渲染到模板中。

使用v-html指令的语法如下：

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

其中，htmlContent是一个包含HTML代码的属性或变量。

需要注意的是，使用v-html指令存在安全风险。因为它会将HTML代码直接渲染到模板中，所以要确保渲染的内容是可信的。如果渲染的内容来自不可信的来源，可能会导致XSS攻击。

为了增加安全性，Vue 3还引入了一个新的API createApp来创建应用实例时可以配置compilerOptions中的isCustomElement属性，以防止未经验证的元素被渲染。例如：

import { createApp } from 'vue';

const app = createApp({
  // ...
});

app.config.compilerOptions.isCustomElement = (tag) => tag === 'my-custom-element';

这样，只有<my-custom-element>标签会被认为是安全的自定义元素，并进行渲染，其他未经验证的标签将被忽略。

九、v-pre（将元素或组件直接渲染为静态内容，不会被当成模板编译）

在 Vue 3 中，可以使用 v-pre 指令来跳过编译过程，将元素或组件直接渲染为静态内容，不会被当成模板编译。这样可以提高性能，特别是对于静态内容较多的场景。

使用方式很简单，只需要在元素或组件上添加 v-pre 属性即可，如下所示：

<template>
  <div v-pre>
    这是一个静态内容，会直接输出到页面，不会被编译
  </div>
</template>

在上述代码中，<div> 元素的内容会直接输出到页面，不会被编译成 Vue 的模板。这在一些不需要动态更新的内容上非常有用。

需要注意的是，v-pre 只能用在元素或组件上，不能在表达式或指令中使用。在实际开发中，应该合理使用 v-pre，避免滥用，因为滥用 v-pre 可能会导致代码不易维护和调试。在 Vue 3 中，可以使用 v-pre 指令来跳过编译过程，将元素或组件直接渲染为静态内容，不会被当成模板编译。这样可以提高性能，特别是对于静态内容较多的场景。

使用方式很简单，只需要在元素或组件上添加 v-pre 属性即可，如下所示：

<template>
  <div v-pre>
    这是一个静态内容，会直接输出到页面，不会被编译
  </div>
</template>

在上述代码中，<div> 元素的内容会直接输出到页面，不会被编译成 Vue 的模板。这在一些不需要动态更新的内容上非常有用。

需要注意的是，v-pre 只能用在元素或组件上，不能在表达式或指令中使用。在实际开发中，应该合理使用 v-pre，避免滥用，因为滥用 v-pre 可能会导致代码不易维护和调试。