第 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提供的更多优秀功能,使得该应用的开发成为一次快速而有趣的体验。