Vue.js系列—(1)入门

Vue.js介绍

如果你是一名前端开发,你还没听过Vue.js,那你一定要面壁思过了。。。
Vue.js是当下非常火热的MVVM框架,什么?你连MVVM框架都不知道,那面壁思过时间再加10分钟。。。
好了不开玩笑,现在我们开始正式介绍一下,官网说Vue.js是一种渐进式的JavaScript框架,我是这么理解渐进式的,大部分传统应用使用的还是jQuery库来完成我们的前端交互,我们也可以在项目中引入Vue.js,满足部分功能来达到我们的目的。Vue.js还是一个以数据驱动的MVVM框架,意思是当你想去改变某个交互功能的时候,你应该想着通过改变一个数据去达到目的来替代操作DOM来完成。Vue.js提供了丰富又简洁的API供我们使用,我们只需在DOM里面和数据绑定起来,即可达到我们的目的。

MVVM

前面说到了MVVM框架,MVVM的全称是(Model-View-ViewModel),下图是Vue.js在MVVM里面的交互实现。

从上图看出View部分是由DOM组成的,Model就是JavaScript对象组成的数据,ViewModel就是一个由数据绑定和事件监听的Vue.js实例,这三部分共同组成完整的MVVM。

数据绑定

上图展示了在Vue.js中是如何进行双向数据绑定的。Vue.js内在初始化的时候会通过ES5的一个方法Object.defineProperty会读取Data内的数据,并且劫持对应的gettersetter,解析绑定的DOM,在getter方法内收集数据之间的依赖,然后进行监听。当数据发生改变的时候,会触发setter方法,然后对外发出一个通知告诉依赖项数据已经改变并且需要更新,数据更新后重新渲染DOM然后展示到页面上。然后再由DOM上的交互来触发数据的改变。

开始使用

我们从一个最简单的例子开始,假设现在有一个输入框,我们需要在页面上实时展示输入框的内容。如果按照传统jQuery方式实现,我们需要做的是,获取输入框DOM节点,然后绑定input事件,在事件内获取展示内容的DOM节点,然后再更新node.innerHTML

我们来看看如何使用Vue.js来完成这个功能:
首先看看HTML片段,我们定义了一个id为app的div的父容器,子节点分别是一个带有v-model属性的input文本框,一个是p标签,注意内容有个地方是由双层花括号包起来的变量名,这是一种mustache语法。

1
2
3
4
5
6
7
<div id="app">
<input type="text" v-model="name">
<p>my name is {{name}}</p>
</div>
<!-- 引入Vue.js -->
<script src="path/to/vue.js">
</script>

再来看看JS代码部分,我们new了一个Vue实例,入参是一个对象类型的配置项,其中包括el属性和data

1
2
3
4
5
6
new Vue({
el: '#app',
data: {
name: ''
}
})

然后我们就能看到如下所示的结果:demo

这仅仅是个简单的demo,从demo我们能看出,使用简洁的代码就能实现双向数据绑定,充分体现了Vue.js在数据绑定上带来的便利。接下来我们来看看创建实例的参数,其中el是指Vue.js实例要挂载的DOM节点,找到这个DOM并替换Vue.js编译后的内容;data是指实例中的数据,需要用到的数据一定要提前声明,否则Vue.js无法通过Object.defineProperty进行劫持(除非使用vm.$set(obj, key, value)进行添加数据)。Vue.js提供的参数选项除了上述两个之外,还有许多和实例相关的参数,考虑到篇幅长度,下一篇讲进行Vue.js实例化的参数选项解读。

谢谢大家支持!