MVC MVVM 模式
MVC 到 MVVM
MVC模式的目的是实现一种动态的程序设计，简化后续对程序的修改和扩展，并且使程序某一部分的重复利用成为可能。
- 模型（Model）：程序员编写程序应有的功能（实现算法等）、数据库专家进行数据管理和数据库设计（可以实现具体的功能）；
- 控制器（Controller）：负责转发请求，对请求进行处理；
- 视图（View）：界面设计人员进行图形界面设计。
MVVM模式
C controller存在后台，通过接口将数据存给后台
这个模式之下,前后端没法独立开发，必须等接口做好了才能往下走,前端不够独立，太依赖于后台
data称之为VM，连接了视图,相当于前端自己有了一个视图控制器
v-model怎么实现的？
v-model的原理是双向数据绑定
双向数据绑定的核心在于 Object.defineProperty()
这个方法用来操作对象和劫持对象
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input placeholder="请输入名字" v-model="username" id="userName"><p id="username">{{username}}</p><script src="./02_v-model.js"></script>
</body></html>let obj = {}
Object.defineProperty(obj, "username", {// 可以劫持到对对象的操作get: function () {console.log("取值")},set: function (newValue) {console.log("设置值")document.getElementById("username").innerText = newValue}
})// 接下来获取输入事件
// 监听键盘上去的事件
// 回调函数都有一个默认的内置对象event，event里面就有一个target
// target就是输入框,获取value
// 赋值给object.username
document.getElementById("userName").addEventListener("keyup", function (e) {obj.username = e.target.value
})
/*** 1.获取键盘事件* 2.事件已发生,值就会变化,将变化的新值付给object.username* 3.数据劫持,数据改变,input的username的值改变*/v-if和v-show的区别
v - if是在判断到底有没有渲染这个dom,不满足条件是不会渲染的
应用场景:单次的判断
v - show是在判断是否显示这个dom,不满足条件是会渲染的,只是display:none.
应用场景:多次的判断