当前位置:首页 > 数码 > 样式的七个令人惊叹的机密技巧-助你优化样式程度-Vue (样式有哪些?)

样式的七个令人惊叹的机密技巧-助你优化样式程度-Vue (样式有哪些?)

admin5个月前 (05-06)数码16

单文件组件由三个不同的实体组成:模板、脚本和样式。一切这些都很关键,但后者往往被漠视,虽然它或许会变得复杂,并经常造成曲折和失误。更好地理解可以改良代码审查并缩小调试期间。

这里有7个小贴士可以协助你:


1.样式作用域和插槽内容

将样式的作用域限定为只影响以后组件,是防止组件耦合和异常反作用的有效战略。

它是经过增加scoped属性来转换以下内容来成功的:

<template><divclass="title">Helloworld!</div></template><stylescoped>.title{font-size:24px;}</style>
助你优化样式程度<template><divclass="title"data-v-7ba5bd90>Helloworld!</div></template><stylescoped>.title[data-v-7ba5bd90]{font-size:24px;}</style>

假构想让样式影响子组件,可以经常使用选用器。

<stylescoped>.a:deep(.b){/*...*/}</style>

其编译为:

.a[data-v-7ba5bd90].b{/*...*/}

经常使用插槽选用器对插槽内的内容也是如此。

<stylescoped>:slotted(div){color:red;}</style>

2.作用域选用器性能

作用域样式不会消弭对类的需求。由于CSS选用器的上班形式,当经常使用作用域时, p{color:red} 的速度会慢很多倍。假设经常使用类来替代,性能方面的影响可以疏忽不计。

<template><h1class="title">Helloworld!</h1></template><stylescoped>.title{font-size:24px;}</style>
<template><h1>Helloworld!</h1></template><stylescoped>h1{font-size:24px;}</style>

3.全局样式

影响整个运行程序的样式或许不是一个好主意。假设您还是想这么做,可以将作用域样式与非作用域样式混合经常使用,或许经常使用伪选用器

<stylescoped>:global(.red){color:red;}</style>

4.样式中的JavaScript变量

自Vue3.2版起,可以在样式标签内经常使用。这可以带来一些幽默的用例,比如只需几行代码就能成功色彩选用器。

<template><h1class="text">HelloWorld!</h1><inputtype="color"v-model="color"/></template><scriptsetup>import{ref}from"vue";constcolor=ref("");</script><style>.text{color:v-bind(color);}</style>

一个更初级的用例是使可重用运行程序图标组件的图标大小灵活化。

<template><p><inputtype="radio"v-model="size":value="sizes.s"/>S<inputtype="radio"v-model="size":value="sizes.m"/>M<inputtype="radio"v-model="size":value="sizes.l"/>L<inputtype="radio"v-model="size":value="sizes.xl"/>XL</p><divclass="icon"/></template><scriptsetuplang="ts">import{ref}from"vue";enumsizes{s=8,m=16,l=32,xl=64,}constsize=ref(sizes.xl);</script><style>.icon{width:v-bind(size+"px");height:v-bind(size+"px");background:#cecece;}</style>

5.CSS模块

只需在样式标签中增加属性,即可立刻允许CSS模块。这些类会经过变量智能显示在模板中。

<template><p:class="$style.red">Thisshouldbered</p></template><stylemodule>.red{color:red;}</style>

6.CSS与SCSS中的变量

SCSS变量是我们编写CSS形式的一次性严重改革。在经常使用预处置器之前,经常使用变量是无法能的。尔后,CSS迎头赶上,如今一切干流阅读器都允许CSS变量。CSS变量提供了SCSS变量所能做到的一切,此外还提供了更简便的主题配置,因此在这场争执中,CSS变量显著胜出。

7.SCSSinclude与extend

这两个SCSS助手经常会惹起混杂,由于它们都可以用来缩小SCSS代码的重复。CSS输入中存在一些纤细的差异,您应该留意。

协助程序用于蕴含在mixin块中编写的代码。

<template><pclass="error-text">HelloWorld!</p><pclass="error-notification">HelloWorld!</p></template><stylelang="scss">@mixinerror{color:red;}.error-text{@includeerror;font-size:24px;}.error-notification{@includeerror;border:1pxsolidred;padding:8px;}</style>

生成的CSS将依据须要屡次重复代码

.error-text{color:red;font-size:24px;}.error-notification{color:red;border:1pxsolidred;padding:8px;}

另一方面,当元素简直相反时更有用。

<template><pclass="error-text">HelloWorld!</p><pclass="error-notification">HelloWorld!</p></template><stylelang="scss">%error{color:red;}.error-text{@extend%error;font-size:24px;}.error-notification{@extend%error;border:1pxsolidred;padding:8px;}</style>

生成的代码为:

.error-notification,.error-text{color:red;}.error-text{font-size:24px;}.error-notification{border:1pxsolidred;padding:8px;}

这里的普通规定是选用,除非你想在mixin中经常使用一个参数,在这种状况下,只要才有效。


原文:

vue项目中直接用的audio标签,对样式进行修改并单独存放在一个css文件中 引用后页面每次刷新之后才会出现

style中可以import sass文件,css用得少,需要配置一下

在vue里面通过父组件如何修改子组件样式

下面我就为大家分享一篇vue里面父组件修改子组件样式的方法,具有很好的参考价值,希望对大家有所帮助。 在使用 vue 的开发中,我们有时会引用外部组件,包括 UI 组件(ElementUI、iview)。 当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。 但是在父组件中添加 scoped 之后,父组件的样式将不会渗透到子组件中,所以在父组件中书写子组件的样式是无效果的。 一、去掉 scoped在父组件的 <style> 中去掉 scoped 后,父组件中可以书写子组件的样式,但是你会担心这样会污染全局样式。 【因为我们知道正确使用全局样式的姿势是使用一个全局的 】二、混用本地和全局样式你可以在一个组件中同时使用有作用域和无作用域的样式:<style>/* 全局样式 */</style><style scoped>/* 本地样式 */</style>我们把 需要修改子组件的样式 写在上面那个全局样式里面三、使用深度作用选择器如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符:<style scoped>.a >>> .b { /* ... */}</style>有些像 SASS 之类的预处理器无法正确解析 >>>。 这种情况下你可以用 /deep/ 操作符取而代之 —— 这是一个 >>> 的别名,同样可以正常工作。 OK,主要内容就是以上几点。 需要额外补充的是: 1、通过 v-html 创建的 DOM 内容不受作用域内的样式影响,但是你仍然可以通过深度作用选择器来为他们设置样式2、CSS 作用域不能代替 class3、在递归组件中小心使用后代选择器上面是我整理给大家的,希望今后会对大家有帮助。 相关文章:在JS中命令模式概念与用法(详细教程)使用selenium抓取淘宝数据信息使用网络地图如何实现地图网格

免责声明:本文转载或采集自网络,版权归原作者所有。本网站刊发此文旨在传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及版权、内容等问题,请联系本网,我们将在第一时间删除。同时,本网站不对所刊发内容的准确性、真实性、完整性、及时性、原创性等进行保证,请读者仅作参考,并请自行核实相关内容。对于因使用或依赖本文内容所产生的任何直接或间接损失,本网站不承担任何责任。

标签: Vue

“样式的七个令人惊叹的机密技巧-助你优化样式程度-Vue (样式有哪些?)” 的相关文章

b-b-耍流氓-CSS的正当性-的误会-冲破-Vue中Tailwind

b-b-耍流氓-CSS的正当性-的误会-冲破-Vue中Tailwind

前言 随着前端的开展,对前端页面的要求越来越高,而的配置也越来越弱小,但关于写css样式来说却是十分头疼的的事。由于前端页面的动画要求以及页面规划的精细管控,须要写少量的css。为了处置写c...

由尤雨溪强力主导-前端格局动荡!Vue团队开源Rust驱动的闪电般JS打包工具 (尤雨溪在哪)

由尤雨溪强力主导-前端格局动荡!Vue团队开源Rust驱动的闪电般JS打包工具 (尤雨溪在哪)

Introduction The Vue team has officially open-sourced Rolldown, a Rust-based bundling tool. Rolld...

的七大罕用-Vue-组件-摸索-UI-3 (七种罕见病是什么病)

的七大罕用-Vue-组件-摸索-UI-3 (七种罕见病是什么病)

引见: 由于我在上班的公司中角色和职责的变动,作为后端开发人员的我在去年年底选用了Vue.js。当我深化钻研时,我发现Vue.js十分幽默。它不像Angular那样有很高的学习曲线,而且比R...

模型的强大表单生成器-简化您的表单创建流程-基于-Vue (模型的强大表现在哪里)
Vue3-Wiki知识库系统-Spring-Boot-实战-前后端分离 (vue3watch监听)

Vue3-Wiki知识库系统-Spring-Boot-实战-前后端分离 (vue3watch监听)

在当今的Web应用开发中,前后端分离已经成为了一种主流的开发模式。SpringBoot作为领域的翘楚,而Vue3则是一款现代化、灵活且高效的前端框架,它们的结合能够为我们带来更好的开发体验和高质量...

微前端开发的七大神器-Vue (微前端实现原理)

微前端开发的七大神器-Vue (微前端实现原理)

微前端彻底改变了 Web 的构建和维护方式。使用正确的工具集,Vue 爱好者可以轻松克服微前端的管理危机,并释放组件驱动开发的全部潜力。但是,选择最佳工具集是一项挑战,因为有许多具有不同功能的...

解锁开发的无限可能-Mode-Vue-Vapor-3-即将到来的 (开发者选项显示已解锁)

解锁开发的无限可能-Mode-Vue-Vapor-3-即将到来的 (开发者选项显示已解锁)

在 2023 新年展望中,尤雨溪提到了 VaporMode,一种受 Solid.js 启发的新编译策略。VaporMode 旨在通过将代码编译为更有效的 JavaScript 输出来提升应用性能。...