元件化
元件化的概念
Web 中的元件其實就是頁面組成的一部分，好比是電腦中的每一個元件（如硬碟、鍵盤、滑鼠），它是一個具有獨立的邏輯和功能或界面，同時又能根據規定的接口規則進行互相融合，變成一個完整的應用，頁面就是有一個個類似這樣的部分組成，比如導航、清單、彈窗、下拉菜單等。頁面隻不過是這些元件的容器，元件自由組合形成功能完善的界面，當不需要某個元件，或者想要替換某個元件時，可以随時進行替換和删除，而不影響整個應用的運作。
元件化的優點
提高開發效率
友善重複使用
簡化調試步驟
提升整個項目的可維護性
便于協同開發
使用元件化實作輸入框
文本送出
點選送出按鈕加入到已存在的li中
我們先看一下布局
div布局
簡單的div布局
循環list的值
v-bind 是向元件傳遞值
list周遊出來的值傳到content 再以v-bind傳入todo-item元件
示例：
<todo-item v-bind:content="item"
v-for="item in list">
</todo-item>
定義全局元件在script标簽中
定義全局元件
示例:
Vue.component ("TodoItem",{
//props接收todo-item傳過來的值 content在{{}}中展示在頁面中
props:['content'],
template:"<li>{{content}}</li>"
});
局部元件
html中依然不變
<todo-item v-bind:content="item"
v-for="item in list">
</todo-item>
script标簽中
定義局部元件 template元件模闆
var TodoItem={
props:['content'],
template:"<li>{{content}}</li>"
};
局部元件使用
注冊到vue執行個體中 使用components對象注冊
TodoItem 注冊到執行個體中 名字依然為TodoItem
var app=new Vue({
el:'#app',
components:{
TodoItem:TodoItem
},
data:{
list:[],
inputValue:''
},
methods:{
handleBtnClick:function () {
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
局部元件樣式與全局相同 隻是作用域不同