Vue组件化开发

上期回顾

• 条件判断(v-if、v-show)的基本使用、开发时选择
• 条件渲染案例(input添加key的区别)
• 循环遍历(v-for)
• 表单绑定(v-model)
• lazy修饰符
• number修饰符
• trim修饰符
• 拓展：数组的响应式方法

---

什么是组件化：

独立的，可复用的，整体化的一个功能模块

为什么要组件化：

1.实现功能模块的复用
2.开发单页面复杂应用
3.高效执行

组件化开发

注册组件

三大步骤
1.创建组件构造器( Vue.extend() )
2.注册组件( Vue.component() )
3.使用组件

• 代码演练

组件的使用

注意：
第三步不能使用小驼峰命名，大写字母变为小写字母，前面加 "-"

Vue.extend({template})
Vue.extend()：返回一个组件构造器
template：代表自定义组件的html模板
Vue.vomponent("组件命名"，组件构造器)
Vue.vomponent()：注册组件

---

全局组件和局部组件

• 代码演示

全局组件和局部组件

---

父组件和子组件

• 代码演示

父组件和子组件

---

组件的简写方式

• 代码演示

组件简写

省去了Vue.extend()的步骤，直接用一个对象代替

---

模板的两种分离写法

1.使用

使用

使用