1.命令式框架(jQuery)
这里有个小例子:
1.获取id为app的div标签
2.设置他的文本内容是hello,world
3.为其绑定点击事件
4.当点击时候弹出提示ok
1.首先我们通过$来活动app的标签
$(`#app`)//获取id为app的标签
2.然后通过text来讲内容设置为hello,world
.text(`hello world`)//将内容设置为hello,world
3.然后我们为他注册上点击事件,然后弹出ok
.on(`click`,()=>){//绑定点击事件
alert('ok')弹出ok
})
这个是用jQuery实现方式,但是很多人可能没有用过jQuery,那我们就来用原生Js来实现这种方式
1.我们会通过document.querySelector来实现app的标签
const div=document.querySelector(`#app`)//获取app的标签
2.然后用innerText来设置内容为hello,world
div.innerText='hello,world'//将内容设置为hello,world
3.然后通过addEventListener来设置绑定点击事件
div.addEventListener['click',()=>]{//绑定点击事件
4.点击弹出ok
alert('ok')//点击弹出ok
}]
这两个写法不管是用哪一种都能与我们需求一一对应,这两种代码本身就是描述做事情的过程
2.声明式框架vue.js
我们的声明式框架会更关注与结果
看一下我们上面的需求是如何在vue如何实现的
<div @click="()=>alert('OK'))">hello world</div>
这个模板就是我们实现vue的实现方式,我们提供了一个结果,至于如何去实现的,我们不关心
vue帮我们封装了过程,因此我们能猜到vue内部实现一定是命令式的 ,但是暴露给用户确实更加的声明式
=========================================================================
此笔记原创为几何心凉的,个人没有学过vue,就看了凉哥的视频,然后做了一个比较详细的笔记