一、Vue是什么？
Vue（读音类似于view）是一套用于构建用户界面的渐进式框架。
与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。
Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。
二、声明式渲染
Vue的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统：
<body>
<div id="app">
<!-- 声明式语法 -->
{{ message }}
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello World!"
}
});
</script>
</body>
看起来这跟渲染一个字符串模板非常类似，但是Vue在背后做了大量工作。
现在数据和DOM已经被建立了关联，所有东西都是响应式的。打开浏览器中的控制台，并修改app.message的值，上例将相应地更新。
除了文本插值，我们还可以像这样来绑定元素特性：
<body>
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此动态绑定的提示信息！
</span>
</div>
<script>
var app2 = new Vue({
el: "#app-2",
data: {
message: "页面加载于" + new Date().toLocaleString()
}
});
</script>
</body>
v-bind特性被称为指令。
指令带有前缀v-，以表示它们是Vue提供的特殊特性。它们会在渲染的DOM上应用特殊的响应式行为。
在这里，该指令的意思是：将这个元素节点的title特性和Vue实例的message属性保持一致。
如果改变app2.message的值，就会再一次看到这个绑定了title特性的HTML已经进行了更新。
三、条件与循环
控制切换一个元素是否显示也相当简单：
<body>
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
var app3 = new Vue({
el: "#app-3",
data: {
seen: true
}
})
</script>
</body>
如果修改app3.seen = false，就会发现之前显示的消息消失了。
这个例子演示了不仅可以把数据绑定到DOM文本或特性，还可以绑定到DOM结构。
此外，Vue也提供一个强大的过渡效果系统，可以在Vue插入/更新/移除元素时自动应用过渡效果。
还有其他很多指令，每个都有特殊的功能，例如，v-for指令可以绑定数组的数据来渲染一个项目列表：
<body>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app4 = new Vue({
el: "#app-4",
data: {
todos: [
{text: '学习JavaScript'},
{text: '学习Vue'},
{text: '整个牛项目'}
]
}
});
</script>
</body>
添加app4.todos.push({ text: '新项目' })，会发现列表最后添加了一个新项目。
四、处理用户输入
为了让用户和我们的应用进行交互，我们可以用v-on指令添加一个事件监听器，通过它调用在Vue实例中定义的方法：
<body>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
<script>
var app5 = new Vue({
el: "#app-5",
data: {
message: "Hello Vue.js!"
},
methods: {
reverseMessage: function(){
this.message = this.message.split("").reverse().join("");
}
}
});
</script>
</body>
注意在reverseMessage方法中，我们更新了应用的状态，但并没有触碰DOM——所有的DOM操作都由Vue来处理，你编写的代码只需要关注逻辑层面即可。
Vue还提供了v-model指令，它能轻松实现表单输入和应用状态之间的双向绑定。
<body>
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message" >
</div>
<script>
var app6 = new Vue({
el: "#app-6",
data: {
message: "Hello Vue!"
}
});
</script>
</body>五、组件化应用构建
组件系统是Vue的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：
在Vue里，一个组件本质上是一个拥有预定义选项的一个Vue实例。在Vue中注册组件很简单：
//定义名为todo-item的新组件
Vue.component("todo-item", {
template: "<li>这是个待办项</li>"
});现在可以用它来构建另一个组件模板：
<ol id="app6">
<!-- 创建一个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指令将待办项传到循环输出的每个组件中：
<body>
<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>
<script>
Vue.component("todo-item", {
//todo-item组件现在接受一个"prop"，类似于一个自定义特性。
//这个prop名为todo
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: "随便其他什么人吃的东西"}
]
}
});
</script>
</body>
尽管这只是一个刻意设计的例子，但是我们已经设法将应用分割成了两个更小的单元。子单元通过porp接口与父单元进行了良好的解耦。我们现在可以进一步改进<todo-item>组件，提供更为复杂的模板和逻辑，而不会影响到父单元。
你可能已经注意到Vue组件非常类似于自定义元素——它是Web组件规范的一部分，这是因为Vue的组件语法部分参考了该规范。但是，还是有几个关键差别：
1.Web组件规范仍然处于草案阶段，并且未被所有浏览器原生实现。相比之下，Vue组件不需要任何polyfill，并且在所有支持的浏览器（IE9及更高版本）之下表现一致。必要时，Vue组件也可以包装于原生自定义元素之内。
2.Vue组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。