[译] Vue.js 2.0 Introduction
前言 尤大在我们为祖国母亲庆生的第一天发布了 Vue.js 2.0 正式版，作为新手，了解新版本里有哪些新特性最快和最直接的方法就是看看官方带有一些小样例的起步指南了。2.0 版本将 Getting started 和 Overview 合并成了一个 Introduction 介绍，在调整顺序的同时也加入了更详细的文字描述和样例代码（应该是考虑到像我一样的智障群体需要手把手教，才能学的会的缘故，摔…）。以下为新出炉的 Vue.js 2.0 Introduction 的蹩脚翻译版，供大家参考，该版本已被收录进 Vue.js 2.0 官方中文版。
介绍
Vue.js 是什么
Vue.js（读音 /vjuː/, 类似于 view）是一个构建用户界面的渐进式框架。与其他单层框架（ monolithic frameworks）不同的是，Vue 被设计成从底层向上可以被增量式的采用。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。
起步
尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子。请在浏览器新标签页中打开它，跟着我们查看一些基础示例。如果你喜欢用包管理器下载/安装，查看安装教程。
声明式渲染
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统：
<div id="app">
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
我们已经生成了我们的第一个 Vue 应用！看起来这跟单单渲染一个字符串模板非常类似，但是 Vue.js 在背后做了大量工作。现在数据和DOM已经被绑定在一起，所有的元素都是响应式的。我们如何知道?打开你的浏览器的控制台，并修改 app.message，你将看到上例相应地更新。
除了绑定插入的文本内容，我们还可以采用这样的方式绑定 DOM 元素属性：
<div id="app-2">
<span v-bind:id="id">Inspect me</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
id: 'inspect-me'
}
})
这里我们遇到新东西。你看到的 v-bind 特性被称为指令。指令带有前缀 v-，以指示它们是 Vue.js 提供的特殊特性。并且如你所想象的，它们会对绑定的目标元素添加响应式的特殊行为。这个指令的简单含义是说：将该元素的 id 属性绑定到 Vue 实例的 id 属性上。
用浏览器的开发者工具去监测以上元素 - 你会发现 这个元素的 id 为 inspect-me。是的，如果你在控制台里更改app2.id，那么该元素的 id 也会随之更新。
条件与循环
控制切换一个元素的显示也相当简单：
<div id="app-3">
<p v-if="seen">Now you see me</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
继续在控制台设置 app3.seen = false，你会发现 “Now you see me” 消失了。
这个例子演示了我们不仅可以绑定 DOM 文本到数据，也可以绑定 DOM 结构 到数据。而且， Vue.js 也提供一个强大的过渡效果系统，可以在 Vue 插入/删除元素时自动应用过渡效果。
也有一些其它指令，每个都有特殊的功能。例如， v-for 指令可以绑定数据到数据来渲染一个列表：
<div id="app-4">
<ol>
<li v-for="todo in todos">
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
在控制台里，输入 app4.todos.push({ text: 'New item' }) 。你会发现列表中多了一栏新内容。
处理用户输入
为了让用户和你的应用进行互动，我们可以用 v-on 指令绑定一个监听事件用于调用我们 Vue 实例中定义的方法：
<div id="app-5">
<p></p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
在 reverseMessage 方法中，我们在没有接触 DOM 的情况下更新了应用的状态 - 所有的 DOM 操作都由 Vue 来处理，你写的代码只需要关注基本逻辑。
Vue 也提供了 v-model 指令，它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧。
<div id="app-6">
<p></p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
用组件构建（应用）
组件系统是 Vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树：
Picture from http://vuejs.org/images/components.png
在 Vue 里，一个组件实质上是一个拥有预定义选项的一个 Vue 实例：
Vue.component('todo', {
template: '<li>This is a todo</li>'
})
现在你可以另一个组件模板中写入它：
<ul>
<todo v-for="todo in todos"></todo>
</ul>
但是这样会为每个 todo 渲染同样的文本，这看起来并不是很6。我们应该将数据从父作用域传到子组件。让我们来修改一下组件的定义，使得它能够接受一个 prop 字段:
Vue.component('todo', {
props: ['todo'],
template: '<li></li>'
})
现在，我们可以使用 v-bind 指令将 todo 传到每一个重复的组件中：
<div id="app-7">
<ol>
<todo v-for="todo in todos" v-bind:todo="todo"></todo>
</ol>
</div>
var app7 = new Vue({
el: '#app-7',
data: {
todos: [/* ... */]
}
})
这只是一个人为的例子，但是我们已经将我们的应用分割成了两小的单元，子元素通过 props 接口实现了与父亲元素很好的解耦。我们现在可以在不影响到父亲应用的基础上，进一步为我们的 todo 组件改进更多复杂的模板和逻辑。
在一个大型应用中，为了使得开发过程可控，有必要将应用整体分割成一个个的组件。在后面的教程中我们将详述组件，不过这里有一个（假想）的例子，看看使用了组件的应用模板是什么样的：
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
与自定义元素的关系
你可能已经注意到 Vue.js 组件非常类似于自定义元素——它是 Web 组件规范的一部分。实际上 Vue.js 的组件语法参考了该规范。例如 Vue 组件实现了 Slot API 与 is 特性。但是，有几个关键的不同：
-
Web 组件规范仍然远未完成，并且没有浏览器实现。相比之下，Vue.js 组件不需要任何补丁，并且在所有支持的浏览器（IE9 及更高版本）之下表现一致。必要时，Vue.js 组件也可以放在原生自定义元素之内。
-
Vue.js 组件提供了原生自定义元素所不具备的一些重要功能，比如组件间的数据流，自定义事件系统，以及动态的、带特效的组件替换。
准备好探索更广阔的世界了？
我们刚才简单介绍了 Vue.js 核心的一些最基本的特征 - 本指南的其余部分将用更详尽的篇幅去描述其他的一些高级特性，所以一定要阅读完所有的内容哦！
Leave a Comment