原文地址：https://cn.vuejs.org/v2/guide/index.html
vue介绍
vue.js是什么
vue，类似view，是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，vue被设计为可以自底向上逐层应用。vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合时，vue也完全能够为复杂的单页应用提供驱动。
起步
官方指南假设你已了解关于html、css和javascript的中级知识。
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
不推荐新手直接使用vue-cli，尤其是在你还不熟悉基于node.js的构建工具时。
声明式渲染
vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进dom的系统：
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Hello Vue!
看起来这跟渲染一个字符串模板非常类似，但是vue在背后做了大量工作。现在数据和dom已经被建立了关联，所有东西都是响应式的。
除了文本插值，我们还可以这样来绑定元素特性：
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
鼠标悬停几秒钟查看此处动态绑定的提示信息！
这里我们遇到了一点新东西，你看到的v-bind特性被称为指令。指令带有前缀v-，以表示它们是vue提供的特殊特性。可能你已经猜到了，它们会在渲染的dom上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的title特性和vue实例的message属性保持一致”。
如果你再次打开浏览器的javascript控制台，输入app2.message = '新消息'，就会再一次看到这个绑定了title特性的html已经进行了更新。
条件与循环
控制切换一个元素是否显示也相当简单：
<div id="app-3">
<p v-if="seen">
现在你看到我了
</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
现在你看到我了
继续在控制台输入app3.seen = false，你会发现之前显示的消息消失了。
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: '整个牛项目' }
]
}
})
1.学习 javascript
2.学习 vue
3.整个牛项目
处理用户输入
为了让用户和你的应用进行交互，我们可以用v-on指令添加一个事件监听器，通过它调用在vue实例中定义的方法：
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</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>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
组件化应用构建
组件系统是vue的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：
在vue里，一个组件本质上是一个拥有预定义选项的一个vue实例。在vue中注册组件很简单：
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})
现在你可以用它构建另一个组件模板：
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<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: '随便其他什么人吃的东西' }
]
}
})
与自定义元素的关系
你可能已经注意到vue组件非常类似于自定义元素——它是web组件规范的一部分，这是因为vue的组件语法部分参考了该规范。例如vue组件实现了slot api与is特性。但是，还是有几个关键差别：
1.web components规范已经完成并通过，但未被所有浏览器原生实现。目前safari 10.1+、chrome54+和firefox 63+原生支持web components。相比之下，vue组件不需要任何polyfill，并且在所有支持的浏览器（IE9及更高版本）之下表现一致。必要时，vue组件也可以包装于原生自定义元素之内。
2.vue组件提供了纯自定义元素所不具备的一些重要功能，最突出的跨组件数据流、自定义事件通信及构建工具集成。
虽然vue内部没有使用自定义元素，不过在应用使用自定义元素、或以自定义元素形式发布时，依然有很好的互操作性。vue cli也支持将vue组件构建成为原生的自定义元素。
