組件化
????組件化的概念
????????Web 中的組件其實(shí)就是頁(yè)面組成的一部分，好比是電腦中的每一個(gè)元件（如硬盤吁系、鍵盤德召、鼠標(biāo)），它是一個(gè)具有獨(dú)立的邏輯和功能或界面汽纤，同時(shí)又能根據(jù)規(guī)定的接口規(guī)則進(jìn)行相互融合上岗，變成一個(gè)完整的應(yīng)用，頁(yè)面就是有一個(gè)個(gè)類似這樣的部分組成蕴坪，比如導(dǎo)航肴掷、列表敬锐、彈窗、下拉菜單等呆瞻。頁(yè)面只不過是這些組件的容器台夺，組件自由組合形成功能完善的界面，當(dāng)不需要某個(gè)組件痴脾，或者想要替換某個(gè)組件時(shí)颤介，可以隨時(shí)進(jìn)行替換和刪除，而不影響整個(gè)應(yīng)用的運(yùn)行赞赖。
組件化的優(yōu)點(diǎn)
????提高開發(fā)效率
????方便重復(fù)使用
????簡(jiǎn)化調(diào)試步驟
????提升整個(gè)項(xiàng)目的可維護(hù)性
????便于協(xié)同開發(fā)
使用組件化實(shí)現(xiàn)輸入框
點(diǎn)擊提交按鈕加入到已存在的li中
我們先看一下布局
????簡(jiǎn)單的div布局
????循環(huán)list的值
????v-bind 是向組件傳遞值
????list遍歷出來的值傳到content 再以v-bind傳入todo-item組件
示例：
????<todo-item v-bind:content="item"
? ? ? ????? ? v-for="item in list">
????</todo-item>
定義全局組件在script標(biāo)簽中
定義全局組件
示例:
????Vue.component ("TodoItem",{
????? ? //props接收todo-item傳過來的值 content在{{}}中展示在頁(yè)面中
? ????? props:['content'],
? ????? template:"<li>{{content}}</li>"
????});
局部組件
????html中依然不變
????循環(huán)list的值
????v-bind 是向組件傳遞值
????list遍歷出來的值傳到content 再以v-bind傳入todo-item組件
示例:
<todo-item v-bind:content="item"
? ? ? ? ? v-for="item in list">
</todo-item>
script標(biāo)簽中
定義局部組件 template組件模板
示例:
var TodoItem={
? props:['content'],
? ? template:"<li>{{content}}</li>"
};
局部組件使用
????注冊(cè)到vue實(shí)例中 使用components對(duì)象注冊(cè)
????TodoItem 注冊(cè)到實(shí)例中 名字依然為TodoItem
示例:
var app=new Vue({
? ? el:'#app',
? ? components:{
? ? ? TodoItem:TodoItem
? },
? ? data:{
? ? ? list:[],
? ? ? ? inputValue:''
? ? },
? ? methods:{
? ? ? ? handleBtnClick:function () {
? ? ? ? ? this.list.push(this.inputValue);
? ? ? ? ? this.inputValue='';
? ? ? }
? ? }
})
局部組件樣式與全局相同 只是作用域不同
