【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.过滤器指令
  • 写在最后

在这里插入图片描述

人工智能福利文章

  • 【分享几个国内免费可用的ChatGPT镜像】
  • 【10几个类ChatGPT国内AI大模型】
  • 【用《文心一言》1分钟写一篇博客简直yyds】
  • 【用讯飞星火大模型1分钟写一个精美的PPT】

前言

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

写在最后

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/38361.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Vue2从入门到精通】五分钟带你摸透Vue生命周期

文章目录 人工智能福利文章什么是Vue生命周期Vue生命周期图解Vue有8个生命周期钩子函数1. beforeCreate( 创建前&#xff0c;一般不用管 )在这个生命周期可以做什么&#xff1f;1. 可以做页面拦截2.可以做自定义重定向 2. created ( 创建后 &#xff09;3. beforeMount ( 挂载前…

Markdown从入门到精通

超全面的Markdown语法 一.什么是 MarkDown二.为什么要使用Markdown三.Markdown的基础语法1. 标题语法1.1 可选语法1.2 标题的最佳实践 2. 段落语法2.1 段落的最佳实践 3. 强调语法3.1 斜体&#xff08;Italic&#xff09;3.2 粗体&#xff08;Bold&#xff09;3.3 强调语法的最…

爬取最新斗图啦网站上表情包

女朋友找我斗图&#xff0c;最后斗她到自闭。 网址&#xff1a;https://www.doutula.com/ 难度不大&#xff0c;代码如下&#xff1a; # -*- coding: utf-8 -*-import random import requests from bs4 import BeautifulSoup import urllib import osBASE_URL https://www.…

表情包AI生成器:识别人脸情绪,自动配文字

梅宁航 发自 凹非寺 量子位 报道 | 公众号 QbitAI Meme表情包&#xff0c;兴盛于各大社交网站&#xff0c;但自己动手制作费时耗力。 “急民之所急”&#xff0c;表情包自动生成器出现了。 以往的此类生成器&#xff0c;只是简单的图片配文字&#xff0c;总觉得有点文不对题。 …

获取、导出微信所有表情

前言 适用&#xff1a;PC端微信 2.6.8.51版本 发布于2019年8月25日 本文仅作技术研究 一直在想微信收藏的表情包为什么不能右键另存为到本地 像QQ一样多好&#xff0c;有时候想把微信的表情导入到QQ里面用也不行&#xff0c;多不方便 百度查了一下&#xff0c;都是找CustomE…

怎么制作微信表情包?这两种方法,亲测好用

分享两种微信表情包制作方法&#xff0c;一种是用微信自带的表情包制作工具&#xff0c;另一种是将视频转换成GIF表情包。 一、微信小程序自制 1.首先我们打开微信&#xff0c;点击底部的【发现】&#xff0c;进入【小程序】界面&#xff0c;在上方的搜索框里输入“微信创意表…

Python爬虫爬取表情包+Autojs微信自动导入表情包脚本(附源码)

废话不多说直接开始 Python爬取表情包 一、检查网页源码 发现可以找到图片地址&#xff0c;直接请求图片地址下载图片 二、打开开发者工具(F12) 通过xpath提取p标签下的img标签src属性为图片地址 三、编写程序 代码 import requests from fake_useragent import U…

表情识别/情绪识别:ExpW表情数据集

ExpW表情数据集 1、数据集介绍2、数据集处理3、数据集下载 1、数据集介绍 论文《Deep Facial Expression Recognition: A Survey》里对其进行了介绍&#xff1a; ExpW [47]: The Expression in-the-Wild Database (ExpW) contains 91,793 faces downloaded using Google imag…

基于文字识别与情感语义分析的(熊猫头)Emoji表情包搜索神器 —— 可以识别本地表情包或者爬取网络表情包

AI Sticker Searcher 目录 generated with DocToc AI Sticker Searcher&#x1f303; 最新版本✨ 开始 1️⃣ 直接搜索表情包2️⃣ 本地没有表情包&#xff0c;想要爬取点表情包上传到云端识别搜索3️⃣ 当你本地有很多表情包图片&#xff0c;想要识别时4️⃣ 觉得云端搜索太慢…

获取千牛聊天对象(聊天记录中获取)

根据上一篇 获取千牛聊天记录 我们只要解析一下聊天记录的html就可以获取到聊天对象了。 先看实现效果吧实现原理就是在窗体中加了个Timer(定时器控件)定时获取html并解析就能获取到聊天对象了 但是有个问题,就是没有聊天记录的就获取不到了.... 这个问题留着下一篇解决吧.... …

旺旺打标工具,淘宝搜索打标软件(含旺旺打标API接口)

一、【旺旺打标工具,淘宝搜索打标软件】实现需求 指定的单品将会出现在手淘搜索首屏位置及淘内所有免fei流量入口位置。 二、【淘宝搜索打标】应用场景   使用淘宝搜索打标工具后,将宝贝推送到搜索页。 旺旺打标api接口返回示例&#xff1a; {"msg": "succe…

千牛卖家工作平台使用教程

千牛电脑版(卖家工作台) 1.13.19 免费版 千牛官方下载,千牛卖家版官方下载,千牛工作台,千牛卖家移动工作平台 让卖家可以更加便捷和高效的管理店铺&#xff0c;让生意游刃有余。千牛&#xff0c;为阿里巴巴官方出品的卖家一站式工作台&#xff0c;其核心是为卖家整合&#xff1…

淘宝千牛软件服务器fmsas端口与客户端的通信协议(完整版)

个人兴趣学习&#xff0c;不负法律责任 本例纯属学习和科研参考&#xff0c;请勿用在商务用途&#xff08;使用淘宝开放平台的api吧~~by凉 白开QQ&#xff09;。 前言&#xff1a; 帮朋友的过程中&#xff0c;突然想到一个像淘宝这样安全性这么强的互联网企业&#xff08;额&…

如果鸿蒙系统上线,使用体验与安卓相当,你会换系统么?

其实这个我觉得不是你会不会换的问题&#xff0c;而是华为如果给了很多手机装了鸿蒙系统&#xff0c;而且还保持了目前的UI使用体验&#xff0c;同时也能做到了底层优化的技术&#xff0c;让速度快&#xff0c;为何不用&#xff1f;其实目前在国产基本上没有谷歌的安卓原生态系…

鸿蒙(harmonyOS)应用开发-真机设备API版本查看

如何使用hdc工具查看鸿蒙真机版本 前言 在鸿蒙应用开发中&#xff0c;我们会在真机上进行调试&#xff0c;但是我们需要保证我们选择的API版本大于或等于手机的API版本&#xff0c;否则可能会出现兼容性问题。那么&#xff0c;如何查看真机的API版本呢&#xff1f;本文将介绍…

『牛角书』HarmonyOS鸿蒙实战 开发一个简单聊天助手APP

前言 我是通过b站上面老师的讲解&#xff0c;跟着老师编写了一个简单聊天助手app&#xff0c;简答实用&#xff0c;对于刚开始接触鸿蒙的我们来说很有帮助。 创建项目 所用软件为DevEco Studio&#xff0c;点击Create HarmonyOS Project&#xff0c;这里选择了第一个空的项目…

开发跨设备的鸿蒙(HarmonyOS) App

为了让更多的人看到本文&#xff0c;请各位读者动动小手&#xff0c;点击右上角【...】&#xff0c;将本文分享到朋友圈&#xff0c;thanks&#xff01; 现在的智能设备种类越来越多&#xff0c;而且这些智能设备的屏幕尺寸、分辨率都不同&#xff0c;例如&#xff0c;比较常见…

鸿蒙系统vivo能用吗,不是华为手机,也能用上鸿蒙系统

按照此前的进度&#xff0c;华为的鸿蒙 OS 系统已经在 Mate40 等多款华为系手机上小范围推送&#xff0c;从此前公布的消息来看&#xff0c;应该在 6 月份正式全面开放&#xff0c;让更多的用户用上这套华为自研的系统。 今天&#xff0c;华为召开了一场鸿蒙 OS 的合作伙伴峰会…

终于有人把鸿蒙OS讲明白了!并开放鸿蒙教程!

点击“开发者技术前线”&#xff0c;选择“星标????” 让一部分开发者看到未来 “ 本文面向的是开发人员&#xff0c;主要想通过科普让大家了解一下鸿蒙开发。接下来&#xff0c;我想给大家科普一下这个这么火的鸿蒙系统。 到底什么是鸿蒙 OS 在官网上看到鸿蒙 OS 的简介是…

不要总想着自己训练大模型,你的业务可能并不需要

至少企业知识库是这样。 我要训练大模型&#xff0c;我要做私有部署&#xff0c;我要做模型 Fine-tune&#xff0c;我要搞垂类 GPT。最近真是听了好多这样的话&#xff0c;让我想起之前刷到的一个视频&#xff1a; 我长大要开飞机&#xff0c;我想当宇航员&#xff0c;我要有所…