【Vue2从入门到精通】详解Vue.js的15种常用指令及其使用场景

已于 2023-08-24 17:21:44 修改
阅读量1.9k 收藏 20
点赞数 13
分类专栏： vue2从入门到精通 文章标签： vue.js javascript 前端 vue指令 vue从入门到精通
于 2023-03-24 17:17:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010494753/article/details/129715207
版权

文章目录


在这里插入图片描述

✍创作者：全栈弄潮儿
🏡 个人主页： 全栈弄潮儿的个人主页
🏙️ 个人社区，欢迎你的加入：全栈弄潮儿的个人社区
📙 专栏地址：vue2从入门到精通

人工智能福利文章

前言

在这里插入图片描述
Vue.js 是一款流行的前端框架，它通过指令（Directive）实现了对 DOM 元素的控制，使得开发者能够更加方便地管理页面的展示和交互。下面是 Vue.js 常用指令及其使用场景：

1. v-text / {{ expression }}

v-text 指令可以用来将元素的文本内容设置为指定的值，{{ expression }} 语法也可以实现同样的效果。

使用方式如下：

<template>
  <div>
    <span v-text="message"></span>
    <span>{{ message }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
    }
  },
}
</script>

在上面的代码中，使用 v-text 指令和 {{ expression }} 语法将 message 数据对象中的值显示在元素中。

2.v-html

v-html 指令可以用来将元素的 HTML 内容设置为指定的值。

使用方式如下：

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

<script>
export default {
  data() {
    return {
      htmlContent: '<h1>Hello, Vue!</h1>',
    }
  },
}
</script>

在上面的代码中，使用 v-html 指令将 htmlContent 数据对象中的值作为 HTML 内容渲染在元素中。

3.v-bind

v-bind 指令可以用来动态地绑定 HTML 特性，例如元素的 class、style、href 等。通过将值绑定到 Vue.js 组件实例中的数据，可以轻松地动态更新元素。

使用方式如下：

<template>
  <div v-bind:class="{ active: isActive }">{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      message: 'Hello, Vue!',
    }
  },
}
</script>

在上面的代码中，使用 v-bind:class 指令将组件实例中的 isActive 数据动态地绑定到 div 元素的 class 中，根据 isActive 的值动态地添加或删除 active 类。

除了简写的 v-bind:class，也可以写成 v-bind:style、v-bind:href 等形式，根据需要动态地绑定元素的不同特性。

同时，为了简化模板语法，Vue.js 还提供了缩写的语法形式，在指令名前加上冒号即可，例如 :class=“{ active: isActive }”，与 v-bind:class=“{ active: isActive }” 效果相同。

4.v-on

v-on 指令可以用来绑定元素的事件或组件的自定义事件。

使用方式如下：

<template>
  <div>
    <button v-on:click="onClick">点击</button>
    <my-component v-on:custom-event="onCustomEvent"></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    'my-component': MyComponent,
  },
  methods: {
    onClick() {
      console.log('Button clicked');
    },
    onCustomEvent(payload) {
      console.log('Custom event triggered with payload:', payload);
    },
  },
}
</script>

在上面的代码中，使用 v-on 指令绑定了 button 元素的 click 事件和 my-component 组件的 custom-event 自定义事件，并通过 methods 属性定义了对应的事件处理函数。

5. v-model

v-model 指令可以用来在表单元素（如 input、select、textarea 等）和 Vue.js 组件实例中的数据之间建立双向绑定。这意味着当用户在表单元素中输入数据时，Vue.js 组件实例中的数据会自动更新；反之，当 Vue.js 组件实例中的数据更新时，表单元素中的数据也会自动更新。

使用方式如下：

<template>
  <input v-model="message" />
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
    }
  },
}
</script>

在上面的代码中，使用 v-model 指令将 input 元素的值与组件实例中的 message 数据建立双向绑定。当用户在 input 元素中输入数据时，组件实例中的 message 数据会自动更新；反之，当组件实例中的 message 数据更新时，input 元素中的值也会自动更新。同时，div 元素中的文本内容也会随着 message 数据的更新而动态更新。

除了上面的例子中使用的 input 元素，v-model 指令还可以用在 select、textarea 等表单元素中，根据需要建立双向绑定。

6.v-for

v-for 指令可以用来根据数据对象中的属性循环渲染元素。

使用方式如下：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
      ],
    }
  },
}
</script>

在上面的代码中，使用 v-for 指令根据 items 数据对象中的属性循环渲染 li 元素。

7.v-if / v-else-if / v-else

v-if / v-else-if / v-else 指令可以用来根据条件判断动态地显示或隐藏元素。

使用方式如下：

<template>
  <div>
    <div v-if="isShown">This is shown</div>
    <div v-else-if="isHidden">This is hidden</div>
    <div v-else>This is default</div>
  </div>
</template>

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

在上面的代码中，使用 v-if / v-else-if / v-else 指令根据条件动态地显示或隐藏了三个 div 元素。

9.v-show

v-show 指令可以用来根据条件判断动态地显示或隐藏元素，与 v-if 不同的是，v-show 是通过设置元素的 display 样式来实现的。

使用方式如下：

<template>
  <div>
    <div v-show="isShown">This is shown</div>
    <div v-show="isHidden">This is hidden</div>
  </div>
</template>

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

在上面的代码中，使用 v-show 指令根据条件动态地显示或隐藏了两个 div 元素。

10.v-cloak

v-cloak 指令可以用来在 Vue.js 加载时防止元素显示未编译的 Mustache 标签。

使用方式如下：

<template>
  <div v-cloak>{{ message }}</div>
</template>

<style>
[v-cloak] {
  display: none;
}
</style>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
    }
  },
}
</script>

在上面的代码中，使用 v-cloak 指令在 div 元素显示之前防止 Mustache 标签的未编译显示，并设置了 [v-cloak] 样式以使元素在 Vue.js 加载完成之前隐藏。

11.v-pre

v-pre 指令可以用来防止 Vue.js 将指令中的表达式进行编译，保留原始的文本内容。

使用方式如下：

<template>
  <div v-pre>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
    }
  },
}
</script>

在上面的代码中，使用 v-pre 指令保留了 div 元素中的原始文本内容，而不进行编译。

12.组件注册指令

Vue.component
Vue.component 方法可以用来注册全局组件。

使用方式如下：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    'my-component': MyComponent,
  },
}
</script>

在上面的代码中，使用 Vue.component 方法注册了一个名为 my-component 的全局组件，并在模板中使用了该组件。

13.动态组件指令

keep-alive / component
keep-alive 和 component 指令可以用来动态地渲染组件，通过设置不同的组件名或组件实例来实现组件的动态切换。

使用方式如下：

<template>
  <div>
    <component v-bind:is="currentComponent"></component>
    <button v-on:click="switchComponent">切换组件</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'component-a',
    }
  },
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB,
  },
  methods: {
    switchComponent() {
      this.currentComponent = this.currentComponent === 'component-a' ? 'component-b' : 'component-a';
    },
  },
}
</script>

在上面的代码中，通过设置 v-bind:is 属性来动态渲染组件，通过 v-on:click 事件来切换组件。

14.自定义指令

Vue.directive
Vue.directive 方法可以用来注册自定义指令。

使用方式如下：

<template>
  <div v-my-directive>自定义指令</div>
</template>

<script>
export default {
  directives: {
    'my-directive': {
      inserted: function (el) {
        el.style.color = 'red';
      }
    }
  },
}
</script>

在上面的代码中，通过 Vue.directive 方法注册了一个名为 my-directive 的自定义指令，并在模板中使用了该指令。

15.过滤器指令

Vue.filter
Vue.filter 方法可以用来注册全局过滤器。

使用方式如下：

<template>
  <div>
    {{ message | reverse }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
    }
  },
  filters: {
    reverse: function (value) {
      return value.split('').reverse().join('');
    }
  },
}
</script>

在上面的代码中，通过 Vue.filter 方法注册了一个名为 reverse 的全局过滤器，并在模板中使用了该过滤器。

以上就是 Vue.js 中常用的指令及其使用场景。希望能够帮助你更好的理解vue指令。欢迎转发或在评论区交流讨论。

脑筋急转弯小程序抢先体验

请添加图片描述

✍创作不易，求关注😄，点赞👍，收藏⭐️

全栈弄潮儿²⁰²⁴
关注
  • 13
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
专栏目录
vue2.2.2.js
03-14
www.runoob.com 方便下载地址., 大家多多交流，资源共享！谢谢合作
Vue.js 3.0从入门到实战【配套资源】.zip
06-24
Vue.js 3.0从入门到实战【配套资源】.zip
Vue从入门到精通基础课程（视频）.txt
06-05
该资源适合新接触Vue的人员进行学习，通过视频进行学习，更方便于理解。
vue从入门到精通.rar
03-30
vue入门教程系列源码，小白级别入门教程，包含12个小结的源代码。
vue从入门到精通
03-28
vue从入门到精通适合刚入职场的小白，也适合职场多年的前端高手，为您全方位打造
Vue2学习（三）：Vue2.js基础
阿标的博客
07-02 621
自己学习的过程中所记录的一些学习过程
全网最全的VUE2.js知识大总结来啦---第一部分
weixin_46146675的博客
04-14 1631
这是关于vue的一些基础知识的总结，由于时间有限，先总结一部分，剩下的下次在再总结。
vue2基础
余月初贰的博客
07-25 554
上面的代码实现了一个简单的鼠标悬停在文字上，显示页面加载时间的一个效果。直接下载并用标签引入，3vue的一些常用指令和注意事项。会被注册为一个全局变量。
vue2基础指令大全
qq_70876597的博客
04-07 1032
vue2 基础指令总结
vue 3.0学习笔记(从入门到精通)
10-07
vue 3.0自我学习整理的笔记，有很大的参考价值，包括了所有的知识点，vue的开发环境搭建、组件开发、数据状态管理、vue route、组件之前数据传递等有关知识点
Vue2笔记（全）
Jadon_z的个人博客
09-03 2584
Vue2 最全知识汇总
Vue.js 2 —组件（Component）化编程
白白白鲤鱼的博客
09-23 919
Vue.js 2.0 —组件（Component）化编程
【前端开发---Vue2】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
最新发布
m0_67844671的博客
09-27 1万+
【超详细Vue2教程】超详细的Vue2入门教程，让你的开发效率大大提高（自己整理的笔记，超详细！）
vue2 中 v-model从入门到精通
木木木森林
08-17 461
// 在子组件中使用v-model，子组件接收要使用value。 // vue3中叫作modelValue。如：defineProps(['modelValue']) // 如果使用msg接收，不会生效 props: ['value'],
Vue.js 2——基础篇（1）
白白白鲤鱼的博客
08-08 538
《Vue.js实战》——基础篇（1）
Vue.js 2.x 的基本架构和实现原理
weixin_43263566的博客
05-21 678
Vue.js 2.x 源码解读
Vue2常用指令
Tcscsdn的博客
11-07 1100
具名插槽：父组件里面元素给上slot属性并且跟上属性值，子组件里面通过slot标签里面的name属性等于父组件里面的属性值这就是具名插槽。v-modle：只局限于input，select 标签，能将页面控件上输入的值同步到相关绑定的data属性上。编译过程：v-if切换有一个局部的编译卸载过程，切换过程中会适当的销毁和重建内部的监听事件和子组件。v-pre：阻止预编译，如果想要输出原样的纯文本文档，可以使用v-pre阻止预编译。编译条件：v-show不管什么条件都会编译，然后被缓存，而且DOM元素保留。
前端（四）——vue.js、vue、vue2、vue3
杜永康的博客
07-07 7110
Vue.js是由华裔工程师尤雨溪（Evan You）于2014年创建的开源JavaScript框架。他在Google工作期间，积累了丰富的前端开发经验，并觉得现有的前端框架存在一些不足之处，如复杂性、学习曲线陡峭等。因此，尤雨溪决定开发一个简单、灵活且高效的框架，使开发者能够更轻松地构建用户界面。他的灵感来源于AngularJS和React这两个优秀的前端框架。尤雨溪最初在2013年开始着手构建这个框架的原型，最终于2014年正式发布了Vue.js 1.0版。
Vue2从入门到精通教程
05-20
Vue.js是一款非常流行的前端框架，它可以帮助我们快速构建交互性强、易于维护的Web应用。如果你想学习Vue.js，下面是一个从入门到精通的学习路线： ## 入门阶段 #### 1. 熟悉HTML、CSS和JavaScript 在学习Vue.js之前，你需要对HTML、CSS和JavaScript有一定的了解。如果没有，可以先学习相关基础知识。 #### 2. 学习Vue.js的基本语法 Vue.js的核心是一个响应式的数据绑定系统和一个组件化的架构。你需要学会使用Vue.js的模板语法、指令、计算属性、组件等等。 #### 3. 学习Vue.js的生命周期 Vue.js的生命周期钩子可以让你在组件的不同阶段执行特定的操作。你需要学习各个钩子的作用以及如何使用它们。 #### 4. 学习Vue.js的路由功能 Vue.js提供了一个官方的路由库vue-router，可以帮助你构建单页面应用。学习如何使用vue-router来进行路由管理。 ## 进阶阶段 #### 1. 学习Vue.js的状态管理 Vue.js提供了一个官方的状态管理库vuex，可以帮助你管理应用中的状态。学习如何使用vuex来进行状态管理。 #### 2. 学习Vue.js的动画效果 Vue.js提供了一个官方的动画库vue-animated，可以帮助你实现各种动画效果。学习如何使用vue-animated来创建动画效果。 #### 3. 学习Vue.js的服务端渲染 Vue.js提供了一个官方的服务端渲染库vue-server-renderer，可以帮助你将Vue.js应用渲染成HTML字符串，以提高SEO效果。学习如何使用vue-server-renderer进行服务端渲染。 ## 精通阶段 #### 1. 学习Vue.js的源码 如果你想深入理解Vue.js的实现原理，可以学习Vue.js的源码。Vue.js的源码非常优雅，是学习前端框架设计的绝佳范例。 #### 2. 学习Vue.js的插件开发 Vue.js的插件机制非常灵活，你可以开发各种各样的插件来扩展Vue.js的功能。学习如何开发Vue.js的插件。 #### 3. 学习Vue.js的性能优化 Vue.js的性能优化非常重要，可以帮助你提高应用的响应速度和用户体验。学习如何进行Vue.js的性能优化。 以上就是Vue2从入门到精通的学习路线，希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全栈弄潮儿²⁰²⁴

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值