Vue.js的元件化開發
元件化開發
-
什麼是元件？
web中的元件其實就是頁面組成的一部分，
好比是電腦中的每一個元件（如硬碟、鍵盤、滑鼠），
它是一個具有獨立的邏輯和功能或介面，
同時又能根據規定的介面規則進行相互融化，
變成一個完整的應用。
頁面就是由一個個類似這樣的組成部分組成的，
比如導航、列表、彈窗、下拉選單等。
頁面只不過是這樣元件的容器，
元件自由組合形成功能完整的介面，
當不需要某個元件，或者想要替換某個元件時，
可以隨時進行替換和刪除，而不影響整個應用的執行。、
前端元件化的核心思想就是將一個巨大複雜的
東西拆分成粒度合理的小東西。
-
使用元件的好處？
提高開發效率
方便重複使用
簡化除錯步驟
提升整個專案的可維護性
便於協同開發
vue中的元件
-
vue中的元件
vue中的元件是一個自定義標籤，
Vue.js的編譯器為它添加了特殊功能
vue也可以擴充套件原生的html元素，
封裝可重用的程式碼
元件的基本組成：
樣式結構
行為邏輯
資料
註冊元件
-
全域性註冊
可以在任何模板中是使用，使用之前要先註冊
語法：使用Vue.component（元件名，選擇物件）
元件名命名約定：
駝峰命名法，如（cameCase）
烤串命名發，如（kabab-case）
在html中使用元件：
使用烤串（kabab-case）
命名法例如，註冊：Vue.component('my-component',{})
使用：<my-componen></my-componen>
比如我們寫個下拉列表的元件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select元件</title>
<script src="../vue.js"></script>
</head>
<body>
<div
<div style="float:left">
<h2>自定義的下拉框</h2>
<custom-select btn-value="查詢"></custom-select>
</div>
<div style="float: left;border-left: 5px solid #000000">
<h2>自定義的下拉框2</h2>
<custom-select btn-value="搜尋"></custom-select>
</div>
</div>
<script>
//全域性註冊元件
Vue.component("custom-select",{
//使li顯示隱藏
data:function(){
return {
selectShow:false
};
},
//元件間的通訊props，注意下面的屬性改了，
//我們需要動態繫結在前面加v-bind可以簡寫為：
props:["btnValue"],
template:`<section class="warp">
<div class="searchIpt clearFix">
<div class="clearFix">
<input type="text" class="keyWord" value=""
@click="selectShow=!selectShow">
<input type="button" :value="btnValue">
<span></span>
</div>
</div>
<ul class="list" v-show="selectShow">
<li>html+css</li>
<li>html5+css3</li>
<li>Javascript</li>
<li>Angular</li>
<li>React</li>
<li>Vue</li>
<li>jQuery</li>
<li>nodeJs</li>
</ul>
</section>`
});
new Vue({
el:"#app"
});
</script>
</body>
</html>
實現結果如下
可以複用
-
區域性註冊
在元件例項中通過選項物件的註冊，只在所在的作用域中使用
｛
components:{
組建名：選項物件
}
｝
元件間的通訊
父元件要給子元件傳遞資料，
子元件需要將它內部發生的事情告訴父元件
-
父元件 ——>子元件
元件例項的作用域是孤立的，
不能在子元件直接用父元件的資料。
可以在元件上使用自定義屬性繫結資料，
在元件中需要顯示用props宣告自定義屬性名。
如之前的程式碼：
我們就用props聲明瞭自定義的btnValue屬性名
-
子元件——>父元件
需要用到自定義事件，
父元件用$on監聽自定義事件，
$emit觸發父元件所關心的自定義事件
元件中的data必須是函式
每個元件都是互相獨立的，如果它們共用一個物件，
在更改一個元件資料的時候，會影響其它元件，如果是函式的話，
每個元件都有都是又自己獨立的資料，互相不會影響。
受限制的元素
-
DOM模板解析
Vue在瀏覽器解析和標準化HTML後才能獲取模板內容，
所以有些元素限制了能被它包裹的元素。
例如：ul中只能放li；select中只能放option
某些元素中放入了自定義元素，
不符合W3C標準，最終會解析錯誤。
元件間的通訊示意圖
元件間的通訊.png
想看更多關於元件的知識，可以去官網學習：