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,可以实现数据的双向绑定,一般用在表单元素内	<input type="text" v-model="msg">
属性绑定指令	v-bind : 当需要给元素中的属性绑定数据的时候,需要用到属性绑定指令	<img v-bind:src=\"url\">
条件指令	v-if这个指令可以根据所绑定的数据是否为true,来决定是否要显示元素,如果是false,vue会直接将元素从页面中移除,里面的指令也不会再解析	<div v-if="flag">看不见我</div>
条件指令	v-show 这个指令可以根据所绑定的数据是否为true，来决定是否要显示元素，如果是false，vue会给元素设置display:none，里面的指令会照常解析	<div v-show="flag">看不见我</div>
事件注册指令	v-on:这个指令可以用来注册事件v-on:事件类型.事件修饰符="事件函数名称或者表达式"	<button v-on:click.stop="btnClick">按钮</button>
事件注册指令	@这个指令时v-on:的缩写@事件类型.事件修饰符="事件函数名称或者表达式"	<button @click.stop="btnClick">按钮</button>
列表渲染指令	v-for可以用来遍历数组,对象,字符串,数字	<li v-for="(item, index) in 数组、对象、字符串、数字" :key="index">{{item}}</li>

事件修饰符

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