第 1 章 Vue开发入门

第 1 章 Vue开发入门

Vue是一个专注于构建Web用户界面的JavaScript库。本章首先通过一段简单的介绍让你对Vue有一个初步的认识,然后创建一个Web应用,为本书后续创建的不同项目奠定基础。

1.1 为什么需要另外一个前端框架

相对来说,Vue在JavaScript前端领域属于后来者,但是对于当前主流JavaScript库的地位具有很大的威胁。它易用、灵活、速度快,还提供了许多功能和可选工具,这使得开发者能够快速地构建一个现代Web应用。Vue的作者尤雨溪将其称为渐进式框架

  • Vue遵循渐进增量的设计原则,其核心库专注于用户界面,使得现有的项目可以方便地集成使用Vue。
  • Vue既可以构建出很小的原型,又可以构建出复杂的大型Web应用。
  • Vue非常容易上手——初学者能轻松掌握Vue,而已经熟悉Vue的开发者则可以在实际项目中快速发挥出它的作用。

Vue整体上遵循MVVM(Model-View-ViewModel,模型-视图-视图模型)架构,也就是说View(用户界面或视图)和Model(数据)是独立的,ViewModel(Vue)是View和Model交互的桥梁。Vue对View和Model之间的更新操作做了自动化处理,并且已经为开发者进行了优化。因此,当View的某个部分需要更新时,开发者并不需要特别指定,Vue会选择恰当的方法和时机进行更新。

Vue还吸取了其他类似框架(如React、Angular和Polymer)的精华。下面是对Vue核心功能的概述。

  • 一个响应式的数据系统,能通过轻量级的虚拟DOM引擎和最少的优化工作来自动更新用户界面。
  • 灵活的视图声明,包括优雅友好的HTML模板、JSX(在JavaScript中编写HTML的技术)以及hyperscript渲染函数(完全使用JavaScript)。
  • 由可维护、可复用组件构成的组件化用户界面。
  • 官方的组件库提供了路由、状态管理、脚手架以及更多高级功能,使Vue成为了一个灵活且功能完善的前端框架。

1.1.1 一个有发展前景的项目

2013年,尤雨溪开始筹划构建Vue的第一版原型。那时候尤雨溪任职于Google,并在工作中使用Angular。尤雨溪最初的目标是吸取Angular中所有优秀的功能,比如数据绑定和数据驱动DOM,并摒弃会导致框架死板、难以学习和使用的一些功能。

Vue于2014年2月首次公开亮相,并在第一天就大获成功:出现在HackerNews首页,在Reddit的/r/javascript板块中位居榜首,并且其官网获得了1万次独立访问。

Vue的第一个主要版本1.0于2015年10月发布。截至2015年年底,Vue在npm中的下载量飙升至38.2万次,在GitHub上收获了1.1万个star,其官网获得了36.3万次独立访问。主流的PHP框架Laravel选用Vue替代React作为其官方的前端库。

Vue的第二个主要版本2.0于2016年9月发布,具有基于虚拟DOM的全新渲染器以及许多新特性,比如服务端渲染和性能提升等。本书就是基于2.0编写的。Vue是目前速度最快的前端框架之一。根据与React团队共同得出的对比报告,Vue的性能甚至优于React()。写作本书时,Vue是GitHub上第二流行的前端框架,有7.2万个star,位于React之后、Angular之前1

1中文版出版时,Vue已超越React,位居第一,参见:https://github.com/collections/front-end-javascript-frameworks。——编者注

在其路线图中,Vue的下一个主要版本会集成更多的Vue原生库,比如Weex和NativeScript,以便使用Vue来构建原生移动应用,同时还会添加新的特性和优化。

如今,有许多公司都在使用Vue,比如微软、Adobe、阿里巴巴、百度、小米、Expedia、任天堂和GitLab。

1.1.2 兼容性要求

Vue没有任何第三方依赖,可以在所有兼容ECMAScript 5的浏览器中使用。这也就是说它不支持Internet Explorer 8及以下版本,因为Vue使用了JavaScript中相对较新的特性,比如Object.defineProperty,而它们在老版本的浏览器中是无法polyfill的。

在本书中,编写代码使用的JavaScript版本为ES2015(以前称为ES6),所以在学习前几章时,需要一个较新的浏览器(比如Edge、Firefox或Chrome)来运行示例代码。本书后续章节将介绍编译器Babel,它编译过的代码可以很好地运行在老版本浏览器中。

1.2 一分钟设置

事不宜迟,下面我们通过快速设置来创建第一个Vue应用。由于Vue与生俱来的灵活性,只需要一个简单的<script>标签就能添加到任意Web页面中。下面创建一个包含Vue库的简单Web页面,其中有一个简单的div元素和一个<script>标签:

<html>
<head>
  <meta charset="utf-8">
  <title>Vue Project Guide setup</title>
</head>
<body>

  <!-- 将库添加到这里 -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>

  <!-- 一些HTML代码 -->
  <div id="root">
    <p>Is this an Hello world?</p>
  </div>

  <!-- 一些JavaScript代码 -->
  <script>
  console.log('Yes! We are using Vue version', Vue.version)
  </script>

</body>
</html>

在浏览器的控制台中,可以看到类似如下的内容:

Yes! We are using Vue version 2.0.3

正如上面的代码所示,库对外提供了一个Vue对象,该对象包含使用Vue所需的所有功能。至此,一切就绪。

1.3 创建一个应用

现在,这个Web页面中还没有运行Vue应用。整个库都是基于Vue实例的,而实例是View和Model(数据)交互的桥梁。因此需要创建一个新的Vue实例来启动应用:

// 创建Vue实例
var app = new Vue({
  // 根DOM元素的CSS选择器
  el: '#root',
  // 一些数据
  data () {
    return {
      message: 'Hello Vue.js!',
    }
  },
})

在上面的代码中,使用关键字new调用Vue构造器创建了一个新的实例。Vue构造器有一个参数—— option对象。该参数可以携带多个属性(称为选项),我们会在后面的章节中逐渐学习。这里只使用其中的两个属性。

通过el选项,我们使用CSS选择器告知Vue将实例添加(挂载)到Web页面的哪个DOM元素中。在这个示例中,Vue实例将使用<div id="root"> DOM元素作为其根元素。另外,也可以使用Vue实例的$mount方法替代el选项:

var app = new Vue({
  data () {
    return {
      message: 'Hello Vue.js!',
    }
  },
})
// 添加Vue实例到页面中
app.$mount('#root')

 Vue实例的大多数特殊方法和属性都是以美元符号($)开头的。

我们还会在data选项中初始化一些数据,利用了携带一个字符串的message属性。现在Vue应用运行起来了,但是此处还并没有做什么。

 在单个Web页面中,开发者可以添加任意多个Vue应用。只需要为每个应用创建出新的Vue实例并挂载到不同的DOM元素即可。当想要将Vue集成到已有的项目中时,这非常方便。

Vue开发者工具

Vue有一个官方调试工具,在Chrome中以扩展的方式呈现,名为Vue.js devtools。通过该工具可以看到应用的运行情况,这有助于调试代码。可以在Chrome网上应用商店()下载;如果使用Firefox,则可以到Firefox附加组件()下载。

使用Chrome版本的话,还需要进行额外的设置。在扩展设置中,启用Allow access to file URLs选项,这样调试工具就能在从本地磁盘打开的Web页面上检测Vue了。

{%}

打开我们的Web页面,按快捷键F12(在OS X中快捷键是Shift + command + c)打开Chrome开发者工具,然后找到Vue选项卡(有可能隐藏在More tools...下拉菜单中)。打开该选项卡之后,就可以看到一棵默认名为Root的Vue实例树。如果点击Root的话,会在侧边栏上显示出实例的相关属性。

{%}

 可以将devtools选项卡拖放到喜欢的位置。建议将其放在靠前的位置,因为当Vue不处于开发模式或没有运行时,该选项卡在页面中是隐藏起来的。

可以通过name选项修改Vue实例的名字:

var app = new Vue({
  name: 'MyApp',
  // ...
})

当一个页面中有多个Vue实例时,这有助于直观地在开发者工具中找到具体的某个实例。

{%}

1.4 借助模板实现DOM的动态性

在Vue中,开发者可采用多种方式编写View。现在,我们先从模板开始。模板是描述View最简单的方法,因为它看起来很像HTML,并且只需要少量额外的语法就能轻松实现DOM的动态更新。

1.4.1 文本显示

先来看看模板的第一个功能:文本插值。文本插值用于在Web页面中显示动态的文本。文本插值的语法是在双花括号内包含单个任意类型的JavaScript表达式。当Vue处理模板时,该JavaScript表达式的结果将会替换掉双花括号标签。用下面的代码替换掉<div id="root">元素:

<div id="root">
  <p>{{ message }}</p>
</div>

在上面的模板中,有一个<p>元素。该元素的内容是JavaScript表达式message的结果。该表达式将返回Vue实例中message属性的值。现在应该可以在Web页面中看到输出了一行新的文本内容:Hello Vue.js!。这看起来只是显示了一个字符串,但是Vue已经为开发者做了很多事情——DOM和数据连通了。

为了证明这一点,我们打开浏览器控制台并修改app.message的值,然后按回车键:

app.message = 'Awesome!'

可以发现显示的文本发生了改变。这背后的技术称为数据绑定。也就是说每当数据有改变时,Vue都能够自动更新DOM,不需要开发者做任何事情。Vue框架中包含一个非常强大且高效的响应式系统,能对所有的数据进行跟踪,并且能在数据发生改变时按需自动更新View。所有这些操作都非常快。

1.4.2 利用指令添加基本的交互

接下来在我们的静态应用中加入交互性吧。例如,允许用户通过输入文本修改页面中显示的内容。要达到这样的交互效果,可以在模板中使用称为指令的特殊HTML属性。

 Vue中所有的指令名都是带v-前缀的,并遵循短横线分隔式(kebab-case)语法。这意味着要用短横线将单词分开。HTML属性是不区分大小写的(大写或小写都没有任何问题)。

在此,需要使用的指令是v-model,它将<input>元素的值与message数据属性进行绑定。在模板里面添加一个新的<input>元素,该元素带有v-model="message"属性:

<div id="root">
  <p>{{ message }}</p>
  <!-- 添加一个文本输入框 -->
  <input v-model="message" />
</div>

input值发生改变时,Vue会自动更新message属性。你可以在input中输入一些内容,验证文本内容是否会随着输入的变化而变化,以及开发者工具中值的变化:

{%}

Vue提供了许多指令,开发者还可以自定义指令。不用担心,后续章节会进行介绍。

1.5 小结

本章首先快速设置了一个Web页面来着手使用Vue,然后编写了一个示例应用。我们在页面中创建并挂载了一个Vue实例到DOM中,接着编写模板实现了DOM的动态性。在这个模板中,我们借助文本插值用一个JavaScript表达式来显示文本内容。最后,通过v-model指令将input元素绑定到数据属性,给Web页面添加了一些交互。

在下一章中,我们会使用Vue创建第一个真正的Web应用——Markdown笔记本。我们将用到Vue提供的更多优秀功能,使得该应用的开发成为一次快速而有趣的体验。

目录

  • 版权声明
  • 前言
  • 第 1 章 Vue开发入门
  • 第 2 章 项目1:Markdown笔记本
  • 第 3 章 项目2:城堡决斗游戏
  • 第 4 章 高级项目设置
  • 第 5 章 项目3:支持中心
  • 第 6 章 项目4:博客地图
  • 第 7 章 项目5:在线商店以及扩展
  • 第 8 章 项目6:使用Meteor开发实时仪表盘