Vue.js 中常用的指令

最新推荐文章于 2024-05-06 20:52:53 发布
最新推荐文章于 2024-05-06 20:52:53 发布
阅读量670 收藏 9
点赞数 17
分类专栏： 前端 文章标签： vue.js flutter 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42087317/article/details/137344976
版权

v-html：

用于将变量的值作为 HTML 解析并插入到 DOM 中。

  1. 渲染 HTML：使用 v-html 可以直接将变量中的 HTML 字符串渲染到页面上。
  2. 警告：由于 v-html 涉及直接操作 DOM，因此需要谨慎使用。确保你信任的内容才能够被渲染，以防止XSS（跨站脚本攻击）等安全问题。
  3. 动态更新：如果变量中的 HTML 内容发生了变化，那么页面上相应的 HTML 结构也会随之更新。
  4. 双花括号插值不起作用：在模板插值中（例如 {{ htmlContent }}），Vue.js 默认会将输出的文本转义，防止 XSS攻击。但是，在使用 v-html 指令时，Vue.js 会信任你提供的 HTML 字符串，不进行转义处理。
  5. 性能考虑：由于需要解析 HTML 字符串，v-html 的性能相比普通文本插值会稍微慢一些。因此，尽量避免在大量元素上使用该指令，以减少性能开销。

示例：
假设你的 Vue 实例中有一个变量 htmlContent 包含了一个带有样式的段落：

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

<script>
export default {
  data() {
    return {
      htmlContent: '<p style="color: red;">这是一个带有样式的段落</p>'
    };
  }
};
</script>

v-html 将会把 htmlContent 中的 HTML 解析并插入到 DOM 中，显示为一个带有红色文字的段落。

v-show：

根据表达式的真假值，控制元素的显示与隐藏。
v-show 是 Vue.js 中的一个指令，用于根据条件来显示或隐藏元素。与 v-if 不同的是，v-show 不会销毁和重新创建 DOM 元素，而是通过 CSS 的 display 属性来控制元素的显示或隐藏状态。

下面是关于 v-show 指令的一些重要特性和使用注意事项：

  1. 根据条件显示/隐藏元素：通过将 v-show 指令添加到元素上，并将其值设置为一个表达式，可以根据该表达式的真假状态来决定元素是否显示。
  2. 不会销毁和重新创建 DOM 元素：与 v-if 不同，v-show 控制的元素在切换显示/隐藏时不会被销毁和重新创建。它只是简单地切换元素的 CSS display 属性。
  3. 性能考虑：由于 v-show 控制的元素在切换状态时只涉及 CSS 样式的改变，而不是 DOM 的重新渲染，因此在频繁切换显示/隐藏状态的情况下，v-show 比 v-if 性能更好。
  4. 注意事项：由于 v-show 实际上是通过 CSS 控制元素的显示状态，因此该元素始终存在于 DOM 中。如果你希望在某些情况下完全移除元素，以节省性能和资源，应该使用 v-if。

示例：

假设你有一个按钮，点击按钮时切换一个提示框的显示状态。你可以使用 v-show 来实现这个功能：

<template>
  <div>
    <button @click="toggleTooltip">Toggle Tooltip</button>
    <div v-show="showTooltip" class="tooltip">This is a tooltip</div>
  </div>
</template>

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

<style scoped>
.tooltip {
  display: none; /* 默认隐藏 */
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

在这个例子中，点击按钮会触发 toggleTooltip 方法，该方法会切换 showTooltip 变量的值，从而控制提示框的显示状态。v-show 指令根据 showTooltip 的值来决定是否显示提示框，而不会销毁和重新创建 DOM 元素。

v-if / v-else：

v-if 根据表达式的真假值，有条件地渲染 DOM。
v-else 在 v-if 条件不满足时渲染。
v-if 和 v-else 是 Vue.js 中用于条件渲染的指令，用于在满足条件时显示不同的内容。v-if 用于添加一个条件块，而 v-else 则用于表示与之前的 v-if 相对应的否定条件块。

下面是关于 v-if 和 v-else 指令的一些重要特性和使用注意事项：

  1. 条件渲染：通过 v-if 和 v-else 可以根据条件来渲染不同的内容或组件。
  2. 只有一个元素：在使用 v-else 时，它必须直接跟在带有 v-if 的元素之后，并且它们共享相同的父元素。
  3. 多个条件：你也可以使用 v-else-if 来添加额外的条件块，依次进行多条件判断。
  4. 性能考虑：当条件不满足时，v-if 控制的元素及其子组件将不会被渲染到 DOM 中，从而节省性能。而 v-else 则会根据前面的 v-if 条件来决定是否显示。
  5. 动态更新：当条件发生变化时，Vue.js 会自动重新渲染相应的内容，根据新的条件决定显示哪个块。

示例：

假设你需要根据用户的登录状态来显示不同的内容，可以使用 v-if 和 v-else 实现：

<template>
  <div>
    <div v-if="isLoggedIn">
      <p>Welcome, {{ username }}!</p>
    </div>
    <div v-else>
      <p>Please log in to continue.</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      username: ''
    };
  },
  created() {
    // 模拟用户登录状态
    setTimeout(() => {
      this.isLoggedIn = true;
      this.username = 'JohnDoe';
    }, 2000);
  }
};
</script>

在这个例子中，根据 isLoggedIn 变量的值来判断用户是否已登录，从而展示不同的内容。在 created 钩子中模拟用户登录状态的改变，2 秒后用户登录成功，页面会动态更新相应的条件块展示不同内容。

v-on：

  • 用于监听 DOM 事件，并在触发时执行指定的方法。
  • 可以使用缩写 @，例如 @click=“handleClick”

v-on 是 Vue.js 中用于监听 DOM 事件并在事件触发时执行相应方法的指令。它的作用是将 Vue 实例中的方法与 HTML 元素的事件进行绑定，以便在事件触发时执行相应的逻辑。

使用 v-on 指令的语法是 v-on:事件名 或者简写形式 @事件名。你可以在 Vue 实例中定义一个方法，然后使用 v-on 将这个方法绑定到 HTML 元素的事件上。

下面是一个简单的例子，展示了如何使用 v-on 将 Vue 实例中的方法与按钮的 click 事件进行绑定：

<template>
  <!-- 使用 v-on 绑定 click 事件 -->
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
};
</script>

在这个例子中，handleClick 是 Vue 实例中的一个方法，它被绑定到了按钮的 click 事件上。当用户点击按钮时，handleClick 方法会被执行，弹出一个提示框显示 “Button clicked!”。

除了简单的点击事件之外，v-on 还可以监听其它类型的事件，例如 mouseenter、mouseleave、input 等等。你可以使用 v-on 来监听任何合法的 DOM 事件，并在事件触发时执行相应的逻辑。

总之，v-on 是 Vue.js 中非常重要和常用的指令之一，它使得在 Vue 应用中处理 DOM 事件变得非常简单和灵活。

v-bind：

  • 用于动态绑定 HTML 属性或组件 prop 到 Vue 实例的数据。
  • 可以使用缩写 :，例如 :href=“url”

v-bind 是 Vue.js 中用于动态绑定 HTML 元素属性的指令。它的作用是将 Vue 实例中的数据绑定到 HTML 元素的某个属性上，使得该属性的值可以根据数据的变化而变化。

在 Vue.js 中，你可以使用 v-bind 来动态地设置 HTML 元素的属性，例如 src、href、class、style 等等。使用 v-bind 指令的语法是 v-bind:属性名 或者简写形式 :属性名。

下面是一个简单的例子，展示了如何使用 v-bind 将 Vue 实例中的数据动态地绑定到 HTML 元素的 href 属性上：

<template>
  <!-- 使用 v-bind 绑定 href 属性 -->
  <a :href="url">Click me</a>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com'
    };
  }
};
</script>

在这个例子中，url 是 Vue 实例中的一个数据属性，它被绑定到了 a 标签的 href 属性上。当 url 的值发生变化时，a 标签的 href 属性也会相应地更新。

另外，v-bind 还可以与动态属性名和对象语法一起使用，使得属性的绑定更加灵活和动态化。例如：

<template>
  <!-- 使用动态属性名和对象语法 -->
  <div :[dynamicAttr]="value">Dynamic Attribute</div>
</template>

<script>
export default {
  data() {
    return {
      dynamicAttr: 'title',
      value: 'Hello, Vue!'
    };
  }
};
</script>

在这个例子中，dynamicAttr 是一个动态属性名，它的值会根据 Vue 实例中的数据动态变化。通过使用 :[dynamicAttr]，可以动态地绑定属性名，并将其值设置为 value。

总之，v-bind 是 Vue.js 中非常重要和常用的指令之一，它使得在 Vue 应用中动态绑定 HTML 元素属性变得非常简单和灵活。

v-for：

  • 基于源数据多次渲染元素或模板块。

v-for 是 Vue.js 中用于循环渲染数组或对象的数据的指令。它的作用是根据源数据生成列表或者每个元素，实现对数据的重复渲染。

在 Vue.js 中，你可以使用 v-for 指令来遍历数组、对象或者数字范围，并根据每个项生成相应的内容。v-for 指令的语法是 v-for=“item in items”，其中 item 是当前遍历的项，items 是要遍历的数据源。

下面是一个简单的例子，展示了如何使用 v-for 遍历数组并生成一个有序列表：

<template>
  <ul>
    <!-- 使用 v-for 遍历数组 -->
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange']
    };
  }
};
</script>

在这个例子中，items 是一个包含水果名称的数组，在模板中使用

v-for=“(item, index) in items”

遍历数组，并将每个水果名称显示在一个列表项中。:key=“index” 用于为每个列表项提供唯一的 key，以便 Vue 可以高效地更新列表。

除了遍历数组之外，你还可以使用 v-for 来遍历对象的属性。例如：

<template>
  <ul>
    <!-- 使用 v-for 遍历对象 -->
    <li v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'Alice',
        age: 30,
        email: 'alice@example.com'
      }
    };
  }
};
</script>

在这个例子中，user 是一个包含用户信息的对象，通过

v-for=“(value, key) in user”

遍历对象的属性，并将每个属性的键值对显示在列表项中。

总之，v-for 是 Vue.js 中非常常用的指令之一，它使得在 Vue 应用中动态地生成列表或者重复元素变得非常简单和灵活。

v-model：

  • 用于在表单控件元素上创建双向数据绑定。

v-model 是 Vue.js 中用于实现表单输入元素与 Vue 实例数据之间双向绑定的指令。它可以在表单元素（比如 <input>、<textarea>、<select>）上创建双向数据绑定，使得当表单元素的值发生变化时，Vue 实例中相应的数据也会更新，反之亦然。

使用 v-model 指令的语法是 v-model=“data”，其中 data 是 Vue 实例中的一个属性，它会与表单元素的值进行双向绑定。

下面是一个简单的例子，展示了如何使用 v-model 实现表单输入框与 Vue 实例数据的双向绑定：

<template>
  <div>
    <!-- 使用 v-model 实现双向绑定 -->
    <input type="text" v-model="message">
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '' // 初始值为空字符串
    };
  }
};
</script>

在这个例子中，message 是 Vue 实例中的一个属性，它与输入框的值进行双向绑定。当用户在输入框中输入文字时，message 的值会随之更新，同时在页面上显示的 Message 也会实时更新。反之亦然，如果通过代码改变了 message 的值，输入框的值也会相应地更新。

除了文本输入框之外，v-model 还可以用于 <textarea> 和 <select> 元素，以及一些特殊的输入类型（例如复选框和单选按钮），实现与 Vue 实例数据的双向绑定。

总之，v-model 是 Vue.js 中非常强大和常用的指令之一，它简化了表单数据的处理，使得在 Vue 应用中实现双向数据绑定变得非常方便。

补充内容：

v-if、v-else 和 v-show 是 Vue.js 中用于条件渲染的三种指令，它们的主要区别在于渲染方式和性能表现。

v-if：

渲染方式：v-if 是一种"真正"的条件渲染指令，它会根据条件在 DOM 中创建或销毁元素及其组件。当条件为真时，元素及其子组件会被渲染到 DOM 中；当条件为假时，元素及其子组件会被从 DOM 中移除。
性能表现：由于 v-if 控制的元素及其子组件的创建和销毁是真实的 DOM 操作，当条件频繁变化时，会涉及到大量的 DOM 操作，可能会影响性能。

v-else：

配合使用：v-else 是用于和 v-if 搭配使用的，表示与之前的 v-if 相对应的否定条件块。
位置要求：v-else 必须直接跟在带有 v-if 的元素之后，并且它们共享相同的父元素。

v-show：

渲染方式：v-show 也是一种条件渲染指令，但它不会真正地销毁和创建元素，而是通过 CSS 的 display 属性来控制元素的显示或隐藏状态。
性能表现：由于 v-show 只是简单地切换元素的 CSS display 属性，而不涉及 DOM 的创建和销毁，因此在频繁切换显示/隐藏状态时，v-show 的性能通常比 v-if 更好。

选择使用 v-if、v-else 还是 v-show 取决于具体的场景和需求：
  • 如果需要在条件变化时频繁添加和移除 DOM 元素，可以使用 v-if 和 v-else，但要注意可能带来的性能开销。
  • 如果元素在页面生命周期内频繁地切换显示/隐藏状态，而且元素的 DOM 结构较为简单，可以考虑使用 v-show 来提升性能。
  • 综上所述，根据实际需求选择适合的条件渲染指令可以有效地优化 Vue.js 应用的性能。

在 Vue.js 3 中使用指令

这些指令和 Vue.js 2 中的用法基本相同，但有一些细微的变化和一些新特性。

  1. v-html: 在 Vue.js 3 中，v-html 仍然用于将字符串作为 HTML 插入到 DOM 中，但是在使用时需要小心，因为它会导致潜在的 XSS 攻击。在 Vue.js 3 中，为了提高安全性，需要通过 v-html 指令绑定的内容必须经过 DomSanitizer 处理。另外，Vue.js 3 中使用了 Composition API，可以在 setup 函数中直接使用 createVNode 创建并返回一个 VNode 对象来代替使用 v-html。

  2. v-show / v-if / v-else: 这些指令在 Vue.js 3 中的用法与 Vue.js 2 基本相同。v-show 用于根据表达式的值是否为真来显示或隐藏元素，而 v-if 则是根据表达式的真假条件来添加或销毁元素。v-else 用于在 v-if 的条件不满足时显示。在 Vue.js 3 中，这些指令的实现可能会更加高效，但用法基本保持不变。

  3. v-on: 在 Vue.js 3 中，v-on 仍然用于监听 DOM 事件，并在事件触发时执行相应的方法。与 Vue.js 2 不同的是，在 Vue.js 3 中，推荐使用更短的 @ 符号来代替 v-on，例如 @click 代替 v-on:click。此外，Vue.js 3 引入了 v-model 的改进，使其更加灵活和可定制。

  4. v-bind: 在 Vue.js 3 中，v-bind 仍然用于动态地绑定 HTML 特性。与 Vue.js 2 不同的是，在 Vue.js 3 中，推荐使用更简洁的 : 符号来代替 v-bind，例如 :class 代替 v-bind:class。此外，Vue.js 3 中的模板编译器会更加智能，能够在需要时自动添加 key。

  5. v-for: 在 Vue.js 3 中，v-for 用于循环渲染数组或对象的数据，与 Vue.js 2 中的用法基本相同。然而，Vue.js 3 的性能和响应性可能会有所提升。

总之，尽管 Vue.js 3 做了一些改进和优化，但这些常见指令的基本用法和功能在两个版本中基本上是一致的，开发者可以基本上按照之前的习惯来使用它们。

小白话
关注
专栏目录
Vue.js指令
Double6688的博客
09-02 228
除了内置指令外，Vue.js也提供了方法让我们可以注册自定义指令，以便封装对DOM元素的重复处理行为，提高代码复用率。本小节主要说明了如何创建、注册自定义指令，以及讲述指令的相关属性钩子函数，更深一步地了解指令在Vue.js中起到的作用。id是指令的唯一标识，定义对象则是指令的相关属性及钩子函数。我们在注册指令的同时，可以传入definition定义对象，对指令赋予一些特殊的功能。主要介绍部分常见指令的使用及场景以及自定义指令的开发和指令相关的参数。unbind：指令从元素上解绑时调用，只调用一次。
Vue.js 指令
m0_51281306的博客
04-10 1048
指令的本质就是 HTML 自定义属性Vue.js 的指令就是以 v- 开头的自定义属 性内容处理• v-once 指令 内容处理 • v-text 指令 • v-html 指令v-once 指令v-once 指令 • 使元素内部的插值表达式只生效一次。 v-text 指令v-text 指令 • 元素内容整体替换为指定纯文本数据。 v-html 指令 • 元素内容整体替换为指定的 HTML 文本。 属性绑定 • v-bind 指令 ...
Vue.js学习系列（五）---vuejs指令
bwf_erg的博客
02-22 629
使用vuejs编写之前，我们要先了解一下vuejs的指令。 Vuejs的指令带有前缀”v-”,表示它们是 Vue.js 提供的特殊属性。可能你已经猜到了，它们会在渲染过的 DOM 上应用特殊的响应式行为。 这里我们给大家举几个关于指令的例子。 1.v-bind: 这个指令的简单来说：将这个元素节点的 title 属性和 Vue 实例的 message 属性绑定到一起。
vuejs 指令的使用
ghost_violets的博客
10-24 442
前面我们已经学习了 vue 的安装和基本用法，这次我们来学一下指令的基本使用 vuejs 提供一个叫做指令： 在 vuejs 以 v-开头的标签叫做指令，扩展html本身标签的能力 1. 指令要作为元素的属性使用 2. 指令提供一个js执行环境 v-text 更新元素的 textContent，如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值（官网解释）。 ...
VueJS常用指令
TERMINUSL的博客
05-10 536
（1）v-cloak v-cloak的作用是防止插值在数据没有加载出来的时候闪烁，但是需要配合css中的属性选择器来使用 <div id="app"> <h2 v-cloak>{{msg}}</h2> </div> <script> new Vue({ el:"#app", data:{ msg:"好啊" } }) <.
vue.global.js，Vue.js 框架的核心文件之一
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用，它提供了全局范围的 Vue 构造函数和一些全局...
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
vue.min.js&vue.min.js&vue.common.js&vue.esm.js&vue.runtime.js等 真实资源共计14个js
04-22
Vue.js 是一个流行的轻量级前端JavaScript框架，用于构建用户界面。它采用了声明式的数据绑定和组件化的设计，使得开发过程更加高效且易于维护。在提供的压缩包中，包含了多种不同版本的Vue.js库，这些版本各有其...
Vue.js前端 JavaScript 框架
03-15
高效灵活：Vue.js 支持自定义指令和过滤器，具有很高的灵活性，并且可以轻松集成到现有项目中。 支持服务器端渲染：Vue.js 可以通过服务器端渲染实现更快的页面加载速度和更好的 SEO。 Vue.js 支持多种方式的使用...
Vue.js前端开发实战-源代码.zip
07-07
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发并维护，以其易学易用、高性能、灵活的组件系统以及强大的生态系统而受到广大开发者喜爱。本资源"Vue.js前端开发实战-源代码.zip"是针对Vue.js的学习资料，...
Vuejs之【内部指令】
songxiugongwang的博客
11-14 154
Vuejs之【内部指令】 v-text   读取文本不能读取html标签，解析文本 　　使用{{XXX}}这种情况是有弊端的，当我们网速很慢或者javascrit出错时，会暴露我们的{{XXX}}。v-text就是解决这个问题的。 v-html  能读取html标签，解析html标签 　　双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。 ...
VueJS 常用系统指令
少营营的博客
07-12 395
VueJS 常用系统指令 1. v-on:（等同于@） 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码 2. v-on:click（等同于@click） demo2.html 【需求】：点击按钮事件，改变message的值 <!DOCTYPE html> <html> <head> ...
vuejs常用指令_vuejs指令详解
weixin_42376799的博客
01-13 494
v-ifv-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中，代码如下：Hello!var exampleVM2 = new Vue({el: '#example-2',data: {greeting: true}})由于v-if是一个指令，需要将它添加到一个元素上。但是如...
Vue.js
wuxinwudai的专栏
06-26 120
一、 v-model ： number 参数：将输入自动转为 Number 类型 lazy 参数：将数据改变到 change 事件中发生 debounce 参数：设置一个最小延时 二、v-for &amp;amp;amp;amp;amp;amp;lt;ul id=&amp;amp;amp;amp;amp;quot;el&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp
Vue中v-html用法以及指令汇总
m0_71088505的博客
07-17 1151
cookie安全
深入了解Vue 3.0中的v-html指令：用法、安全性与最佳实践
最新发布
李长渊的博客
05-06 4541
深入了解Vue 3.0中的v-html指令：用法、安全性与最佳实践
vue常用指令(v-html)
CAUC_lin的博客
01-24 1528
可以看到，v-html 标签可以解析链接标签，而v-text不可以。
如何动态渲染HTML内容？用v-html！
你若盛开，清风自来
04-11 1793
本文将介绍Vue中的v-html指令，以及它在动态渲染HTML内容中的应用。Vue中的v-html指令是动态渲染HTML内容的关键，但使用时需要注意安全性。了解v-html的使用方法和注意事项对于Vue开发者来说至关重要。
v-html指令的用法
FGGIT的博客
01-29 744
v-html指令的用法
Vue.js语法与常用指令详解
Vue.js是一个流行的JavaScript框架，以其轻量级、高效的数据绑定和组件化特性而受到开发者们的广泛欢迎。相较于Angular.js，Vue.js的API设计更为简洁，使得初学者能更快地掌握其核心概念。 在Vue.js中，数据是驱动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值