vue的組件及運用

 

❤記在前面

         享受一個微雨的夜晚··· ···

 

【前面學了vue-router，今天開始正式搭建頁面，先從首頁開始，在搭建頁面的過程當中，也會穿插vue的知識點】

今天先來說下組件，而後搭個頭部組件實現複用

 【組件基礎官方文檔：https://cn.vuejs.org/v2/guide/components.html】

 

一 、官方解讀

1.官方怎麼說？組件能夠擴展HTML元素，封裝可重用的代碼，這句話，只要記住可重用這幾個字很重要——即到底何時應該把一部分的代碼抽離出來構成組件？ （圖片來自官網）

 

---

 

2.關於組件的命名

組件的命名在項目中統一用 kebab-case（短橫線）表示：

---

 

 

3.組件的複用

能夠講組件進行任意次數的複用，舉個例子以下圖，每次點擊按鈕，每一個組件都會各自獨立維護它的count；由於每用一次組件，就會有一個它的新實例被建立

---

 

 

4.其餘

還有不少關於組件使用的很重要的內容，如組件之間數據的傳遞、組件的事件等等，在後面的項目中具體用到了再穿插

 

2、組件的運用——建立頭部組件

1.新建一個myHeader頭部組件

首先在src->compontent下新建一個myHeader.vue組件，有helloworld.vue的刪掉或者直接改個名直接用都是OK的，代碼以下：

---

 

解析上圖：一個myHeader.vue的頁面分爲了三個部分，<template></template>裏面是放html代碼的是爲結構，<script></script>裏面寫js是爲邏輯，<style></style>裏寫CSS是爲樣式，這就是vue裏面的結構、樣式、邏輯三者分離，裏面標記了三個小要點：

❤① name，就是對這個組件的命名，具體表如今哪裏，待會再說；

❤② data標記出來的意思就是記得data必須函數；

❤③ style裏面有個scoped，就是你加了CSS就會只做用於這個組件、這個頁面，不會污染；

 

2.組件的引入

① 在div裏面加了個helloworld便於展現

---

 

 

②而後，在app.vue裏面引入

---

 

 

 怎麼引入的？import照着上圖引入，而後components屬性裏面註冊一下，在這裏講一下命名規範，import後面請使用首字母大寫的形式MyHeader,template裏面使用短橫線鏈接法my-header

 

3.組件的複用

組件的複用就比較簡單了，寫複製粘貼一下就好了，記住：組件都是獨立的

---

 

運行項目

4.最後再回到第1個點下面關於組件裏面name屬性具體體如今哪裏的問題：

打開vue的插件（vue-devtools），name屬性的值就是組件的名字，你能夠本身修改name屬性看看效果：

vue-devtools的安裝傳送：http://www.javashuo.com/article/p-wucenxmp-ga.html

---

 

 

3.而後，修改myHeader.vue組件裏面的內容，這就是咱們的頭部：

---

 

 

加點css 【CSS樣式的修改在後面補充了：http://www.javashuo.com/article/p-czxcvlru-hv.html】

---

 

 

 

 以上，完成，辛苦啦~~~