视频教程分类
推荐视频教程
  • Laraval 9 学习正当时—保姆级教程,想学不会都难!Laraval 9 学习正当时—保姆级教程,想学不会都难!
  • 千万级数据并发解决方案(理论+实战)千万级数据并发解决方案(理论+实战)
  • Laravel基础与实战(模块化)Laravel基础与实战(模块化)
  • UNI-APP开发(仿饿了么)UNI-APP开发(仿饿了么)
  • 首页 >web前端 >Vue.js > 正文

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

    转载2022-05-12 21:23:261214 关注公众号:每天精选资源文章推送
    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
  • 相关文章

    相关视频


    专题推荐