资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

如何理解尤大在Vue的生态进展中提到的style动态变量注入

这篇文章主要介绍“如何理解尤大在 Vue的生态进展中提到的 style动态变量注入”,在日常操作中,相信很多人在如何理解尤大在 Vue的生态进展中提到的 style动态变量注入问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何理解尤大在 Vue的生态进展中提到的 style动态变量注入”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

成都创新互联公司自2013年创立以来,是专业互联网技术服务公司,拥有项目成都网站设计、成都做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元石林做网站,已为上家服务,为石林各地企业和个人服务,联系电话:18980820575

在 Vue RFC 中有一个关于样式的提案 SFC style CSS variable injection,这个 RFC  为Vue开发者提供了一种使用组件的响应性数据作为CSS变量的方法。

在Vue 3中,只需一个简单的语法,我们就可以在运行时更新样式。

在本文中,我们将了解如何使用这些SFC样式,它是如何工作的,然后了解一些来自RFC的高级知识。

本文主要内容:

1.如何使用SFC样式?2. Vue中的响应式样式 3. Vue SFC 样式变量如何工作 4. 需要知道的一些知识 1.CSS变量在子组件中不可用  2.使用前检查浏览器支持情况 5 .总结

Single File Component : 单文件组件,简称 SFC

如何使用SFC样式?

要使用这个特性,只需要两个步骤:

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

  2. 在组件的script中声明一个响应式变量。

  3. 在 css 中使用 v-bind 来使用这个变量。

来个粟子:

    

很简单。

如果查看浏览器中的组件,可以看到元素从数据中正确地获得了其颜色的值

如何理解尤大在 Vue的生态进展中提到的 style动态变量注入

这也适用于更复杂的数据结构,假设我们有一个名为fontStyles的对象,该对象中有一个weight的属性。

我们仍然使用v-bind访问它,但因为我们传递是一个对象,所以需要使用 JS 表达式来访问这个内部属性,且需要将表达式括放在引号中。

    

Vue中的响应式样式

无论我们是使用 JS 表达式还是仅仅使用根级数据绑定,我们都可以利用Vue的内置响应式在运行时更新样式。

假设我们希望能够使用一个按钮来更改文本的颜色,那么可以这样做。

   hello
    Make Blue  

我们所要做的就是改变对应的变量值,CSS样式就会自己更新。这就是这个特性如此强大的原因,它为我们提供了一种干净的方式来修改页面在运行时的外观。

如何理解尤大在 Vue的生态进展中提到的 style动态变量注入

Vue SFC 样式变量如何工作

了解了使用方式之后,我们来看下 Vue 是怎么做到的。如果我们检查元素,我们可以更好地了解Vue如何运作它的魔力。

在我们的样式节中引用的任何变量都被作为内联样式添加到组件的根元素中。

如何理解尤大在 Vue的生态进展中提到的 style动态变量注入

像普通的CSS那样写,我们声明CSS变量-015c408c-color,并将其设置为red,将变量--015c408c-font_weight,设置为800。

element.style { /* root element */     --015c408c-color: red;     --015c408c-font_weight: 800; }  .text {     color: var(--015c408c-color);     font-weight: var(--015c408c-font_weight); }

然后就是将 v-bind 转换成使用 CSS 变量方式。

如何理解尤大在 Vue的生态进展中提到的 style动态变量注入

然后,每当响应性数据发生变化时

这就是如何在运行时更新样式就像上面的 color 做的那样。

CSS变量在子组件中不可用

为了避免继承问题,定义的CSS变量对它的任何子组件都不可用。

例如,如果我们向现有组件添加一个子组件。

    

假设子组件是这样构建的。

  

这不会改变颜色,因为我们的子组件不知道任何CSS变量。

如何理解尤大在 Vue的生态进展中提到的 style动态变量注入

使用前检查浏览器支持情况

如果你想要项目使用该特性,需要先检查一下浏览器对 CSS 变量的支持情况

如何理解尤大在 Vue的生态进展中提到的 style动态变量注入

到此,关于“如何理解尤大在 Vue的生态进展中提到的 style动态变量注入”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


当前标题:如何理解尤大在Vue的生态进展中提到的style动态变量注入
转载注明:http://cdkjz.cn/article/gscogo.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220