使用BEM開發vue元件

2021-08-18 03:49:28 字數 543 閱讀 4373

bem是一種css開發的思想

bem 其實是block,element,modifier的縮寫,它們代表css中的塊,元素和修飾符(例如:元素的狀態)

bem 遵循下面的簡單的規則,使用__雙劃線和--雙劃線做分割線,使用單個的-中劃線作為你自己的樣式分隔符。

.input-search

.input-search__icon

.input-search__icon--selected

.input-search__value

class="input-search">

class="input-search__icon">

i>

class="input-search__icon--selected">

class="input-search__value">

div>

Vue 元件開發

將頁面拆分為多個元件,簡化了頁面開發,方便維護,元件也可以復用。元件的型別 元件開發流程 宣告 註冊 使用 demo 元件使用流程 div id div script varmyheader varmybody varmyfooter newvue template 使用元件 script 宣告是全...

vue 開發系列 元件開發

vue 的乙個特點是進行元件開發,元件的優勢是我們可以封裝自己的控制項,實現重用,比如我們在平台中封裝了自己的附件控制項,輸入控制項等。在vue 中乙個元件,就是乙個獨立的.vue 檔案,這個檔案分為三部分。1.模板 2.指令碼 3.樣式 我們看乙個系統中最常用的元件。if right r clas...

Vue元件化開發

1 模組化 模組化開發是從 邏輯角度來劃分的。2 元件化 是從ui介面角度來劃分的。使用標籤形式引入元件 mycom div 建立元件第一種方式 vue.component mycom 建立乙個vue例項 var vm newvue methods script body 使用標籤形式引入元件 my...