scoped樣式屬性怎么在vue組件中使用

這篇文章主要介紹了scoped樣式屬性怎么在vue組件中使用，此處通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考價值，需要的朋友可以參考下：

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

Scoped CSS

Scoped CSS規范是Web組件產生不污染其他組件，也不被其他組件污染的CSS規范。

vue組件中的style標簽標有scoped屬性時表明style里的css樣式只適用于當前組件元素

 它是通過使用PostCSS來改變以下內容實現的:

<style scoped>
.example {
 color: red;
}
</style>

<template>
 <div class="example">hi</div>
</template>

渲染結果：

<style>
.example[data-v-f3f3eg9] {
 color: red;
}
</style>

<template>
 <div class="example" data-v-f3f3eg9>hi</div>
</template>

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

<style>
/* global styles */
</style>

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

關于子組件的根元素

使用了scoped屬性之后，父組件的style樣式將不會滲透到子組件中，然而子組件的根節點元素會同時被設置了scoped的父css樣式和設置了scoped的子css樣式影響，這么設計的目的是父組件可以對子組件根元素進行布局。
.vue模板中的樣式是根據需要按需加載，訪問一個頁面該組件中的樣式就會追加到head標簽中，如果父子組件中都對某個子組件根節點元素進行了控制，則父組件里的樣式會被后來的覆蓋。

深選擇器

如果想對設置了scoped的子組件里的元素進行控制可以使用'>>>'或者'deep'

<template>
 <div id="app">
  <gHeader></gHeader>
 </div>
</template>

<style lang="css" scoped>
 .gHeader /deep/ .name{ //第一種寫法
  color:red;
 }
 .gHeader >>> .name{  //二種寫法
  color:red;
 }
</style>

<div class="gHeader">
 <div class="name"></div>
</div>

一些預處理程序例如sass不能解析>>>屬性，這種情況下可以用deep，它是>>>的別名，工作原理相同。

動態生成的內容

使用v-html動態創建的DOM內容，不受設置scoped的樣式影響，但你依然可以使用深選擇器進行控制

下面給大家補充下vue中使用v-html加載的富文本，css中定義樣式不生效

如題，使用v-html加載一段富文本，富文本里包含圖片，在手機上圖片寬度可能會溢出

  <div v-html="htmlContent" class="rich"></div> 
  <style scope>
  .rich>>> img{ display:block; max-width: 100%}
  </style>

注意：這里的>>>需要使用css語法，寫在less里會報錯

到此這篇關于scoped樣式屬性怎么在vue組件中使用的文章就介紹到這了,更多相關scoped樣式屬性怎么在vue組件中使用的內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！