先引用vue.js 这个可以去到官网下载即可，引入到html页面就可以开发了，最简单的方法。
vue 一般以MVVM组合形式过程来展现出来，model-view-viewmodel这样的
vue的语法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="./vue.js"></script>
<link rel="stylesheet" href="https://keepfool.github.io/vue-tutorials/01.GettingStarted/styles/demo.css" />
<body>
<!--这是我们的View-->
<div id="app">
{{message}}
<br>
<input type="text" v-model="message"> <!-- 这里的input必须写在vue挂载的div元素里面 不能在外面，否则不显示数据-->
</div>
</body>
<script type="text/javascript">
// 这是我们的Model
var exampleData = {
message: 'Hello World!'
}
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
new Vue({
el: '#app',
data: exampleData
})
</script>
</html>vue中的指令使用：v-if、v-else-if 、v-else、v-show、v-for、v-bind、v-on，v-model...
v-if:用来判断的，主要用来条件判断 ：<h1 v-if="no">are you ok !</h1>
v-show：主要用来判断元素的现实问题，类似html中的样式display ： <h1 v-show="age>62">v-show:{{name}}</h1>
v-else-if ：必须在v-if或v-show后面，搭配使用，不可单独使用，用于否定的条件判断显示。
v-else ：必须在v-if或v-show后面，搭配使用，不可单独使用，用于否定的条件判断显示。
v-for：就是个循环指令，用来循环vue实例对象中的数据 ： <tr v-for="(p,i) in people">
v-bind：指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute）v-bind:argument="expression"，例如：<a v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n }}</a>
缩写形式：<a :class="activeNumber === n + 1 ? 'active' : ''">{{ n }}</a> 用冒号来代替v-bind
v-on： 指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：<a v-on:click="doSomething">
有两种形式调用方法：绑定一个方法（让事件指向方法的引用），或者使用内联语句
下面针对具体的指令，用代码来显示出来。
v-if 指令
是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：v-if="expression"
expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式
//html代码
<div id=app2>
<h1> hello vue.js</h1>
<h1 v-if="yes">welcome to bainuo!</h1>
<h1 v-if="no">are you ok !</h1>
<h1 v-if="age>25">{{age}}</h1>
<h1 v-if="name.indexOf('jason')>-1">{{name}}</h1>
<!--v-else必须跟在v-if或v-show后面使用 v-show即使前面为true，后面也会隐藏的-->
<h1 v-show="age>62">v-show:{{name}}</h1>
<h1 v-else>v-else-1</h1>
<h1 v-if="age>29">{{age}}</h1>
<h1 v-else>v-else-2</h1>
</div>
//vue代码
var vue = new Vue({
el : "#app2",
data:{
yes : true,
no :false,
age :28,
name : 'jason',
}
})
v-show指令
v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。
<h1 v-show="age>62">v-show:{{name}}</h1>
var vue = new Vue({
el : "#app2",
data:{
yes : true,
no :false,
age :28,
name : 'jason',
}
})v-else指令
可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。
<!--v-else必须跟在v-if或v-show后面使用 v-show即使前面为true，后面也会隐藏的-->
<h1 v-show="age>62">v-show:{{name}}</h1>
<h1 v-else>v-else-1</h1>
<h1 v-if="age>29">{{age}}</h1>
<h1 v-else>v-else-2</h1>v-for指令
v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：
v-for="item in items"
items是一个数组，item是当前被遍历的数组元素。
<div id="app3">
<table style = "border:1px;">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr v-for="(p,i) in people">
<td>{{p.name}}-<button @click="deletePerson(i+1)">Delete</button></td>
<td>{{p.sex}}</td>
<td>{{p.address}}</td>
</tr>
</tbody>
</table>
</div>v-bind指令
v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute）v-bind:argument="expression" 例如：v-bind:class
<div id="app4">
<ul class="pagination">
<li v-for="n in pageCount">
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n }}</a>
</li>
</ul>
</div>v-on指令
v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：
<a v-on:click="doSomething">有两种形式调用方法：绑定一个方法（让事件指向方法的引用），或者使用内联语句。
<div id="app6">
<a v-on:click="green">aaaaaa</a>
<br>
<br>
<input v-on:click="say('jason')" type="button" value="提交">
</div>
v-bind和v-on you两种缩写方式 ：提供了缩写语法 v-bind 为冒号":" , v-on 为 “@”
<div id="app7">
<!--v-bind 和v-on 提供了缩写语法 v-bind 为冒号":" , v-on 为 “@”-->
<!--完整语法
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>-->
<!--缩写语法-->
<a href="javascripit:void(0)" :class="1=== 1 ? 'active' : ''">{{ 1 }}</a>
<!--完整语法
<button v-on:click="greet">Greet</button> -->
<!--缩写语法-->
<input @click="say('jason')" type="button" value="提交">
</div>