使用
1.例項化（new Vue）
new Vue({
	el:選擇器 //規定vue的作用範圍
	data{
		k1:資料1，
		k2:資料2，
	}
})

2.插值
文字插值：
1》在節點中插值{{key1}}
	v-once #這個資料是一次性的
2》v-text#插入文字
html插值：
1》v-html#插入html

{}花括號問題：
在節點之間<h1></h1>
在節點內<h2 v-html="html"></h2>,不需要加花括號

3》屬性
v-屬性:"屬性值"

--------------------------------------------------------
vue的指令
	是帶有v-字首的特殊屬性：系統自帶的指令<div v-XXX>
	v-if
	v-else
	v-bind:href
	完整寫法：
	縮寫：:href
	v-on:click
	v-on:keydown
	v-on:keyup.引數
	v-on:keyup.37 ===>按鍵盤左鍵
事件：
冒泡
預設事件
	完整寫法：v-on:click.prevent==>取消預設方法
	縮寫：@click

--------------------------------------------------
vue的計算屬性
{{}}內放入大量邏輯程式碼==》過量，難維護
解決辦法：計算屬性[computed]
基本寫法：預設走的get() computed:{
	b:function(){}//只能獲取不能設定
}
完整寫法：computed:{ //計算屬性
	c:{ //屬性物件
	get:function(){ //獲取值
		return this.a+2;
	},
	set:function(val){ //設定值
		this.a=val;
	}
	}
}
--------------------------------------------------
vue class 和style的繫結
class繫結：
:class = "data資料中的值"
:class="{bg:isActive}"
<h1 :class="aaa">這是一個標題縮寫</h1>
<h1 :class="{bg:isActive}">這是一個標題</h1>
<h1 :class="{bg:true}">這是一個標題</h1>

<style>
.bg{
	background-color: blue;
}
.fz{
	font-size: 18px;
}
</style>
<h1 :class="{bg:true ,fz:false}">物件形式</h1> 
陣列寫法
<h1 :class="[bg1,fz1]">陣列寫法取data裡資料</h1>
data:{				
	bg1:"bg",
	fz1:"fz"
},
style繫結
物件寫法
:style="{background:bg,color:cl}" ===>bg和cl都是資料裡資料

陣列寫法
:style="[aaaa,bbbb]"
data:{
aaaa:{background:"red"},
bbbb:{color:"blue"}
}
--------------------------------------------------------
條件渲染

v-if
v-else
v-else-if

v-show
<div v-show="bool">11111</div>
<button @click="show">按鈕</button>
methods:{
	show:function(){
		if(this.bool){
			this.bool=false
		}else{
			this.bool=true
		}
	}
}
v-if和v-show區別
1》v-show 沒有v-else
2》v-show不支援template
3》v-show 只是做簡單的css切換 顯示隱藏的

--------------------------------------------------
vue 列表渲染
<li v-for="item in arr">
{{item}}</li>
<li v-for="(item,index) in arr">
{{item}}===>{{index}}</li>

-----------------------------------------------
vue事件處理器
1》監聽事件
v-on:click:事件名稱
@click:事件名稱
2》方法事件處理器(引數)
@事件名稱=方法名稱(引數..)
3》事件修飾符
阻止冒泡;@click.stop 
取消預設：@click.prevent
串聯：@click.prevent.stop || @keydown.enter.37
4》按鍵修飾符
@keyup.37 || @keydown.enter
Vue.config.keyCodes.f1=112;//可以給f1 等單獨設定值

-----------------------------------------------------
vue表單控制元件繫結
1》v-model:資料的雙向繫結
v-model.trim去除空格
v-model.lazy相當於失去焦點值改變時觸發事件
---------------------------------------------------
vue 資料互動
1》jquery ==>$.ajax
2》js原生 :es6====>axios
3》vue===>resource

GET :this.$http.get()
POST:this.$http.post()
JSONP:this.$http.jsonp()

this.$http({
	url:xxx
	
}).then(function(){},function(){});//第一個funciton 表示成功後函式，第二個表示失敗後執行函式


$ bower install vue-resource ---->下載到開啟的當前目錄下 bower-components

GET請求
this.$http.get("user/list",{
params:{ //傳遞的引數
act:1,
userName:"張三"
}
}).then(function(res){//成功後執行函式

},function(err){ //失敗後執行函式

})

post請求
this.$http.post("user/list",
{
act:1,
userName:"張三"
}，
{emulateJSON:true}
).then(function(){},function(){})
--------------------------------------------------------------------
vue 的生命週期
生命週期鉤子函式
1beforeCreate:
2.created:
3.beforeMount:
4.mounted
5.beforeUpdate
6.updated
7.beforeDestroy
8.destroyed

--------------------------

vue自定義指令
v-zhangsan
v-color
全域性：
vue.directive(指令名稱，function(){})
區域性：