前端面试题
这套前端面试题我会持续更新的,我不想用太多文字去解释"题",而是用代码去解释问题,所以我们不要渴望通过背提纲来提升自己,看源码找答案
什么是MVVM?能否用js实现一下Vue v-model的原理?
MVVM即M(模型层)+V(视图层)+VM(视图模型层)
当模型层中的数据发生改变时 通过视图模型层可以修改与之绑定的视图层的数据(单向绑定)
当视图层发生改动时,通过视图模型曾与之绑定的模型层的数据页发生改变(双向绑定) 这种现象成为MVVM思想
总结:MVVM就是Vue双向绑定的思想
那么这三个模块都是代码中的哪一部分,上一段HTML代码说明问题
<!DOCTYPE html>
<html lang="ch-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>什么是MVVM</title>
</head>
<body>
<!--view-->
<h2 id="myH2"></h2>
<input type="text">
<script>
//Model
let msg ="welecome"
//view Model
let node =document.getElementById("myH2")
node.innerHTML =msg
</script>
</body>
</html>
打个比方view就像是一个县,model就好比是县长和它的领导班子,view model就是一部火车让县长的领导班子愉快的去县城就职(没有麻匪的事!)
代码一执行👇
msg就出现在了h2里面
Vue的 v-model的原理?
其实很简单 v-model双向绑定它实现了view直接影响model的壮举,它是这么实现的(简单模拟一下)
<!DOCTYPE html>
<html lang="ch-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>什么是MVVM</title>
</head>
<body>
<!--view-->
<h2 id="myH2"></h2>
<input type="text" id="myInput">
<script>
//model
let msg ="welcome"
//view-model
window.onload=function(){
let nodeh2 =document.getElementById("myH2")
let nodeinput =document.getElementById("myInput")
nodeh2.innerHTML =msg
nodeinput.value =msg
//加上监听input变动改变msg 重新赋值给h2
nodeinput.addEventListener('input',function(){
msg =this.value
nodeh2.innerHTML =msg
})
}
</script>
</body>
</html>
代码应该很好理解,由此一来就实现了view影响model实现了双向绑定继而体现了MVVM的思想
拓展
Vue想要单向绑定:v-once
想要一次性的在加载完毕以后就绑定完毕,从此再无瓜葛
<p v-once>{{msg}}</p>
Vue实例
msg:'loveu3000'
这么一来就赋值了一下,任由你再改msg的值 视图层也不会有变化
相当于innerHTML的 v-html
什么是XSS攻击?
innerHTML可以插入标签,恶意者可以修改里面的代码块,从而达到加载页面运行自己插入的
代码的目的
下面这么做就很危险👇
<input type="text" v-model="msg"/>
<div v-html="msg"></div>
// 因为用户输入的信息不可信，这样输入什么就会放入什么，v-html就相当于一个innerHTML
不过v-html只能执行html和css(与innnerHTML一样) 插入的内容如果绑定了事件即使解析了也不会触发,所以Vue还是防止了XSS攻击
它会覆盖原本标签内的子标签
<p v-html="value">看看我被覆盖了吗</p>
Vue实例
value:'<span style ="background-color:pink">我是插入的超文本</span>',
运行一下会发现只剩下"我是插入的超文本了"…
总结
原创内容喜欢的话点赞支持一下吧,这个面试题的专栏我会持续更新的~~么么哒
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
