您的位置:首页 > 房产 > 家装 > Vue面试题 第一章

Vue面试题 第一章

2025/3/18 10:03:12 来源:https://blog.csdn.net/2301_79858637/article/details/139805967  浏览:    关键词:Vue面试题 第一章

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.

应用场景:多次的判断

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com