1、建立vue例項
var vm = new Vue({
el: '#example', //選擇元素
data: {a:1} //基本資料
})
2、模板語法
（一）基本語法
<span>Message: {{ msg }}</span> //msg雙向資料繫結
（二）只有第一次渲染
<span v-once>這個將不會改變: {{ msg }}</span> //不會雙向繫結
（三）自動渲染html程式碼
<span v-html="rawHtml"></span> //自動識別內斂樣式等
（四）如果是內斂樣式要使用雙向資料繫結，通常都要加上v-bind
<div v-bind:id="dynamicId"></div>
（五）在雙花括號當中可以使用單行的JavaScript的語法
{{ ok ? 'YES' : 'NO' }}
3、計算屬性以及觀察方法
（一）基本寫法
var vm = new Vue({
computed: { //計算屬性方法名
reversedMessage: function () { //計算屬性的名稱
return this.message.slice(0,1) //計算屬性執行的方法
}
},
watch: { //監聽資料變化就執行的方法
message: function (val) { //message資料變化就執行
this.message = val + ' ' + this.message //val表示改變的新值
}
}
})
（二）computed的get和set
get就是獲取得時候觸發，set就是自身改變的時候觸發（預設只有get）
computed:{
message: {
get:function(){
return this.test+1
},
set:function(newValue){
console.log(newValue); //newValue改變的新值
}
}
4、Class 與 Style 繫結
（一）Class的物件語法（根據資料的布林值確定是否有這個class）
data: {
isActive: true,
hasError: false
}
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
data: { //這樣寫法更清晰
classObject: {
active: true,
'text-danger': false
}
}
<div v-bind:class="classObject"></div>
（二）Class的陣列語法（直接獲取這個陣列的值的字串）
data:{
activeClass:"asd",
errorClass:"ret"
}
<div v-bind:class="[activeClass, errorClass]"></div>
（三）Class的物件語法和陣列語法可以共同使用
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
（四）內聯樣式的物件語法
data: {
activeColor: 'red',
fontSize: 30
}
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
（五）內聯樣式的陣列語法
data: {
baseStyles:{
color:"#e4393c"
},
overridingStyles:{
border:"1px solid #ddd"
}
}
<div v-bind:style="[baseStyles, overridingStyles]"></div>
5、條件渲染
（一）基本語法
<h1 v-if="ok==1">1</h1> <h1 v-else-if="ok==2">2</h1> <h1 v-else>No</h1>
（二）template，多個元素條件渲染
<template v-if="ok"> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
（三）如果沒有key，自動複用已存在的標籤
<input placeholder="Enter your username" key="user" v-if="loginType === 'username'"> //加上了key就不會自動複用標籤裡的內容 <input placeholder="Enter your email address" key="email" v-else>
（四）v-show，類似於v-if不過只是簡單的修改display的值。並且不能用v-else和不支援template。
<h1 v-show="ok==1">Hello1!</h1>
6、列表渲染
（一）渲染陣列語法
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
<li v-for="item in items">
{{ item.message }} //單純的渲染值
</li>
<li v-for="(item, index) in items">
{{ index }} - {{ item.message }} //渲染建和值
</li>
（二）渲染物件語法
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
<li v-for="value in object">
{{ value }} //單純的渲染值
</li>
<li v-for="(value,key,index) in object">
{{index}}:{{ key }}: {{ value }} //渲染建和值
</li>
（三）渲染時最好加上一個特殊的key值，如果順序改變方便後續跟蹤操作
<div v-for="item in items" :key="item.id"><!-- 內容 --></div>
（四）陣列方法
【1】陣列本身變異方法
vm.array.push({ message: 'Baz' }); //後面增加一個
vm.array.pop(); //後面刪除一個
vm.array.shift(); //前面刪除一個
vm.array.unshift({message:'Baz'}); //前面增加一個
vm.array.splice(0,1,{message:'Asb'}); //瑞士軍刀，從第幾個開始刪除多少個，替換成什麼
vm.array.sort((a,b)=>a-b); //根據裡面的方法排序
vm.array.reverse(); //顛倒排序
【2】陣列新建方法
vm.array.concat(arr1); //陣列拼接
vm.array.join(""); //陣列轉換成字串
vm.array.slice(start,end); //擷取一段陣列
vm.array.filter(fun); //根據方法過濾
（五）重新設定陣列
【1】重置設定其中一個值
Vue.set(example1.items, indexOfItem, newValue)
example1.items.splice(indexOfItem, 1, newValue)
【2】重置長度
example1.items.splice(newLength)
【3】物件賦予多個新屬性
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
7、事件處理的方法
（一）基本語法
<div id="app">
<button v-on:click="greet">Greet</button> //事件觸發
</div>
var example2 = new Vue({
methods: {
greet: function (event) { //event是事件處理方法
if (event) {
alert(event.target.tagName)
}
}
}
})
（二）傳引數，並且要求event還存在
<button @click="greet('hi',$event)"></button> //除了傳引數還要傳個事件$event
（三）事件修飾符
<a v-on:click.stop="doThis"></a> //阻止單擊事件 <form v-on:submit.prevent="onSubmit"></form> //提交事件不再過載頁面 <a v-on:click.stop.prevent="doThat"></a> //修飾符串聯,順序很重要 <form v-on:submit.prevent></form> //單純修飾符 <!-- 新增事件監聽器時使用事件捕獲模式 --> <!-- 即元素自身觸發的事件先在此處處理，然後才交由內部元素進行處理 --> <div v-on:click.capture="doThis">...</div> <!-- 只當在 event.target 是當前元素自身時觸發處理函式 --> <!-- 即事件不是從內部元素觸發的 --> <div v-on:click.self="doThat">...</div> <a v-on:click.once="doThis"></a> //只觸發一次
（四）按鍵修飾符
<!-- 只有在 `keyCode` 是 13 時呼叫 `vm.submit()` --> <input v-on:keyup.13="submit"> <!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 所有特殊按鍵 --> .enter .tab .delete (捕獲“刪除”和“退格”鍵) .esc .space .up .down .left .right <!-- 系統修飾符 --> <!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div> <!-- exact修飾符 --> <!-- 即使 Alt 或 Shift 被一同按下時也會觸發 --> <button @click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的時候才觸發 --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- 沒有任何系統修飾符被按下的時候才觸發 --> <button @click.exact="onClick">A</button> <!-- 滑鼠修飾符 --> .left .right .middle
8、表單輸入
（一）基本文字
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
（二）單選和核取方塊
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<input type="radio" id="two" value="Two" v-model="picked">
<span>Picked: {{ picked }}</span>
</div>
（三）多選時
new Vue({
el: '...',
data: {
selected: [] //多選時繫結陣列
}
})
<div id="example-5">
<select v-model="selected">
<option disabled value="">請選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
（四）複選或者單選ture、false命名
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no"> //當選中時yes，沒選中no
（五）雙向資料繫結value，只需要加上v-bind
<input type="radio" v-model="pick" v-bind:value="a"> //當選中時pick===a
（六）修飾符
<input v-model.lazy="msg" > //輸入完才改變 <input v-model.number="age" type="number"> //使用者輸入內容自己轉為數字 <input v-model.trim="msg"> //去空格