目录
一、Vue简介
Vue是一套用于构建用户界面的渐进式框架,是MVVM架构的最佳实践,它不仅专注于MVVM中的ViewModel,做到了数据双向绑定,还是一款相对比较轻量级的JS库,而且它的API简洁。
补充:
- 渐进式代表的含义是:主张最少。什么是主张呢?每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。
- 原生HTML页面是通过js操作DOM,而Vue.js操作的是数据。
二、渐进式框架
渐进式代表的是主张最少,在Vue框架中怎么体现呢?
下图包含了Vue的所有部件,我们可以在声明式渲染的基础上,通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。因此Vue与其他庞大而单一架构区别之一就在于它是按需搭建,只做自己该做的事,没有做不该做的事。
组件化开发
Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),再分别写好各种组件的实现(填坑),然后整个应用就算做完了,实现了组件化开发。
三、声明式渲染
Vue.js的核心库只关注视图层,它的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统。
通过“Hello Vue”示例学习使用Vue:
1、引入vue.js
<!-- 1、引入vue.js -->
<script src="../js/vue.js"></script>
2、准备数据渲染区(View)
<!-- 2、准备数据渲染区(View),{{ 插值表达式 }} -->
<div id="app">
{{ message }}
</div>
3、创建Vue对象(Vue实例)
<script>
/* 3、创建Vue对象/Vue实例(ViewModel) */
var vm = new Vue({
el: '#app',
/* Model */
data: {
message: 'Hello Vue!'
}
})
</script>
上述示例页面显示结果如下:
此时数据和DOM已经被建立了关联,所有东西都是响应式的。我们打开这个示例的浏览器控制台,并修改 vm.message 的值,可以看到页面显示结果相应地进行更新。如下:
此时不再和HTML直接交互,因为Vue实例会将其挂载到一个DOM元素中(上述例子中是#app),然后对其进行完全控制。
四、双向数据绑定
之前了解MVVM架构模式时知道,Vue采用的就是MVVM模式,并且ViewModel是Vue.js的核心,它是一个Vue实例。
MVVM架构流程图如下:
MVVM本身就是实现了双向绑定的,如下图所示,在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。
Vue数据双向绑定是通过 数据劫持 结合 发布者-订阅者模式 来实现的。
- Observer:数据监听器,用于监听数据变化,如果数据发生改变,不论是在View层还是在Model层,Observer都会知道,然后告诉Watcher。
- Compile:指定解析器,用于初始化视图,对数据进行解析,绑定指定的事件。
- Watcher:订阅者,一方面接收Observer通过消息订阅器Dep传递过来数据变化,一方面通知Compile进行视图更新。
Vue.js数据双向绑定的流程:
首先将需要绑定的数据劫持方法找出来,之后用Observer监听这堆数据,如果数据发生变化,Observer就会告诉Watcher,然后Watcher会决定让那个Compiler去做出相应的操作,这样就完成了数据的双向绑定。