前端常用的主流框架有哪些?
Angular: 2009年 Google 71.2K
React: 2013年 Facebook 165k
Vue: 2014年 尤雨溪 180k
Vue简介
Vue.js是一个渐进式的(可以使用一部分特性),可逐步采用的JavaScript框架,用于在Web上构建UI,支持数据双向绑定
我所理解的渐进式框架就是:不用掌握它所有的语法规则也能进行开发
特点
-
简单、易用,上手快(HTML+CSS+JS)
-
灵活(完整的生态)
-
高效(30k)
-
个人项目
MVVM开发模式
M:model – data数据
V:view – Html UI界面
VM:viewModel – Vue的实例
Vue的模式是m-v-vm模式,通过modelView作为中间层(即vm的实例),进行双向数据的绑定与变化。
model中的数据改变了,同时反应到view视图中,
view视图中的数据更新了,model中的数据也会同步改变。
实现原理
- 通过建立虚拟dom树document.createDocumentFragment(),方法创建虚拟dom树。
- 一旦被监测的数据改变,会通过Object.defineProperty定义的数据拦截,截取到数据的变化。
- 截取到的数据变化,从而通过订阅——发布者模式,触发Watcher(观察者),从而改变虚拟dom的中的具体数据。
- 最后,通过更新虚拟dom的元素值,从而改变最后渲染dom树的值,完成双向绑定。
创建一个Vue的简单程序
- 引入vuejs
<script src="js/vue.js" charset="utf-8"></script>
- 创建一个div并设置class或id
<body>
<div id="app">
<input v-model="message" /><br/>
// this就是vue实例
<p>{
{this.message}}</p>
</div>
</body>
- 在body标签下实例化vue实例并与div对象绑定
<script>
// vue的内部维护了一个虚拟的DOM对象。
var vm = new Vue({
el:"#app", // vue实例绑定了id为app的标签 有class属性也可以用.
data:{
message:"Hi Vue",count:0}
})
</script>
- 运行