Vue是一个小巧轻便的JavaScript库。它有一个简单易懂的API，能够让开发者在开发web应用的时候更加简易便捷。实际上，一直让Vue引以为豪的是它的便捷性、执行力、灵活性。
这篇教程的目的就是通过一些例子，让你能够概览一些基本的概念和特性。在接下来的其他教程里，你会学到Vue更多的有用的特性，从而用Vue搭建一个可扩展的项目。
利用new Vue()创建一个Vue实例
我们可以先初始化一个html页面，然后我们需要引入Vue 的 js 文件。引入的方式有很多，我们可以在script中引入Vue的cdn，或者去官网上下载Vue的min.js，或者用 npm 安装一个Vue的依赖。方便起见，本文中就用cdn引入。
<!DOCTYPE html>
<html>
<head>
<title>从零开始学Vue</title>
</head>
<body>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
</body>
</html>
</div>
当你在开发过程中，确保你使用的是没有压缩过的版本，因为没有压缩的版本会提供有用的详细的警告，将会给你的代码书写节省很多时间。
我们先在body里面写入一个div，并且创建一个Vue实例，然后将实例和div绑定起来。
当你创建一个新的Vue实例的时候要使用Vue()构造器，然后在你的实例中指出你的挂载点。这个挂载点就是你想要划分出来的Vue实例的边界。挂载点和实例边界是一一对应的，你只能在挂载点上处理你实例边界内的事务，而不能在你的挂载点上处理实例边界外的事务。
在Vue实例中设置挂载点的参数是 “ el ”，el 的值可以用dom元素定义。
<!DOCTYPE html>
<html>
<head>
<title>从零开始学Vue</title>
</head>
<body>
<div id="vueInstance">这中间就是实例挂载点的实例边界</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<script>
// 创建一个新的Vue实例，并设置挂载点
var V = new Vue({
el : '#vueInstance'
});
</script>
</body>
</html>
</div>
就像你在上面看到的那样，new一个Vue()就能创建一个新的实例，然后指定一个DOM元素作为实例的挂载点。定义挂载点的时候，我们用到了css选择器的id来定义。实例化的名字也可以自己来定义，以便之后调用。
利用v-model进行双向数据绑定
我们可以用v-model对input输入框进行绑定，从而我们可以使用动态的获取数据对象的值。你可以认为v-model是一个指定的属性，就像html元素的属性。这里的双向数据绑定可以用在很多表单元素上，比如input、textarea、select。
Vue利用v-model这个指令绑定了一个数据，而这个数据是我们希望能够通过用户输入操作而更新的数据。
比如我们下面这个例子，我们要在input标签上绑定数据name，我们需要在Vue实例中的data对象中实现声明。
<div id="vueInstance">
输入您的姓名: <input type="text" v-model="name">
</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>//之后这行会省略
<script>
var V = new Vue({
el : '#vueInstance',
data : {
name : '_Appian'
}
});
</script>
</div>
无论用户输入多少次，这个name都会被自动更新。并且，如果name的值被改变了，其他有映射name的地方的值也会被修改。这种input框和映射的同步修改的原因，就是利用v-model这个指令，让数据通过底层的数据流进行绑定后直接修改。这就是数据的双向绑定的概念。
为了证明这个概念，我们可以利用$data打印出数据的映射来看看。
<div id="vueInstance">
输入您的姓名: <input type="text" v-model="name">
<p>{{ $data | json }}</p> //#1
<p>{{ name }}</p> //#2
</div>
<script>
var V = new Vue({
el : '#vueInstance',
data : {
name : '_Appian'
}
});
</script>
</div>
1中：
$data是Vue实例观察的数据对象，本质类型是一个对象，所以可以转成json。可以用一个新的对象替换。实例代理了它的数据对象的属性。
{{}}，利用两个花括号进行插值。这里插入的值是$data实时变化的值。
| json，只是一个更直观的能让数据展示出来的方法。也可以看做是一个过滤器，就像JSON.stringify()的效果一样。
2中：{{ name }}，就是直接在插值表达式，两个花括号中间插入数据变量，直接映射name的值。
Vue就是这么简单的进行数据的双向绑定，只需要一个v-model指令就可以，而不需要利用js或者jq来控制数据。相信你能从上面的例子中理清逻辑。
利用v-on进行事件绑定
Vue是利用v-on指令进行事件监听和事件分发的。你可以在Vue的实例中创建一个方法来绑定监听事件，可以创建一个方法来分派一个点击事件。
下面的例子中，我们将创建一个say方法，这个方法绑定在一个button上。点击产生的效果就是弹出一个带有用户name的欢迎框。为了将这个方法指派给button，我们需要用v-on:click来进行事件绑定。
<div id="vueInstance">
输入您的姓名: <input type="text" v-model="name">
<button v-on:click="say">欢迎点击</button> //#1
<button @click="say">欢迎点击</button> //#2
</div>
<script>
var V = new Vue({
el : '#vueInstance',
data : {
name : '_Appian'
},
methods : {
say : function(){
alert('欢迎' + this.name);
}
}
});
</script>
</div>
当然了，不仅是可以绑定click点击事件，还可以绑定其他鼠标事件，键盘输入事件等一些js的事件类型。比如v-on:mouseover，v-on:keydown， v-on:submit， v-on:keypress，v-on:keyup.13等等，或者是一些其他的自定义事件。
在开发过程中，你可能会频繁的用到事件绑定，v-on写起来有点麻烦，所以上例中提供了两种写法，#2就是对#1写法的缩写。利用@代替v-on，这里不多说。
利用v-if或者v-show进行条件判定
如果我们希望用户在登录之后才能看到欢迎弹窗，而如果没有登录则给它一个登录界面。Vue会提供给我们v-if指令和v-show指令用来控制不同登录状态下的显示内容。
利用先前的例子，我们可以用loginStatus的值来控制是否登录，如果是true则显示输入框和按钮让他能够看到欢迎弹窗，但如果是false（即未登录），则只能看到输入账号、密码的输入框和提交按钮（暂时不进行身份验证，只改变登录状态）。
<div id="vueInstance">
//loginStatus为true时会显示的section
<section v-if="loginStatus">
输入您的姓名: <input type="text" v-model="name">
<button v-on:click="say">欢迎点击</button>
<button @click="switchLoginStatus">退出登录</button>
</section>
//loginStatus为false时会显示的section
<section v-if="!loginStatus">
登录用户: <input type="text">
登录密码: <input type="password">
<button @click="switchLoginStatus">登录</button>
</section>
</div>
<script>
var V = new Vue({
el : '#vueInstance',
data : {
name : '_Appian',
loginStatus : false
},
methods : {
say : function(){
alert('欢迎' + this.name);
},
switchLoginStatus : function(){
this.loginStatus = !this.loginStatus;
}
}
});
</script>
</div>
this的执行就是实例V。this的指向是一个需要自己去搞懂的问题，这里不多说。在上述例子中，只要把V-if换成v-show，一样可以获得等同的效果。同时v-if和v-show他们都支持v-else，但是绑定v-else命令的标签的前一兄弟元素必须有 v-if 或 v-show。
在上面的例子中，只要点击“登录”或者“退出登录”按钮都会触发switchLoginStatus方法，只要触发了这个方法就会导致loginStatus的状态变化（在true和false中进行切换），从而改变了html中的v-if的判断条件结果的变化，基于当前的loginStatus的布尔值的状态，使得显示的section是不同状态下的section。
v-show和v-if之间有什么区别呢?
在切换