MVVM开发模式

MVVM是Model-View-ViewModel的缩写，他是一种基于前端开发的架构模式。

• Model：代表数据模型，数据和业务逻辑都在Model层定义
• View：代表UI视图，负责数据展示
• ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作

Vue.js就是MVVM风格的js库

传统的MVP开发模式，在P层应用到了大量的DOM操作

ViewModel层所处理的各种交互操作，为Vue内置的各种操作，对于使用者来说，并不需要对其额外关注，这使得我们编写代码的注意力集中在数据层和视图层

简化了DOM的操作，因此减少了代码量

指令综合使用 ToDoList实现

ToDoList小栗子：将表单内输入的数据以列表的形式输出在页面上

代码分析：

• 给input元素绑定message，使表单中的输入值放到data当中
• 给button绑定监听器，当点击button时触发对应函数
• 给li添加v-for循环，依次向列表项添加内容

页面组件化

将页面分割为不同的小组件，方便后期的维护

• 组件分为全局组件和局部组件
• 使用组件处的HTML标签即可改为组件名
• component声明组件名
• props接收外部传入的数据
• template为子组件的模板，最终会替代掉HTML当中应用该组件的位置

全局组件

全局组件直接在script中声明并编写代码即可

局部组件

局部组件与全局组件不同之处在于：局部组件的名称需要在Vue实例中进行声明

父子组件间传值

父组件向子组件：

通过v-bind进行传值，子组件需要注意接收

子组件向父组件传值：

通过$emit向上一层触发事件

在父组件需要进行监听

todolist代码组件化改写：

HTML：

JS：