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 条评论
登录 后参与评论

相关文章

来自专栏腾讯NEXT学位

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

2353
来自专栏漫漫前端路

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

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

1962
来自专栏沈唁志

几个实用的 WordPress 代码片段

1673
来自专栏企鹅号快讯

小程序开发的40个技术窍门,纯干货!

微信小程序正式上线一周时间,相关话题持续升温。现在为大家筛选出小程序开发实战需要注意的40个技术点,供大家参考! ? 小程序开发的40个技术窍门 1 Q:为什么...

26210
来自专栏编程之旅

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

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

2901
来自专栏较真的前端

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

3613
来自专栏Youngxj

emlog新方法:导航栏加入Font Awesome图标,可自定义

2393
来自专栏向治洪

Vue.js简介

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

3117
来自专栏有趣的Python和你

人生若只如初见,何必找包爬数据SeleniumPhantomJS豆瓣登陆

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

一个Web页面的问题分析

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

2079

扫码关注云+社区

领取腾讯云代金券