首页 前端知识 vue3 指令详解

vue3 指令详解

2024-01-31 12:01:37 前端知识 前端哥 398 707 我要收藏

在这里插入图片描述

系列文章目录

TypeScript 从入门到进阶专栏


文章目录

  • 系列文章目录
  • 前言
  • 一、v-model (双向绑定功能)
  • 二、v-bind(用于将一个或多个属性绑定到元素的属性或组件的 prop)
  • 三、v-if、v-else、v-else-if(用于根据条件选择性地渲染元素)
  • 四、v-show(根据条件显示或隐藏元素,通过改变元素的 CSS 的 display 属性)
  • 五、v-for(用于基于数据源循环渲染元素列表)
  • 六、v-on(用于绑定事件监听器,可以使用简写的语法 @)
  • 七、v-text(用于将数据绑定到元素的文本内容) (vue3已废弃)
  • 八、v-html(将数据作为 HTML 解析并渲染)
  • 九、v-pre(将元素或组件直接渲染为静态内容,不会被当成模板编译)


前言

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>
  1. 在父组件中,你需要使用 .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 不再支持同时使用 keyindex 参数,如果需要使用索引值,可以通过在循环前手动增加一个计数器变量。

六、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');
  1. 绑定动态事件名:
<button v-on:[eventName]="handleClick">点击按钮</button>
const app = Vue.createApp({
  data() {
    return {
      eventName: 'click'
    }
  },
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    }
  }
});
app.mount('#app');
  1. 传递事件参数:
<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');
  1. 绑定动态事件名:
<button v-on:[eventName]="handleClick">点击按钮</button>
const app = Vue.createApp({
  data() {
    return {
      eventName: 'click'
    }
  },
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    }
  }
});
app.mount('#app');
  1. 传递事件参数:
<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 可能会导致代码不易维护和调试。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/928.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!