Vue 是一个专注于构建Web 用户界面的JavaScript 库。本文首先通过一段简单的介绍让你对Vue 有一个初步的认识，然后创建一个Web 应用。
为什么需要这个前端框架
相对来说，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 成为了一个灵活且功能完善的前端框架。
这是一个有发展前景的项目
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 的全新渲染器以及许多新特性，比如服务端渲染和性能提升等。Vue 是目前速度最快的前端框架之一。根据与React 团队共同得出的对比报告，Vue 的性能甚至优于React（）。截至发文前，Vue 位居GitHub 流行前端框架第一位，有12.5万个star，已超越React、Angular 。参见：。
如今，有许多公司都在使用Vue，比如 微软 、Adobe、 阿里巴巴 、百度、小米、Expedia、任天堂和 GitLab 。
兼容性要求
Vue 没有任何第三方依赖，可以在所有兼容ECMAScript 5 的浏览器中使用。这也就是说它不支持Internet Explorer 8 及以下版本，因为Vue 使用了JavaScript 中相对较新的特性，比如Object.defineProperty，而它们在老版本的浏览器中是无法polyfill 的。
一分钟设置
事不宜迟，下面我们通过快速设置来创建第一个Vue 应用。由于Vue 与生俱来的灵活性，只需要一个简单的<script>标签就能添加到任意Web 页面中。下面创建一个包含Vue 库的简单Web 页面，其中有一个简单的div 元素和一个<script>标签：
<html>
<head>
<meta charset="utf-8">
<title>Vue Project Guide setup</title>
</head>
<body>
<!-- 将库添加到这里 -->
<script src=""></script>
<!-- 一些HTML 代码 -->
<div id="root">
<p>Is this an H el lo 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 所需的所有功能。至此，一切就绪。
创建一个应用
现在，这个Web 页面中还没有运行Vue 应用。整个库都是基于Vue 实例的，而实例是View和Model（数据）交互的桥梁。因此需要创建一个新的Vue 实例来启动应用：
// 创建Vue 实例
var app = new Vue({
// 根DOM 元素的CSS 选择器
el: '#root',
// 一些数据
data () {
return {
}
},
})
在上面的代码中，使用关键字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')
我们还会在data 选项中初始化一些数据，利用了携带一个字符串的message 属性。现在Vue 应用运行起来了，但是此处还并没有做什么。
在单个Web 页面中，开发者可以添加任意多个Vue 应用。只需要为每个应用创建出新的Vue 实例并挂载到不同的DOM元素即可。当想要将Vue 集成到已有的项目中时，这非常方便。
Vue 开发者工具
Vue 有一个官方调试工具，在 Chrome 中以扩展的方式呈现，名为Vue.js devtools。通过该工具可以看到应用的运行情况， 这有助于调试代码。可以在Chrome 网上应用商店（）下载；如果使用Firefox，则可以到Firefox 附加组件（）下载。
使用Chrome 版本的话，还需要进行额外的设置。在扩展设置中，启用Allow access to fileURLs 选项，这样调试工具就能在从本地磁盘打开的Web 页面上检测Vue 了。
打开我们的Web 页面，按快捷键F12（在OS X 中快捷键是Shift + command + c）打开Chrome开发者工具，然后找到Vue 选项卡（有可能隐藏在More tools…下拉菜单中）。打开该选项卡之后，就可以看到一棵默认名为Root 的Vue 实例树。如果点击Root 的话，会在侧边栏上显示出实例的相关属性。
TIP：可以将devtools 选项卡拖放到喜欢的位置。建议将其放在靠前的位置，因为当Vue 不处于开发模式或没有运行时，该选项卡在页面中是隐藏起来的。
可以通过name 选项修改Vue 实例的名字：
var app = new Vue({
name: 'MyApp',
// ...
})
当一个页面中有多个Vue 实例时，这有助于直观地在开发者工具中找到具体的某个实例。
借助模板实现DOM 的动态性
在Vue 中，开发者可采用多种方式编写View。现在，我们先从模板开始。模板是描述View最简单的方法，因为它看起来很像HTML，并且只需要少量额外的语法就能轻松实现DOM的动态更新。
文本显示
先来看看模板的第一个功能：文本插值。文本插值用于在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。所有这些操作都非常快。
利用指令添加基本的交互
接下来在我们的静态应用中加入交互性吧。例如，允许用户通过输入文本修改页面中显示的内容。要达到这样的交互效果，可以在模板中使用称为指令的特殊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 提供了许多指令，开发者还可以自定义指令。
小结
本文首先快速设置了一个Web 页面来着手使用Vue，然后编写了一个示例应用。我们在页面中创建并挂载了一个Vue 实例到DOM中，接着编写模板实现了DOM 的动态性。在这个模板中，我们借助文本插值用一个JavaScript 表达式来显示文本内容。最后，通过v-model 指令将input元素绑定到数据属性，给Web 页面添加了一些交互。
——本文选自《Vue.js项目实战》
如果大家想使用Vue 创建真正的Web 应用，请参考下面这本书。
本书由6个具体的项目构成。在学习每个项目时，作者带领读者亲手构建一个实际的应用。这也就意味着，学完本书时，我们将拥有6个可以运行的Vue应用。
第 1 章 Vue开发入门
第 2 章 项目1：Markdown笔记本
第 3 章 项目2：城堡决斗游戏
第 4 章 高级项目设置
第 5 章 项目3：支持中心
第 6 章 项目4：博客地图
第 7 章 项目5：在线商店以及扩展
第 8 章 项目6：使用Meteor开发实时仪表盘
点击【了解更多】跳转到京东购买图书
