Vue-MVVM设计模式
2019-05-17 本文已影响0人
瑟闻风倾
1. MVC和MVVM
1.1 MVC
- M（Model）
- V（View）
- C（Controller）
单向绑定：数据变化可驱动视图
1.2 MVVM
- M（Model）
- V（View）
- VM（ViewModel）：把数据代理给了VM
(1) 双向绑定(v-model)： 数据变化可渲染到视图，视图更新(常用input/textare、select、radio和checkbox)也会驱动数据变化。
(2) 数据劫持：什么样的数据怎么变化才可被拦截并触发视图变化。即实现数据变化驱动视图需重点掌握：
- 数据定义：对象用之前要先在data中声明(如果属性不存在，默认后增加的内容不会刷新视图)
- 差值表达式：掌握差值表达式
{{data中定义的变量值}}的使用 - 掌握数组常用操作：push()、findIndex() 和 splice() 等。
1.2.3 {{取值表达式}}
取值表达式可以运算、取值和做三元。
2. vue中MVVM对应角色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="vue1026.js"></script>
</head>
<body>
<!-- view -->
<div id="app">
{{name}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",//将VM挂载到id为app的div区域：通过VM调度，Model发生变化自动同步到视图View
data:{
name:"liy" //Model
}
});
</script>
</html>
