先引用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>