Vue(一)
2017-12-16 本文已影响0人
sunstaotao
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(只执行一次)
