首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue.js快速入门

Vue.js快速入门

作者头像
xiangzhihong
发布2018-02-06 19:43:55
2.1K0
发布2018-02-06 19:43:55
举报
文章被收录于专栏:向治洪向治洪

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,执行完成后启动项目,浏览器出现以下接结果,说明启动成功。

这里写图片描述
这里写图片描述
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-09-29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Vue.js简介
    • MVVM模式
    • Vue.js环境搭建
      • 1,安装Node环境
        • 2,安装cnpm
          • 3,vue-cli安装
            • 4,新建项目
            相关产品与服务
            命令行工具
            腾讯云命令行工具 TCCLI 是管理腾讯云资源的统一工具。使用腾讯云命令行工具,您可以快速调用腾讯云 API 来管理您的腾讯云资源。此外,您还可以基于腾讯云的命令行工具来做自动化和脚本处理,以更多样的方式进行组合和重用。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档