vue基础概念介绍

组件化

vue的组件化是指把传统的html, css, js资源集成到一个.vue文件中，组成一个单独的组件，被其他模块调用，不再是文件之间相互引用，增加代码复用性。

Paste_Image.png

vue组件的重要选项

• data：vue对象的数据
• methods：vue对象的方法
• watch：设置对象的监听方法

1. 模板指令

• 数据渲染： 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

源码：

https://github.com/fuyunzhishang/vue_demo.git