vue3 style

scoped

1.作用于当前组件,postcss转换，
2.子组件的根元素上面设置style会起作用

选择器

深度选择器(改变子组件的style)

当前组件选择器 :deep(子组件选择器)

插槽选择器(改变slot中的style)

:slotted(插槽里面的选择器)

全局选择器(将style应用到全局)

:global()

css 使用提示

尽量减少挂载样式的数量，用class或id，减少使用元素选择器等

使用module

<template><p :class="classes.red">This should be red</p>
</template><style module="classes">
.red {color: red;
}
</style>

module不命名时模版用$style获取style样式

setup引入module

注入的类可以通过 useCssModule API 在 setup() 和

动态 CSS

可以用data中定义或setup引出的变量通过v-bind对style进行绑定

<style>
.text {color: v-bind(color);
}
</style>

vue3 style相关推荐

php仿京东幸运大转盘抽奖,原生js vue 抽奖插件仿京东大转盘抽京豆（原创）...
插件描述:一个基于原生 javript vue2 vue3 的大转盘抽奖插件更新时间:2020-11-24 00:18:54 在 vue2.x / vue3.x 中使用方式 1:通过 import ...
select 标签自定义样式
需求原因:我在vue开发中,也会习惯使用各种UI库,但让人难受的是,提供的UI组件的样式难以覆盖,比如我要用的select,我的界面风格是深蓝色的,它的白色背景都不符合需求,要跑到element-pl ...
手势识别(1)：基础理论
像点击(clicks)是GUI平台的核心,轻点(taps)是触摸平台的核心那样,手势(gestures)是Kinect应用程序的核心.和图形用户界面中的数字交互不同,手势是现实生活中存在的动作.如果没 ...
vue3 + vite + ts + setup , 第十二练 Vue3 css style 新特性，样式穿透，插槽选择器，全局选择器，在vue3中使用tailwindcss
一.vue3.x 样式新特性样式穿透深度选择器 <style scoped> .a :deep(.b) {/* ... */ } </style> 插槽选择器 <s ...
Vue3 第二十二篇：双向绑定样式style
1.定义需要绑定的class,并通过!important修饰来提高优先级: 2 .定义一个是否生效的开关: 3.将class绑定到标签上: 4.触发开关(略)
【Vue】新建一个Vue3项目
目录 1.新建vue项目 2.路径更改至新建的vue项目处 3.安装cnpm 4.cnpm安装vant3 5.安装babel-plugin 6.安装vue路由 7.安装axios 其他注意事项仅用于 ...
如何优雅的在 vue 中使用非响应式对象_一篇文章上手Vue3中新增的API
1. 初始化项目 // ① npm i -g @vue/cli // ② vue create my-project // ③ npm install @vue/composition-api -S/ ...
html任务3 模拟滚动条,vue3系列：vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件...
/** * @Desc Vue3.0虚拟滚动条组件V3Scroll * @Time andy by 2021-01 * @About Q:282310962 wx:xy190310*/ props: ...
升级 Vue3 大幅提升开发运行效率
作者:louiszhai,腾讯 IEG 前端开发工程师 Vue3 性能提升了 1.3~2 倍,SSR 性能提升了 2~3 倍,升级 Vue3 正是当下. 背景原计划 2019 年发布的 Vue3,又 ...