Vue(一)

MVC > MVP MVVM

MVC定义:是软件设计的一种典范或者是根据代码功能不同进行划分的规则

MVC

Model-View-Controller
Model层负责数据存储
View负责数据展示和用户交互
Controller层负责业务逻辑

MVP

Model层负责数据存储
View层负责数据展示和用户交互
Presenter层 作为Model层和View层数据的中转站

MVVM

Model-View-(View-Model)
Model层负责数据的存储
View层负责数据的展示和用户交互
View-Model层负责实现数据的双向绑定
关系图1
关系图2

双向绑定原理

元素→数据 数据→元素

数据→元素:

使用Object.defineProperty()
利用getter 和 setter 进行绑定
注意私有属性的使用(防止递归进入死循环)

Vue常见的指令说明

指令名称	说明	实例
插值表达式	可以直接将值展示到页面上,里面可以放数据名称,也可以放简单的表达式	{{msg}} {{1+1}}
双向绑定指令	v-model,可以实现数据的双向绑定,一般用在表单元素内
属性绑定指令	v-bind : 当需要给元素中的属性绑定数据的时候,需要用到属性绑定指令
条件指令	v-if这个指令可以根据所绑定的数据是否为true,来决定是否要显示元素,如果是false,vue会直接将元素从页面中移除,里面的指令也不会再解析	看不见我
条件指令	v-show 这个指令可以根据所绑定的数据是否为true，来决定是否要显示元素，如果是false，vue会给元素设置display:none，里面的指令会照常解析	看不见我
事件注册指令	v-on:这个指令可以用来注册事件v-on:事件类型.事件修饰符="事件函数名称或者表达式"	按钮
事件注册指令	@这个指令时v-on:的缩写@事件类型.事件修饰符="事件函数名称或者表达式"	按钮
列表渲染指令	v-for可以用来遍历数组,对象,字符串,数字	{{item}}

事件修饰符

.stop (阻止事件冒泡)
.prevent(阻止事件默认行为)
.capture(事件捕获)
.self()
.once(只执行一次)