Vue.js简介

Vue.js简介

Vue.js(读音 /vjuː/, 类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

作为前端的三大框架之一(其他两个是Angular、React),Vue得到了大多前端开发者的青睐,最新版本为2.4.4 。和其他框架对比,也是各有优劣,相关的介绍,读者可以参考笔者之前的文章:VueJs与其他框架的对比。

总的来说,可以总结为如下:

优点

  • 简单:官方文档很清晰,比 Angular 简单易学。
  • 快速:异步批处理方式更新 DOM。
  • 组合:用解耦的、可复用的组件组合你的应用程序。
  • 紧凑:~18kb min+gzip,且无依赖。
  • 强大:表达式 & 无需声明依赖的可推导属性 (computed properties)。
  • 对模块友好:可以通过 NPM、Bower 或 Duo 安装,不强迫你所有的代码都遵循 Angular 的各种规定,使用场景更加灵活。

缺点

  • 大而全:学习起来有难度,对于我来讲学习曲线很曲折,比较难理解一些。
  • 推翻重写:Vue重写了部分底层,等于是说在2.0版本又需要从头开始学习,对于习惯了1.x的开发者来说又需要重新学习。
  • 不支持IE8以下,因为Vue使用ES5书写。

MVVM模式

Vue.js 可以说是MVVM 架构的最佳实践,专注于 MVVM 中的 ViewModel,不仅做到了数据双向绑定,而且也是一款相对比较轻量级的JS 库,API 简洁,很容易上手。

所谓MVVM市值Model-View-ViewModel三者的关系。这里可以见到的介绍下MVVM框架:

  • Observer 数据监听器,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者,内部采用Object.defineProperty的getter和setter来实现。
  • Compile 指令解析器,它的作用对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数。
  • Watcher 订阅者, 作为连接 Observer 和 Compile 的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数。
  • Dep 消息订阅器,内部维护了一个数组,用来收集订阅者(Watcher),数据变动触发notify 函数,再调用订阅者的 update 方法。

而在Vue框架中,ViewModel是Vue.js的核心,它是一个Vue实例。Vue实例是作用于某一个HTML元素上的,这个元素可以是HTML的body元素,也可以是指定了id的某个元素。那么ViewModel是如何实现双向绑定的呢?

Vue.js 是采用 Object.defineProperty 的 getter 和 setter,并结合观察者模式来实现数据绑定的。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。

从图中可以看出,当执行 new Vue() 时,Vue 就进入了初始化阶段,一方面Vue 会遍历 data 选项中的属性,并用 Object.defineProperty 将它们转为 getter/setter,实现数据变化监听功能;另一方面,Vue 的指令编译器Compile 对元素节点的指令进行扫描和解析,初始化视图,并订阅Watcher 来更新视图, 此时Wather 会将自己添加到消息订阅器中(Dep),初始化完毕。当数据发生变化时,Observer 中的 setter 方法被触发,setter 会立即调用Dep.notify(),Dep 开始遍历所有的订阅者,并调用订阅者的 update 方法,订阅者收到通知后对视图进行相应的更新。

Vue.js环境搭建

本文教程以macOS为准,window上搭建类似。

1,安装Node环境

Vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js的环境的,所以首先要安装node.js。node.js的官方地址为:https://nodejs.org/en/download/,下载相应版本安装即可。

安装完毕之后,在命令行下验证是否安装成功:输入npm -v ,显示版本信息就表示安装成功。

2,安装cnpm

安装完node之后,npm包含的很多依赖包是部署在国外的,为了加快依赖包的加载速度,开发中一般选择使用国内的镜像。cnpm是淘宝对npm的镜像服务器,安装命令如下:

npm install -g cnpm --registry=https://registry.npm.taobao.org

3,vue-cli安装

vue-cli是vue官方提供的一个命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。安装命令如下:

cnpm install -g vue-cli

安装完后,检查是否安装成功,输入vue(或者使用vue -v查看版本信息),出现相关的帮助信息则说明安装成功。

4,新建项目

新建一个项目文件夹(如 vue),cd到此文件夹,输入init命令新建一个vue项目:

vue init webpack vue-demo

说明:我们暂时不适用模板提供的测试框架,如Karma + Mocha,以及Nightwatch。

初始化的项目的目录如下:

关于目录结构的介绍后面会专门给大家介绍。接下来,cd到vue-demo 文件夹下,执行命令安装项目依赖包:

cnmp install

接下来,在命令行里输入命令: cnpm run dev,执行完成后启动项目,浏览器出现以下接结果,说明启动成功。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏漫漫前端路

vue-cli 3.0 下发布一个 TypeScript 组件

vue-cli 3.0 提供了一系列功能,包括对 Babel, TypeScript, ESlint, PWA 等开箱即用的支持,同时,它也提供了一个 CLI ...

1612
来自专栏张戈的专栏

原创插件:WordPress博客友好对话框+文章随机推荐滚动条插件(附代码版)

双 11 光棍节,我在博客发布了一篇给博客部署一个友好对话框的教程,用了几天感觉非常不错!就进一步折腾了一下,目前这个 js 已实现以下多种功能: 一、功能描述...

47712
来自专栏更流畅、简洁的软件开发方式

分页控件的使用能不能再简单一点呢,能不能一个页面搞定所有的列表需求?

目的: 1、一个页面(DataList.aspx)可以显示多个模块的列表功能。      一般是有一个列表需求就需要一个aspx文件,如果有100个列表,...

3185
来自专栏编程之旅

PHP开发——yii2多图上传组件的使用

最近在使用yii2开发一个表单页面的时候,有多图上传的需求,稍微找了找这方面的组件,基本都安利fileInput这个组件,于是就尝试着使用这个库来完成后端表单页...

2691
来自专栏编程之路

羊皮书APP(Android版)开发系列(一)Icon图片生成神器

        工欲善其事,必先利其器,我们要开发一款app,首先我们肯定要知道app的名字,其次我们就要准备app的logo图片,而这个logo图片又有多种尺...

913
来自专栏向治洪

Vue.js快速入门

Vue.js简介 Vue.js(读音 /vjuː/, 类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设...

2649
来自专栏腾讯NEXT学位

小程序初学者必读——小程序的简单入门

2203
来自专栏葡萄城控件技术团队

一个Web页面的问题分析

几个月之前我接到一个新的开发任务,要在一个旧的Web页面上面增添一些新的功能。在开发的过程中发现旧的代码中有很多常见的不合适的写法,结合这些问题,如何写出更好的...

2009
来自专栏较真的前端

使用神器eruda 进行移动端调试

3223
来自专栏葡萄城控件技术团队

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

Angular作为目前最为流行的前端框架,受到了前端开发者的普遍欢迎。不论是初学Angular的新手,还是有一定Angular开发经验的开发者,了解本文中的12...

2118

扫码关注云+社区

领取腾讯云代金券