• 技术文章 >web前端 >Vue.js

    聊聊Vue3 style中新增了哪些特性(汇总)

    青灯夜游青灯夜游2022-05-12 21:23:26转载435
    Vue3对style样式进行了升级,下面本篇文章给大家汇总分享一下Vue3 style的新特性,希望对大家有所帮助!

    Vue3.0后推出的setup函数,像写JS一样开发Vue组件,此外style也加入了很多新特性,如引入了变量和函数,使css复用性更强...

    style新特性

    Vue3.2版本对单文件组件的style样式进行了很多升级,如局部样式、css变量以及样式暴露给模板使用等。(学习视频分享:vue视频教程

    一、局部样式

    <style> 标签带有 scoped attribute 的时候,它的 CSS 只会应用到当前组件的元素上:

    <template>
      <div class="example">hi</div>
    </template>
     
    <style scoped>
    .example {
      color: red;
    }
    </style>

    二、深度选择器

    处于 scoped 样式中的选择器如果想要做更“深度”的选择,也即:影响到子组件,可以使用 :deep() 这个伪类:

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

    通过 v-html 创建的 DOM 内容不会被作用域样式影响,但你仍然可以使用深度选择器来设置其样式。

    三、插槽选择器

    默认情况下,作用域样式不会影响到 <slot/> 渲染出来的内容,因为它们被认为是父组件所持有并传递进来的。使用 :slotted 伪类以确切地将插槽内容作为选择器的目标:

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

    四、全局选择器

    如果想让其中一个样式规则应用到全局,比起另外创建一个 <style>,可以使用 :global 伪类来实现:

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

    五、混合使用局部与全局样式

    你也可以在同一个组件中同时包含作用域样式和非作用域样式:

    <style>
    /* global styles */
    </style>
     
    <style scoped>
    /* local styles */
    </style>

    六、支持CSS Modules

    <style module> 标签会被编译为 CSS Modules 并且将生成的 CSS 类键暴露给组件:

    1、 默认以$style 对象暴露给组件;

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

    2、可以自定义注入module名称

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

    七、与setup一同使用

    注入的类可以通过 useCssModule API 在 setup()<script setup> 中使用:

    <script setup>
    import { useCssModule } from 'vue'
     
    // 默认, 返回 <style module> 中的类
    const defaultStyle = useCssModule()
     
    // 命名, 返回 <style module="classes"> 中的类
    const classesStyle = useCssModule('classes')
    </script>

    八、动态 CSS

    单文件组件的 <style> 标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上:

    <script setup>
    const theme = {
      color: 'red'
    }
    </script>
     
    <template>
      <p>hello</p>
    </template>
     
    <style scoped>
    p {
      color: v-bind('theme.color');
    }
    </style>

    (完)

    (学习视频分享:web前端开发编程基础视频

    以上就是聊聊Vue3 style中新增了哪些特性(汇总)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:Vue vue3 vue.js
    上一篇:一文解析Vue中的插槽(slot) 下一篇:浅析Vue前端路由中 hash 与 history的区别
    千万级数据并发解决方案

    相关文章推荐

    • vue3为什么快?vue3的效率提升主要在哪方面?• 手把手教你使用Vue3实现图片散落效果• 收藏这些vue项目性能优化方式,总有一天能用上!• 5 款适合国内使用的 Vue 移动端 UI 组件库• 一文了解Vue3中的watchEffect,聊聊其应用场景!• 通过9个Vue3 组件库,看看聊前端的流行趋势!• 聊聊vue指令中的修饰符,常用事件修饰符总结
    1/1

    PHP中文网