Vue 工作开发小技巧

news2024/11/17 8:18:30

一、汇总

​ 本博客,记录了一些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.coloradmin.cn/o/1309527.html

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

相关文章

【抄作业】ubuntu完全卸载CUDA,彻底卸载cuda,卸载不同版本的cuda,cuda不同版本的卸载方法

卸载的实现方法 如何正确、完全的卸载cuda呢&#xff1f; 其实cuda安装时就已经准备好了卸载的接口&#xff0c;卸载程序在/usr/local/cuda-xx.x/bin下&#xff0c;需要注意的是cuda10.0及之前的版本卸载程序名为uninstall_cuda_xx.x.pl&#xff0c;而cuda10.1及之后的版本卸…

leetcode 69. x 的平方根(优质解法)

代码&#xff1a; class Solution {public int mySqrt(int x) {long left0;long rightx;while (left<right){long midleft(right-left1)/2;//注意乘法操作和加法操作都很容易发生溢出if(mid*mid<x){leftmid;}else {rightmid-1;}}return (int)left;} } 题解&#xff1a;…

MES系统物料计划协同:全面解析与应用

一、MES系统物料计划协同概述 MES系统物料计划协同是指通过MES系统对物料计划进行统一管理和协调&#xff0c;确保生产计划的顺利进行。通过将物料需求、采购、库存、生产和配送等环节进行有效集成&#xff0c;实现供应链的优化。这种协同方式有助于提高供应链的透明度和协同性…

[OpenWrt]RAX3000一根线实现上网和看IPTV

背景&#xff1a; 1.我家电信宽带IPTV 2.入户光猫&#xff0c;桥接模式 3.光猫划分vlan&#xff0c;将上网信号IPTV信号&#xff0c;通过lan口&#xff08;问客服要光猫超级管理员密码&#xff0c;具体教程需要自行查阅&#xff0c;关键是要设置iptv在客户侧的vlan id&#…

【抄作业】ImportError :cannot import name xxxxxx ,原博主Activewaste

前情介绍 网上关于这种问题的解决方案一大堆&#xff0c;但是绝大多数都是不适用&#xff0c;或者说解决不了问题&#xff0c;我根据别人所遇到的和我自己遇到的&#xff0c;对这个问题整理了一下&#xff0c;希望能解决这个问题。 问题分析 一、缺少这个module或者func或者p…

java springboot+jsoup写一段爬虫脚本 将指定地址的 图片链接 文本 超链接地址存入自己的属性类对象中

首先 还是最基本的 要在 pom.xml 引入依赖 <dependency><groupId>org.jsoup</groupId><artifactId>jsoup</artifactId><version>1.14.1</version> </dependency>然后 我们可以在项目中创建一个属性类 我这里就叫 WebContent了…

ArkTS组件通信

父子通信 情况一&#xff1a;子组件只展示父组件中的状态 父组件通过 State修饰符 定义变量&#xff0c;子组件通过 Prop修饰符 获取变量。 Prop是 「单向传递」&#xff0c;父组件将变量「拷贝」一份交给子组件使用&#xff0c;子组件不可修改变量。 父组件 // 声明变量 …

Debian openmediavault 自建Nas系统共享,raid5与btrfs文件系统无损原数据扩容

一、适用环境 1、企业自有物理专业服务器&#xff0c;一些敏感数据不外流时&#xff0c;使用openmediavault自建NAS系统&#xff1b; 2、在虚拟化环境中自建NAS系统&#xff0c;用于内网办公&#xff0c;或出差外网办公时&#xff0c;企业内的文件共享&#xff1b; 3、虚拟化环…

大模型时代-让AI自己开发自己

一、前言 AI能自己开发自己或者开发和一个很像自己的东西吗&#xff1f;显然是可以的&#xff01;因为AI模型的算法&#xff0c;基本就是学习和递归 二、大模型的算法实现例子 本例子就是通过AI模型来写 大模型的实现通常涉及到深度学习框架和大量的计算资源。具体的算法代…

RocketMQ源码 Broker-PullRequestHoldService 长轮询消息拉取组件源码分析

前言 PullRequestHoldService 继承了ServiceThread类&#xff0c;它本身是一个线程&#xff0c;以后台方式无线循环运行&#xff0c;支持长轮询&#xff08;默认5秒&#xff09;和短轮询&#xff08;默认1秒&#xff09;两种方式&#xff08;CountDownlatch 方式控制&#xff…

在HTML中如何设置音频和视频?

目录 一、设置音频二、设置视频 一、设置音频 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Document</title> </head> <body> <!-- controls:控制播放暂停的按钮autop…

【Jmeter】Jmeter基础4-Jmeter元件介绍之监听器

2.4、监听器 监听器主要用于收集、统计、查看和分析结果。 2.4.1、察看结果树 作用&#xff1a;查看取样器请求和响应结果&#xff0c;包括消息头&#xff0c;请求的数据&#xff0c;响应的数据等。一般在调试时才用&#xff0c;在实际运行压测时建议禁用&#xff0c;因为大量…

TikTok科技趋势:平台如何引领数字社交革命?

TikTok作为一款颠覆性的短视频应用&#xff0c;不仅改变了用户的娱乐方式&#xff0c;更在数字社交领域引领了一场革命。本文将深入探讨TikTok在科技趋势方面的引领作用&#xff0c;分析其在数字社交革命中的关键角色&#xff0c;以及通过技术创新如何不断满足用户需求&#xf…

element-ui以服务方式调用loading,自定义修改icon

一、以服务的方式调用Loading 除了常用的v-loading、this.$loading我们还可以以服务的方式调用。主要有以下步骤 引入Loading服务 import { Loading } from element-ui;在需要时调用 Loading.service(options);其中 options 参数为 Loading 的配置项&#xff0c;具体见下表…

2023 亚马逊云科技 re:Invent 大会探秘:Aurora 无限数据库的突破性应用

文章目录 一、前言二、Amazon Aurora 无限数据库2.1 亚马逊云科技数据库产品发展历程2.2 什么是 Amazon Aurora Limitless Database&#xff08;无限数据库&#xff09;2.3 Amazon Aurora Limitless Database 设计架构2.4 Amazon Aurora Limitless Database 分片功能2.5 使用 A…

嵌入式开发板qt gdb调试

1&#xff09; 启动 gdbserver ssh 或者 telnet 登陆扬创平板 192.168.0.253&#xff0c; 进入命令行执行如下&#xff1a; chmod 777 /home/HelloWorld &#xff08;2&#xff09; 打 开 QTcreator->Debug->StartDebugging->Attach to Running Debug Server 进行…

MySQL之DML语句

文章目录 DML语句创建表添加表字段**插入数据**查询数据更新数据替换数据删除数据清除表数据删除表 DML语句 数据操作语言DML&#xff08;Data Manipulation Langua&#xff09; 是SQL语言的一个分类&#xff0c;用于对表的数据进行增&#xff0c;删&#xff0c;改&#xff0c…

xtu oj 1328 数码和

题目描述 一个10进制数n在2∼16进制下可以得到的不同的数码和&#xff0c;求在这些数码和中出现次数最多的数码和。 比如20&#xff0c; 其中数码和2和4分别出现了3次&#xff0c;为最多出现次数。 输入 第一行是一个整数T(1≤T≤1000)&#xff0c;表示样例的个数。 以后每行…

python selenium chrome114版本之后环境配置和携带缓存打开chrome

尽力局 chrome驱动环境配置chrome打开带缓存设置待缓存打开自动关闭浏览器自动关闭浏览器弹窗 最终代码找资料难啊最终效果代码 依赖包和生成依赖包方法关闭谷歌升级 chrome驱动环境配置 网上找到的资料&#xff0c;我现在安装的是120版本的&#xff0c;这个资料是可行的。比较…

猫头虎博主深度探索:Amazon Q——2023 re:Invent大会的AI革新之星

猫头虎博主深度探索&#xff1a;Amazon Q——2023 re:Invent大会的AI革新之星 授权说明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 亚马逊云科技开发者社区, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科…