组件化
vue的组件化是指把传统的html, css, js资源集成到一个.vue文件中，组成一个单独的组件，被其他模块调用，不再是文件之间相互引用，增加代码复用性。
Paste_Image.png
vue组件的重要选项
- data：vue对象的数据
- methods：vue对象的方法
- watch：设置对象的监听方法
- 模板指令
- 数据渲染： v-text, v-html, {{}}
Paste_Image.png
- 控制模块隐藏：v-if, v-show
Paste_Image.png
- 渲染循环列表： v-for
Paste_Image.png
- 事件绑定：v-on
Paste_Image.png
- 属性绑定：v-bind
Paste_Image.png
组件demo
- todolist
Paste_Image.png
结构：
Paste_Image.png
行为：
Paste_Image.png
样式：
Paste_Image.png
- 加个开关：
Paste_Image.png
Paste_Image.png
- 存储到LocalStorate
通过 watcher 我们能监听到任何数值属性的数值更新
Paste_Image.png
如何划分组件
功能模块：select, pagenation ...
页面区域：header, footer, sidebar ...
Vue组件之间的调用
Paste_Image.png
Vue组件之间的通信
Paste_Image.png
网友评论