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.
应用场景:多次的判断