Vue 工作开发小技巧

一、汇总

​ 本博客,记录了一些Vue在日常开发工作中比较实用的小技巧,后续会陆续添加更新。

​ 1、利用Sass的:global定义全局样式。

​ 2、在<style>内部使用v-bindCSS属性绑定属性值。

​ 3、父子组件传值时,使用.sync修饰符后,可直接在子组件中通过$emit('update:propName')来更新父组件中绑定的数据。

​ 4、可在main.js中通过app.config.globalProperties.***声明全局变量。

​ 5、通过Vue3新增的<Teleport>内置组件,将组件内的HTML渲染到指定DOM下。

二、内容

1、利用Sass的:global定义全局样式。

​ 在 Vue.js 的单文件组件(.vue文件)中,我们通常使用<style scoped>来为当前组件添加样式,这样样式就只会作用于当前组件,不会影响其他组件。这实际上是通过给每个元素添加一个独特的属性(如data-v-f3f3eg9),然后在样式中使用这个属性来选择元素,实现样式的局部作用。

​ 但有时我们可能需要在这个样式块中添加一些全局样式。我们首先可以使用::v-deep或者>>>等方式来进行深度选择,不过这只能作用于当前组件内的子组件、子元素。而且无法影响同级或者上级组件、元素。如果我们需要真正的全局样式,那么我们可以使用:global标记来实现。

:global 是 CSS 模块(CSS Modules)的一个特性,它允许你在模块化 CSS 中编写全局样式。在 CSS 模块中,所有的类名默认都是局部作用域的,也就是说它们只在当前 CSS 文件中有效。但在需要设置一些全局样式,这时就可以使用 :global特性。在单文件组件(.vue文件)的 <style>标签中加入 scoped 属性, Vue 就会把这个样式块视为模块化 CSS。如果没有 scoped,那么所有的样式都会默认为全局样式,:global 就没有意义了。(所以单独写一个<style>,其内部样式也都是全局样式~)。

在文件A.vue中:
<style lang="scss" scoped>
// 定义全局类名 其样式也变为全局样式
:global(.global-class) {color: red;
}
// 定义一个普通的局部样式 
.normal-class {// 使用 !important 提升优先级color: yellow!important;
}
</style>
A.vue同级目录下的B.vue文件中:
<!-- 类名 normal-class 位于后面  优先级更高 -->
<h1 class="global-class normal-class">测试:global全局样式</h1>
页面表现:

元素只受到全局样式.global-class的影响:

6f9ab40fd7fc4122b1ef73821bcda317

2、在<style>内部使用v-bindCSS属性绑定属性值

​ 在 Vue.js 的单文件组件(.vue文件)中,如果我们想要动态的修改一个元素的样式,可以采取的方法有:① 设置行内style样式;② 动态设置类名。现在,我发现了第三种方法,原来Vue提供的v-bind语法糖是可以直接在<style>内部使用的,绑定声明的变量,而且实现了双向绑定,我们只需要通过修改变量值,即可动态修改元素样式。

​ 注意:绑定的变量必须是在data中声明的,否则无法绑定。

使用语法:
/* 变量名之前不需要加this */ 
css属性名: v-bind(变量名);
具体案例:
<template><div><h1>测试在style内部使用v-bind给CSS属性绑定属性值</h1></div>
</template><script>
export default {data() {return {// 声明样式变量color: "red",};},mounted() {// 动态修改变量值setTimeout(() => {this.color = "blue";}, 2000);},
};
</script><style lang="scss" scoped>
h1 {font-size: 30px;/* 绑定样式变量 */color: v-bind(color);
}
</style>
页面效果:

初始:

在这里插入图片描述

两秒后:

在这里插入图片描述

3、父子组件传值时,使用.sync修饰符后,可直接在子组件中通过$emit('update:propName')来更新父组件中绑定的数据。

​ 正常情况下,Vue中的数据流是单向的,即从父组件向子组件传递数据。子组件如果想要修改传递的数据,只能通过$emit()向父组件传递事件,然后父组件监听绑定对应的处理函数,触发后修改数据,然后再自动把修改后的数据传递给子组件,子组件接收的数据才会更新。这实在是太麻烦了。

​ 为了简化这个流程,Vue给我们提供了.sync 这个修饰符,用于实现父子组件之间的双向绑定。在父组件向子组件传值时,使用该修饰符后,我们就可以直接在子组件中通过$emit('update:propName')来更新数据。这样代码更简洁,逻辑更清晰。

父组件:
<template><div><h1>这是父组件{{ count }}</h1><!-- 向子组件传递数据并使用sync修饰符 --><son :count.sync="count"></son></div>
</template><script>
import son from "../components/son.vue";
export default {components: {son,},data() {return {count: 1,};},
};
</script>
子组件:
<template><div><h3 @click="add()">这是子组件{{ count }}</h3></div>
</template><script>
export default {props: {// 接收父组件传递过来的值count: {type: Number,default: 0,},},methods: {add() {// 子组件直接修改父组件传递的值this.$emit("update:count", this.count + 1);},},
};
</script>
页面效果:

初始状态:

在这里插入图片描述

点击后:

在这里插入图片描述

4、可在main.js中通过app.config.globalProperties.***声明全局变量。

​ 如果我们想要在项目中定义一个变量,该变量可以在全局任何一个组件中被访问到,除了使用Vuex之外,我们还可以通过在main.js中通过app.config.globalProperties.***声明全局变量的方式来实现该需求。ding该方式需要借助Vue的createApp()方法,因此只能在Vue3及之后的版本中使用。

​ 但是要注意通过app.config.globalProperties定义的全局变量不支持双向绑定,因为这种方式只是将变量添加到Vue实例的原型链上,使得在组件中可以通过this关键字来访问全局变量,因此该方式适用于初始定义变量值之后,基本不会进行改动,且不需要双向绑定的情况。

main.js文件定义全局变量:
// 导入createApp()函数
import { createApp } from 'vue'
// 导入App组件
import App from './App.vue'
// 创建App应用返回对应的实例对象
const app = createApp(App);
// 挂载全局变量
app.config.globalProperties.$overallObj = { value: 111, name: '全局对象' };
app.config.globalProperties.$overallString = '111全局字符串11111';
// 挂载实例对象
app.mount('#app')
单文件组件(.vue文件)中,调用全局变量:
<template><div><h1 @click="changeValue()">这个地方是调用的main.js中定义的全局字符串 --- {{ this.$overallString }}</h1><h1>这个地方是调用的main.js中定义的全局对象 --- {{ this.$overallObj }}</h1></div>
</template><script>
export default {methods: {changeValue() {console.log("修改前的全局字符串---", this.$overallString);console.log("修改前的全局对象---", this.$overallObj);this.$overallString = "我是改变后的全局字符串";this.$overallObj.name = "我是改变后的全局对象";console.log("修改后的全局字符串---", this.$overallString);console.log("修改后的全局对象---", this.$overallObj);},},
};
</script>
页面效果:

初始效果:

在这里插入图片描述

触发点击事件后:

在这里插入图片描述

5、通过Vue3新增的<Teleport>内置组件,将组件内的HTML渲染到指定DOM下。

​ 在某些情况下,我们希望组件的某些内容不渲染在当前组件的位置,而是渲染到别的DOM元素下面。最常见的场景就是模态框弹窗组件的实现,我们可以通过给弹窗设置position: fixed;来做到全屏展示,但是这样写必须限制祖先元素的样式不能有 transformperspective 或者 filter 样式属性,因此不太友好。Vue3给我们提供了一种新的实现方案,就是<Teleport>内置组件。

<Teleport> 是 Vue 3 的新特性,用于将组件内的子节点传输/移动到 DOM 的其他位置。<Teleport> 接收一个 to 属性来指定传送的目标。to 的值可以是一个 CSS 选择器字符串,也可以是一个 DOM 元素对象。设置完,在页面渲染成后,就会发现组件内的子节点渲染到了目标DOM元素下,成为其子节点。但是<Teleport> 挂载时,传送的 to 目标必须已经存在于 DOM 中。

<Teleport> 只改变了渲染的 DOM 结构,它不会影响组件间的逻辑关系。<Teleport> 内部的节点能够正常的与其所在组件内的数据进行数据交互。

组件代码:
<template><div><!-- 指定内部节点渲染到body元素下 --><Teleport to="body"><h1>这个组件用来测试Teleport内置组件的作用</h1></Teleport></div>
</template>
页面效果:

在这里插入图片描述

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

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

相关文章

cgteamwork与shotgrid对比

最近有项目接触使用并二开cgteamwork&#xff0c; 也重新认识了cgteamwork&#xff0c;感受到国产软件的强大&#xff0c;国内中小CG公司的首选&#xff0c;原因&#xff1a; 1 上手容易&#xff0c;不会的有售前工程师教&#xff0c;他们全国各地城市到处跑。 感概业务的强大…

智能优化算法应用:基于生物地理学算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于生物地理学算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于生物地理学算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.生物地理学算法4.实验参数设定5.算法…

Visual studio+Qt开发环境搭建以及注意事项和打开qt的.pro项目

下载qt-然后安装5.14.2_msvc2017 不知道安装那个就全选5.14.2的父级按钮 https://download.qt.io/archive/qt/5.14/5.14.2/ 安装Visual studio,下载直接下一步就行 配置Visual studio的qt环境 在线安装-重启Visual studio会自动安装 离线安装-关闭Visual studio点击安装 关闭…

桂电|《操作系统》实验一:UNIX/LINUX及其使用环境(实验报告)

桂林电子科技大学2023-2024学年 第 一 学期 操作系统A 实验报告 实验名称 实验一 UNIX/LINUX及其使用环境 实验指导老师&#xff1a; 成绩 院 系 计算机与信息安全学院 专业 计算机科学与技术(卓越工程) 学 号 姓名 课内序…

Spring Boot+FreeMarker=打造高效Web应用

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Spring BootFreeMarker的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一. FreeMarker是什么 二…

本地连锁门店经营可以借助系统实现哪些功能?

不少的连锁门店目前还是很基础的ERPPOS收银&#xff0c;其他的还是走传统的手工管理&#xff0c;大多连锁老板知道借助信息化系统可以帮助门店实现精细化管理&#xff0c;提高运营效率&#xff0c;降低成本&#xff0c;增强竞争力&#xff0c;但不知道怎么去做&#xff0c;能做…

每日汇评:黄金需要突破2050美元的供应区域才能延续复苏

周四早间&#xff0c;金价接近每盎司2,030美元&#xff0c;创下6天来的最高水平&#xff1b; 美联储确认鸽派政策转向&#xff0c;美元和美国国债收益率双双下挫&#xff1b; 英国央行和欧洲央行2023年的最终政策公告可能会进一步推高金价&#xff1b; 随着投资者重新评估美联储…

2020年第九届数学建模国际赛小美赛C题亚马逊野火解题全过程文档及程序

2020年第九届数学建模国际赛小美赛 C题 亚马逊野火 原题再现&#xff1a; 野火是指发生在乡村或荒野地区的可燃植被中的任何不受控制的火灾。这样的环境过程对人类生活有着重大的影响。因此&#xff0c;对这一现象进行建模&#xff0c;特别是对其空间发生和扩展进行建模&…

0x13 链表与邻接表

0x13 链表与邻接表 数组是一种支持随机访问&#xff0c;但不支持在任意位置插入和删除元素的数据结构。与之相对应&#xff0c;链表支持在任意位置插入或删除元素&#xff0c;但只能按顺序依次访问其中元素。我们可以使用一个struct来表示链表的节点&#xff0c;其中可以存储任…

《师兄啊师兄》第二季开播 李长寿渡劫归来扬名四海

看新国风&#xff0c;上优酷动漫&#xff01;由优酷出品&#xff0c;玄机科技制作&#xff0c;改编自阅文集团旗下起点读书小说《我师兄实在太稳健了》&#xff08;作者&#xff1a;言归正传&#xff09;的修仙喜剧动画《师兄啊师兄》第二季《海神扬名篇》于今日10:00正式回归。…

如何性能测试中进行业务验证?

在性能测试过程中&#xff0c;验证HTTP code和响应业务code码是比较基础的&#xff0c;但是在一些业务中&#xff0c;这些参数并不能保证接口正常响应了&#xff0c;很可能返回了错误信息&#xff0c;所以这个时候对接口进行业务验证就尤其重要。下面分享一个对某个资源进行业务…

Python多线程threading的使用方法

前言 有时候&#xff0c;我们在编写Python程序时&#xff0c;会遇到比较耗时的函数方法&#xff0c;我们的需求是等这个耗时的函数执行完毕之后&#xff0c;在执行后面的程序&#xff0c;这时候就需要用到多进程。 下面我们来举一个使用多进程threading的例子 例子 import t…

Unity | AVpro的最基础使用方法(视频播放插件)

一、 AVpro的使用方法 (一)准备播放器MediaPlayer 1. AVpro的播放器是MediaPlayer&#xff0c;在Heirarchy面板里创建 2.播放器里放视频 a.把视频放到StreamingAssets文件夹下 b.你就可以在MediaPlayer里面找到这个视频 c.选中以后&#xff0c;就会变成 这里点击播放可以播放…

FET偏置控制器电路的卫星接收器LNB电路

都具有FET偏置控制器电路的卫星接收器LNB电路 芯片的描述&#xff1a;D3211是一-块用于卫星接收LNBs的专用电路&#xff0c;具有极化电压检测切换、22KHz脉冲检测切换和提供高放、本振级GaAs或HEMT FET晶体管工作点偏置等功能。D321 1内部的22K检测及切换控制由22K有源滤波器、…

RT-DETR改进《目标对象计数》多任务实验:深度集成版来了!支持自定义数据集训练自定义模型

💡该教程为改进RT-DETR专栏,属于《芒果书》📚系列,包含大量的原创改进方式🚀 💡🚀🚀🚀内含改进源代码 按步骤操作运行改进后的代码即可💡更方便的统计更多实验数据,方便写作 RT-DETR改进《目标对象计数》多任务实验:深度集成版来了!支持自定义数据集训练…

车联网助力自动驾驶发展

单车智能决策难点 芯片&#xff0c;成为自动驾驶的最大瓶颈 自动驾驶对芯片算力要求极高。要求自动驾驶处理器在每秒能够处理数百万亿次的计算&#xff1b; 自动驾驶对计算的实时性要求极高。任何一点时延&#xff0c;都有可能造成车毁人亡&#xff1b; 对低能耗有极大的…

Java并发编程基础总结

进程和线程概念 什么进程 进程是系统运行的基本单位&#xff0c;通俗的理解我们计算机启动的每一个应用程序都是一个进程。如下图所示&#xff0c;在Windows中这一个个exe文件&#xff0c;都是一个进程。而在JVM下&#xff0c;每一个启动的Main方法都可以看作一个进程。 什么…

如何用gpt改写文章 (1) 神码ai

大家好&#xff0c;今天来聊聊如何用gpt改写文章 (1)&#xff0c;希望能给大家提供一点参考。 以下是针对论文重复率高的情况&#xff0c;提供一些修改建议和技巧&#xff1a; 如何用GPT改写文章 一、引言 随着人工智能技术的飞速发展&#xff0c;自然语言处理领域取得了重大突…

【数电笔记】54-或非门构成的基本RS触发器

目录 说明&#xff1a; 1. 电路组成 2. 逻辑功能 3. 特性表 4. 特性方程 5. 例题 6. 两种基本RS触发器的形式比 说明&#xff1a; 笔记配套视频来源&#xff1a;B站&#xff1b;本系列笔记并未记录所有章节&#xff0c;只对个人认为重要章节做了笔记&#xff1b;标题前…

02-详解请求路由的实现和常见的断言工厂

请求路由 路由转发 第一步: 新建一个SpringBoot工程如gateway模块, 引入网关依赖和nacos服务发现依赖 <!--网关依赖--> <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifactId&…