作用域样式属性怎么在vue组件中使用

　　介绍

这篇文章主要介绍了作用域样式属性怎么在vue组件中使用,此处通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下:

为什么要使用vue

vue是一款友好的,多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。

<强>范围CSS

范围CSS规范是网络组件产生不污染其他组件,也不被其他组件污染的CSS规范。

vue组件中风格的标签标有范围属性时表明风格里的CSS样式只适用于当前组件元素

,它是通过使用PostCSS来改变以下内容实现的:

& lt; style  scoped> 　　.example  { 　　,颜色:红色; 　　} 　　& lt;/style> 　　 　　& lt; template> 　　,& lt; div 类=癳xample"祝辞hi
　　& lt;/template>

渲染结果:

& lt; style> 　　.example [data-v-f3f3eg9], { 　　,颜色:红色; 　　} 　　& lt;/style> 　　 　　& lt; template> 　　,& lt; div 类=癳xample", data-v-f3f3eg9> hi
　　& lt;/template>

混合使用全局属性和局部属性

& lt; style>/*,global  styles  */& lt;/style> 　　 　　& lt; style  scoped>/*,local  styles  */& lt;/style>

<强>关于子组件的根元素

使用了作用域属性之后,父组件的风格样式将不会渗透到子组件中,然而子组件的根节点元素会同时被设置了范围的父css样式和设置了作用域的子css样式影响,这么设计的目的是父组件可以对子组件根元素进行布局。
.vue模板中的样式是根据需要按需加载,访问一个页面该组件中的样式就会追加到头标签中,如果父子组件中都对某个子组件根节点元素进行了控制,则父组件里的样式会被后来的覆盖。

<强>深选择器

如果想对设置了作用域的子组件里的元素进行控制可以使用& # 39;在祝辞祝辞& # 39;或者& # 39;深# 39;

& lt; template> 　　,& lt; div  id=癮pp"比; 　　& lt;才能gHeader> & lt;/gHeader> 　　,& lt;/div> 　　& lt;/template> 　　 　　& lt; style  lang=癱ss", scoped> 　　,.gHeader /深度/,. name{,//第一种写法 　　,,颜色:红色; 　　,} 　　,,,.gHeader 的在的在祝辞,. name{,,//二种写法 　　,,颜色:红色; 　　,} 　　& lt;/style> 　　 　　& lt; div 类=癵Header"祝辞 　　,& lt; div 类=皀ame"祝辞& lt;/div> 　　& lt;/div>

一些预处理程序例如sass不能解析祝辞祝辞祝辞属性,这种情况下可以用深,它是在祝辞祝辞的别名,工作原理相同。

<强>动态生成的内容

使用v-html动态创建的DOM内容,不受设置作用域的样式影响,但你依然可以使用深选择器进行控制

<强>下面给大家补充下vue中使用v-html加载的富文本,css中定义样式不生效

如题,使用v-html加载一段富文本,富文本里包含图片,在手机上图片宽度可能会溢出

,, & lt; div  v-html=癶tmlContent",类=皉ich"祝辞& lt;/div>, 　　& lt;才能style  scope> 　　,.rich>才能的在祝辞,img{,显示:块;,max-width:, 100%} 　　& lt;才能/style>

注意:这里的祝辞祝辞祝辞需要使用css语法,写在少里会报错

到此这篇关于范围样式属性怎么在vue组件中使用的文章就介绍到这了,更多相关范围样式属性怎么在vue组件中使用的内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

作用域样式属性怎么在vue组件中使用