组件化
组件化的概念
Web 中的组件其实就是页面组成的一部分，好比是电脑中的每一个元件（如硬盘、键盘、鼠标），它是一个具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用，页面就是有一个个类似这样的部分组成，比如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器，组件自由组合形成功能完善的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。
组件化的优点
提高开发效率
方便重复使用
简化调试步骤
提升整个项目的可维护性
便于协同开发
使用组件化实现输入框
点击提交按钮加入到已存在的li中
我们先看一下布局
简单的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中依然不变
循环list的值
v-bind 是向组件传递值
list遍历出来的值传到content 再以v-bind传入todo-item组件
示例:
<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='';
}
}
})
局部组件样式与全局相同 只是作用域不同
