剛開始使用vue的時候容易被裡面的樣式搞懵：
樣式可以在main.js中引入，在模組js檔案中引入，在元件中的style標籤引入，在元件中的script標籤引入，還可以在index.html的body中引入。
我不禁要問:
1、從不同位置引入的樣式到底是什麼關係？
2、在實際定義樣式時應該定義在哪個位置，以避免樣式產生的衝突？
紙上得來終覺淺，絕知此事要躬行。看十次文件，不如做乙個測試。
新建乙個最簡單的專案並執行：如果你人品沒問題，會看到彈出的瀏覽器中，head標籤內有這樣的style
在專案src目錄中找找看：
第二個style在\src\components\helloworld.vue檔案中
但是我想就開頭出現的問題了解得更深入。為避免多個問題糾纏在一起，我逐個去分析：
1、為方便看到測試的結果，我改造一下專案：
為什麼呢？我們來看看main.js是怎麼定義的：
隨後引入router，router裡引入了helloworld.vue，繼而載入hello.css
而所有元件的style都是script裡的**執行完後再載入。
所以我大致可以得出結論：
樣式從main.js入口開始順序載入，
遇到元件則載入元件中script所引入的樣式，
先處理完所有scipt中的引入，
再處理style，
style按包含關係從外到內載入
但是問題還沒完，我又得出另外的問題：這些頁面都是固定的，如果是非同步載入頁面，當路由切換到另乙個頁面時，此頁面原來的樣式是否會刪除，當前頁面的樣式會新增到**？
2、為此我又再路由中新增了comb.vue，並且使用非同步載入該元件。
點選hello之後，載入hello-style
點選comb之後，非同步載入comb元件，先引入comb-import，再引入comb-style
可以看到，瀏覽器先載入1.js元件檔案，然後執行script載入comb.css,再載入comb.vue的style，而當我切換回coma頁面時，head標籤內的樣式不再有變化。
另外可以看到，當我更改路由使helloworld不在根路徑顯示，helloworld就只載入hello.css，而不會載入helloworld的style，只有helloworld頁面顯示出來時才載入。
3、我再看看如果把helloworld也改成非同步元件會怎麼樣？
可以看到之前第二個載入的hello-import沒有了，然後先點選誰，誰就先載入
所以可以知道：如果coma和comb都是非同步元件，則先開啟哪一頁就載入哪一頁的script和style
再定義乙個combb，在comb中引入，但不顯示，則combb只顯示comb_b.css，但不顯示style
所以：載入順序應再加兩條規則：
非同步元件先顯示的先載入
沒有顯示的頁面或者元件不載入style
4、再看乙個問題：乙個元件內可以定義不止乙個style，並且有scoped的style和沒有scoped的style可以並存，它們會按照所定義的順序載入。
看瀏覽器，按順序載入：
並且我把樣式稍微做了改變，比如先給noscope2加height，發現覆蓋了noscope1的高度；再然後，給.noscope1加上.noscope2，高度又變成50，也就是說：跟普通css擁有一樣的權重優先機制。
5、再看
寫在body內的樣式
通過main.js控制的樣式都在head標籤中顯示，由此就可以知道，如果我在body內定義樣式，是可以把head標籤內的同名樣式覆蓋掉的。
但要注意的是，在body內引入的樣式，因為已經不在main.js控制範圍內，也就是不參與打包，所以必須定義在static靜態資源目錄內。
同時要注意，在body引入的樣式不在src資料夾內，沒有熱更新的功能，所以每次更改後需要手動重新整理頁面。
6、總結
經過以上的測試，可以得知style出現的順序跟你定義的位置，是否非同步元件，初始狀態是否顯示有關。而樣式的覆蓋又可以通過新增scoped和在body內新增樣式檔案來控制。相信單頁應用要精準控制樣式絕對不是難事。
vue的深入理解
1.vue的初步認識 var data var vm new vue document.write vm.data data true document.write true document.write vm.el document.getelementbyid vue det true new ...
深入理解vue元件
當使用table select等標籤時，元件標籤化可能會有bug，此時應該使用 is 接受元件。在子元件定義data時，data必須是乙個函式，不能是乙個物件。在vue中如果要操作dom，需要使用 ref 引用，從而獲取dom節點。需求 定義乙個子元件，使其數字自加，在父元件中對子元件的數字求和。單...
Vue元件深入理解 插槽
插槽相當於佔位符，用表示 用於父元件填充子元件的資訊 在中間填充內容，則擋傳入的slot中不存在時，則會使用使用填好的內容。type submit submitslot button 父級元件模板不能編譯子元件的變數，因此需要值傳遞。插槽有點類似於父子元件傳值，但傳的不是值，而是傳進去復用的模板 實...