前提：
你已有 HTML、CSS 和 JavaScript 中级前端知识。
概念：
Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
关于渐进式，可以理解为：提供选择而尽量降低限制，即你可以选择只用Vue核心实现视图层（状态到界面的映射和组件），而其他的用与Vue无关的技术。或者用核心库以及其他的Vue配套工具，核心虽然只解决一个很小的问题，但它们有生态圈及配套的可选工具，当你 把他们一个一个加进来的时候，就可以组合成非常强大的栈，就可以涵盖其他的这些更完整的框架所涵盖的问题。这种弹性的选择既是其渐进性。
关于自底向上设计，我的理解是（未必对）：设计过程不是由页面到组件，而是由组件到页面。
要进一步理解，这篇文章要读一下：http://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247484393&idx=1&sn=142b8e37dfc94de07be211607e468030&chksm=9723612ba054e83db6622a891287af119bb63708f1b7a09aed9149d846c9428ad5abbb822294&mpshare=1&scene=1&srcid=1026oUz3521V74ua0uwTcIWa&from=groupmessage&isappinstalled=0#wechat_redirect&utm_source=tuicool&utm_medium=referral
进入动手阶段：
首先提供一个可以在浏览器上直接跑的小页面，需要有网。
这段程序的目的是让你可以找一个环境测试自己写的小段的Vue代码。
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>Index Page</title>
</head> <body>
<form action="" id="demo">
<input type="text" value="调试 vuejs 2.0" ref="input1">
<a href="javascript:void(0)" v-on:click="test1">测试</a>
<br>
<span>{{ result1 }}</span>
<br> <input type="text" v-model="input2">
<a href="javascript:void(0)" v-on:click="test2">测试</a>
<br>
<span>{{ result2 }}</span>
</form> <script src="http://cdn.bootcss.com/vue/2.0.3/vue.min.js"></script>
<script type="text/javascript"> new Vue({
el: "#demo", data: {
result1: null,
result2: null,
input2: ""
}, created: function() {
// the created hook is called after the instance is created
}, methods: {
test1: function () {
this.result1 = this.$refs.input1.value + " 成功!";
}, test2: function () {
this.result2 = this.input2 + " 成功!";
}
}
})
</script>
</body> </html>
或者你更喜欢在线编辑，测试，那我给你网址：
https://jsfiddle.net/chrisvfritz/50wL7mdz/
组件系统是
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、自包含和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：
[img]
[/img]
js中定义组件，body里即可用自定义组件。