介绍
vue.js是什么
vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，vue被设计为可以自底向上逐层应用。vue的核心库只关注图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，vue也完全能够为复杂的单页应用提供驱动。
起步
官方指南假设你已了解html、css和javascript的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的注意——掌握好基础知识再来吧！之前有其他框架的使用经验会有帮助，这不是必须的。
尝试vue.js最简单的方法是使用jsfiddle上的hello world例子。你可以在浏览器新标签页中打开它。跟着例子学习一些基础用法。或者你也可以创建一个.html文件，然后通过如下方式引入vue：
开发环境版本，包含了有帮助的命令行警告
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者
生产环境版本，优化了尺寸和速度
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
安装教程给出了更多安装vue的方式。请注意我们不推介新手直接使用vue-cli，尤其是在你还不熟悉基于node.js的构建工具时。
如果你喜欢交互式的东西，你也可以查阅这个scrimba上的系列教程，他揉合了录屏和代码试验田，并允许你随时暂停和播放。
声明式渲染
vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进dom的系统：
<div id="feihong">
<input type="text" v-model="a" placeholder="你的名字" />
<h1>您好，{{a}}</h1>
</div>
<script>
var a=new Vue({
el:'#feihong',
data:{
a:2
}
})
</script>
我们已经成功创建了第一个vue应用！看起来这跟渲染一个字符串模板非常类似，但是vue在背后做了大量工作。现在数据和dom已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？你在输入框中随便修改feihong.a的值，你将看到上例相应的更新。
hbuilder无法高亮显示错误，格式不对也无法高亮显示
除了文本插值，我们还可以像这样来绑定元素特性
这里我们遇到了一点新东西。你看到的v-bind 特性 被称为指令。指令带有前缀v-，以表示他们是vue提供的特殊特性。可能你已经猜到了，他们会在渲染的dom上应用特殊的响应式行为。这里，该指令的意思是：“将这个元素节点的title特性和vue实例的message属性保持一致”。
如果你再次打开浏览器的javascript控制台，输入app2.message='新消息',就会再一次看到这个绑定的titile特性的html已经进行了更新。
条件与循环
控制切换一个元素是否显示也相当简单：
<div id="app">
<p v-if="show">显示这段文本</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
show:false
}
})
</script>
继续在控制台输入app.show=false，你会发现之前显示的消息消失了。
这个例子演示了我们不仅可以把数据绑定到dom文本或特性，还可以绑定到dom结构。此外，Vue也提供了一个强大的过渡效果系统，可以在vue插入/更新/移除元素时自动应用过渡效果。
还有其他指令，每个都有特殊的功能。 例如，v-for指令可以绑定数组的数据来渲染一个项目列表
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
在控制台里，输入app-4.todos.push（{text:'新项目'}），你会发现列表最后添加了一个新项目。
处理用户输入
为了让用户和你的应用进行交互，我们可以用v-on指令添加一个事件监听器，通过他调用在vue实例中定义的方法：
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
注意在reverseMessage方法中，我们更新了应用的状态，但没有触碰dom——所有的dom操作都有vue来处理，你编写的代码只需要关注逻辑层面即可。
vue还提供了v-model指令，它能轻松实现表单输入和应用状态之间的双向绑定。
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
</script>
组件化应用构建
组件系统是vue的另一个重要概念，因为他是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：
在vue里，一个组件本质上是一个拥有预定义选项的一个vue实例。在vue中注册组件很简单：
Vue.component('todo-item',{
template:'<li>这是新组件</li>'
})
<ol>
<todo-item></todo-item>
</ol>
但是这样会为每个代办项渲染同样的文本，这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个prop：
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop"，类似于一个自定义特性。
// 这个 prop 名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
现在，我们可以使用v-bind指令将待办项传到循环输出的每个组件中
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
尽管这只是一个刻意设计的例子，但是我们已经设法将应用分割成了连个更小的单元。子单元通过prop接口与父单元进行了良好的解耦。我们现在可以进一步改进<todo-item>组件，提供更为复杂的模板和逻辑，而不影响到父单元。
在一个大型应用中，有必要将整个应用程序划分为组件，以使开发更易于管理。在后续教程中我们将详细描述组件，不过这里有个（假象的）例子，以展示使用了组件的应用模板是什么样的：
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
与自定义元素的关系
你可能已经注意到vue组件非常类似于自定义元素——他是web组件规范的一部分，这是因为vue的组件语法部分参考了该规范。例如vue组件实现了slot api与is特性。但是，还是有几个关键差别：
1.web组件规范仍然处于草案阶段，并且违背所有浏览器原生实现。相比之下，vue组件也可以包装于原生自定义元素之内。
2.vue组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。
我们刚才简单介绍了vue核心最基本的功能——本教程的其余部分将涵盖这些功能以及其他高级功能更详细的细节，所以请务必读完整个教程。