当前位置: 首页 > news >正文

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

文章目录

  • 前言
  • 1. v-text / {{ expression }}
  • 2.v-html
  • 3.v-bind
  • 4.v-on
  • 5. v-model
  • 6.v-for
  • 7.v-if / v-else-if / v-else
  • 9.v-show
  • 10.v-cloak
  • 11.v-pre
  • 12.组件注册指令
  • 13.动态组件指令
  • 14.自定义指令
  • 15.过滤器指令
  • 写在最后

在这里插入图片描述

前言

在这里插入图片描述
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指令。欢迎转发或在评论区交流讨论。

写在最后

✨ 原创不易,希望各位大佬多多支持。

👍 点赞,你的认可是我创作的动力。

⭐️ 收藏,感谢你对本文的喜欢。

✏️ 评论,你的反馈是我进步的财富。

相关文章:

  • SpringMVC(8)——SSM整合
  • 【内网安全】横向移动Exchange服务有账户CVE漏洞无账户口令爆破
  • 10、Django开发总结:Django缓存Cache应用场景、设置以及高级使用技巧
  • 【黑客技术】LOIC —— 低轨道离子炮工具使用
  • 华为OD机试用java实现 -【吃火锅】
  • C语言 —— 数组
  • 35岁大龄程序员职业转型规划
  • IntelliJ IDEA 2023.1 最新变化
  • Qt音视频开发22-音频播放QAudioOutput
  • 递归--【天梯L2】愿天下有情人都是失散多年的兄妹
  • 第七章 react组件实例中三大属性之props
  • 面试官:Tomcat 在 SpringBoot 中是如何启动的(一)
  • 【人工智能与深度学习】判别性循环稀疏自编码器和群体稀疏性
  • 【计算机视觉 | 目标检测】BARON:pseudo words 和 linear layer 的理解
  • 【Git从入门到精通】分支机制
  • hexo+github搭建个人博客
  • $translatePartialLoader加载失败及解决方式
  • Debian下无root权限使用Python访问Oracle
  • js算法-归并排序(merge_sort)
  • Just for fun——迅速写完快速排序
  • LeetCode刷题——29. Divide Two Integers(Part 1靠自己)
  • opencv python Meanshift 和 Camshift
  • Redash本地开发环境搭建
  • SpringCloud集成分布式事务LCN (一)
  • Vue源码解析(二)Vue的双向绑定讲解及实现
  • 从零开始的无人驾驶 1
  • 从伪并行的 Python 多线程说起
  • 关键词挖掘技术哪家强(一)基于node.js技术开发一个关键字查询工具
  • 基于Javascript, Springboot的管理系统报表查询页面代码设计
  • 理解IaaS, PaaS, SaaS等云模型 (Cloud Models)
  • 入职第二天:使用koa搭建node server是种怎样的体验
  • 实战:基于Spring Boot快速开发RESTful风格API接口
  • 使用Swoole加速Laravel(正式环境中)
  • 腾讯视频格式如何转换成mp4 将下载的qlv文件转换成mp4的方法
  • 想使用 MongoDB ,你应该了解这8个方面!
  • 学习JavaScript数据结构与算法 — 树
  • 怎样选择前端框架
  • const的用法,特别是用在函数前面与后面的区别
  • #预处理和函数的对比以及条件编译
  • ( 用例图)定义了系统的功能需求,它是从系统的外部看系统功能,并不描述系统内部对功能的具体实现
  • (k8s中)docker netty OOM问题记录
  • (pojstep1.3.1)1017(构造法模拟)
  • (附源码)ssm高校运动会管理系统 毕业设计 020419
  • (考研湖科大教书匠计算机网络)第一章概述-第五节1:计算机网络体系结构之分层思想和举例
  • (转)JVM内存分配 -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m
  • ***详解账号泄露:全球约1亿用户已泄露
  • .htaccess 强制https 单独排除某个目录
  • .Net - 类的介绍
  • .NET Core WebAPI中封装Swagger配置
  • .NET DevOps 接入指南 | 1. GitLab 安装
  • .NET 药厂业务系统 CPU爆高分析
  • .Net接口调试与案例
  • .net最好用的JSON类Newtonsoft.Json获取多级数据SelectToken
  • .考试倒计时43天!来提分啦!
  • :“Failed to access IIS metabase”解决方法