一预厌、Vue.js介紹
Vue.js也稱為Vue，讀音類似view毡代，錯誤讀音v-u-e劫拗，由華人尤雨溪開源并維護(hù)间校。
Vue有以下特點(diǎn)：
- 是一個構(gòu)建用戶界面的框架
- 是一個輕量級MVVM（Model-View-ViewModel）框架，和angular页慷、react類似
- 數(shù)據(jù)驅(qū)動+組件化的前端開發(fā)（核心思想）
- 通過簡單的API實(shí)現(xiàn)響應(yīng)式的數(shù)據(jù)綁定和組合的視圖組件
- 更容易上手憔足、小巧
參考：官網(wǎng)文檔
二胁附、第一個vue程序
<div id="main">
{{msg}} //字符串模板
</div>
<script src="./js/vue.js"></script> //引入vue文件
<script>
new Vue({ //創(chuàng)建vue實(shí)例
el: '#main', //綁定元素
data: {
msg: 'hello Vue.js'
},
methods:{ //用于存放方法
}
})
</script>
以上就是一個非常簡單的vue程序。綁定元素這里不但可以使用id選擇器滓彰，我們還可以使用類選擇器或者標(biāo)簽選擇器控妻。但是，vue2.0中不允許將vue實(shí)例掛在到html或者body元素上揭绑。
三弓候、常用指令
指令用來擴(kuò)展HTML功能。vue內(nèi)置了很多指令他匪。
1菇存、v-model
實(shí)現(xiàn)雙向數(shù)據(jù)綁定，實(shí)時監(jiān)控?cái)?shù)據(jù)變化邦蜜，一般用于表單依鸥。
<div id="main">
<input type="text" v-model="content">
<br> {{content}}
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#main',
data: {
content: ''
}
})
</script>
在這里，使用v-model指令將輸入框的值與vue實(shí)例中的content進(jìn)行綁定畦徘。此后毕籽，二者中的任一值發(fā)生變化，另一個值都會跟隨變化井辆。
2、v-for
用于遍歷數(shù)組溶握、對象等杯缺。
<div id="main">
<ul>
<li v-for="item in arr"> //遍歷數(shù)組
{{item}}
</li>
</ul>
<ul>
<li v-for="item in obj"> //遍歷對象
{{item}}
</li>
</ul>
<ul>
<li v-for="(value,key) in obj"> //鍵值循環(huán)，數(shù)組也適用睡榆，注意key在后面
{{key}}----{{value}}
</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#main',
data: {
arr: [1, 2, 3, 4, 5, 6],
obj: {
name: 'hedawei',
age: 22,
gender: 'man'
}
}
})
</script>
3萍肆、v-on
用于綁定事件，用法：v-on:事件="函數(shù)"胀屿。
示例：點(diǎn)擊事件
<div id="main">
<button type="button" v-on:click="showHello()">點(diǎn)擊顯示</button>
<br>
{{msg}}
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#main',
data: {
msg:''
},
methods: {
showHello() {
this.msg = 'Hello Vue.js';
}
}
})
</script>
this指向當(dāng)前vue實(shí)例塘揣，由此可獲取實(shí)例的其他屬性。除了點(diǎn)擊事件外還有很多其他事件宿崭，具體參考官網(wǎng)API亲铡。
4、v-show
用來顯示或隱藏元素葡兑，v-show是通過display實(shí)現(xiàn)奖蔓。當(dāng)v-show的值為true時顯示，為false時隱藏讹堤。
<div id="main">
<button type="button" v-on:click="change()">隱藏</button>
<div style="width:100px;height:100px;background:red" v-show="flag"></div>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#main',
data: {
flag: true
},
methods: {
change() {
this.flag = !this.flag;
}
}
})
</script>
四吆鹤、事件
之前說了一些關(guān)于事件的指令，這里詳細(xì)學(xué)習(xí)一下事件的相關(guān)知識洲守。
1疑务、事件簡寫
之前的事件都是這樣的寫法：v-on:click="showHello()"沾凄，vue提供了一種簡寫方式：
@click="showHello()"
2、事件對象$event
我們可以通過事件對象取得事件相關(guān)信息知允，如事件源撒蟀、事件類型、偏移量廊镜。
下面這個例子通過事件對象取得按鈕的值：
<div id="main">
<button type="button" @click="print($event)">點(diǎn)擊顯示按鈕的值</button>
<br> {{msg}}
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#main',
data: {
msg: ''
},
methods: {
print(e) {
this.msg = e.target.innerHTML;
}
}
})
</script>
3牙肝、事件冒泡與事件默認(rèn)行為
這里需要討論阻止事件冒泡與阻止默認(rèn)行為，原生js阻止事件冒泡首先得取得事件對象嗤朴，然后調(diào)用事件對象的stopPropagation方法配椭。在vue里，則不需要依賴于事件對象雹姊，只需要調(diào)用相應(yīng)的事件修飾符stop即可：
@click.stop = "print()"
阻止事件默認(rèn)行為和阻止事件冒泡基本一致股缸，在vue里也有十分便利的操作方法：
@click.prevent = "print()"
4、鍵盤事件
vue里內(nèi)置了一些鍵盤事件吱雏，便于開發(fā)者操作敦姻。語法如下：
@keydown.13 = "print()"
@keydown.enter = "print()"
除了回車事件外，還有很多其他鍵盤事件歧杏，例如下：@keydown.38="print()"镰惦。還有一些其他鍵盤事件，具體參考官方文檔犬绒。
默認(rèn)沒有@keydown.a/b/c...事件旺入，可以全局自定義鍵盤事件，也稱為自定義鍵碼或自定義鍵位別名：
Vue.config.keyCodes = {
v: 86,
f1: 112,
// camelCase 不可用
mediaPlayPause: 179,
// 取而代之的是 kebab-case 且用雙引號括起來
"media-play-pause": 179,
up: [38, 87]
}
除了stop凯力、prevent茵瘾、keyCode這些事件修飾符以外，還有一些比較常用：
- .native - 監(jiān)聽組件根元素的原生事件咐鹤。
- .once - 只觸發(fā)一次回調(diào)拗秘。
五、屬性
vue提供了綁定屬性的方法：v-bind:屬性名=""祈惶，這樣我們即可動態(tài)的改變屬性值雕旨。
1、屬性簡寫
屬性和事件一樣行瑞，也有簡寫方式：:屬性名=""
2奸腺、class屬性和style屬性
綁定class和style屬性時的語法比較復(fù)雜。
（1）變量形式
html部分：
<p :class="myClass">Hello vue.js</p>
對應(yīng)的vue的data部分：
data:{
myClass:className
}
（2）數(shù)組形式血久，同時引入多個類
html部分：
<p :class="[myClass1,myClass2]">Hello vue.js</p>
對應(yīng)的vue的data部分：
data:{
myClass1:className1,
myClass2:className2,
}
（3）json形式（常用）
html部分：
<p :class="{className1:true,className2:false}">Hello vue.js</p>
（4）變量引用json形式
html部分：
<p :class="myClass">Hello vue.js</p>
對應(yīng)的vue的data部分：
data:{
myClass:{
className:true
}
}
style的用法和class的用法基本一致突照，但是不常用。
六氧吐、模板
Vue.js使用基于HTML的模板語法讹蘑，可以將DOM綁定到Vue實(shí)例中的數(shù)據(jù)末盔。模板就是{{}}，用來進(jìn)行數(shù)據(jù)綁定座慰，顯示在頁面中陨舱，也稱為Mustache語法。
1版仔、數(shù)據(jù)綁定的方式
（1）雙向數(shù)據(jù)綁定
使用v-model指令游盲，前面已經(jīng)學(xué)習(xí)過。
（2）單向數(shù)據(jù)綁定
a.使用兩對大括號{{}}
這個在之前也經(jīng)常使用蛮粮，但是有一個缺點(diǎn)益缎，就是vue實(shí)例需要長時間編譯時會在頁面中出現(xiàn){{}}（閃爍現(xiàn)象）。vue提供了一個解決辦法：使用v-cloak配合css然想。
//html內(nèi)容
<div id="app" v-cloak>
{{msg}}
</div>
//css內(nèi)容
[v-cloak] {
display: none;
}
b.使用指令v-text莺奔、v-html
v-text也可達(dá)到與使用v-cloak相同的效果。
//html內(nèi)容
<div id="app" v-text="msg">
</div>
v-html會將文本中的html解析為html標(biāo)簽变泄，然后渲染到頁面中令哟。
//html內(nèi)容
<div id="app" v-html="msg">
</div>
//vue實(shí)例中data部分內(nèi)容
data: {
msg: 'hello<mark>vue.js<mark>'
},
這里的vue.js會有一個黃色的背景顏色。
七妨蛹、過濾器
過濾器用來過濾模型數(shù)據(jù)屏富，在顯示之前進(jìn)行數(shù)據(jù)處理和篩選。語法：{{ data | filter1(參數(shù)) | filter2(參數(shù))}}蛙卤。
vue1.0中內(nèi)置了很多過濾器役听，但是在2.0中全部刪除了。使用過濾器我們可以通過使用第三方庫：lodash表窘、date-fns日期格式化、accounting.js貨幣格式化甜滨±盅希或者我們可以自定義過濾器。
1衣摩、自定義過濾器
過濾器分為全局過濾器和局部過濾器昂验。
（1）全局過濾器
使用全局方法Vue.filter(過濾器ID,過濾器函數(shù))。
示例：
<p>{{8|addZero}}</p>//數(shù)據(jù)會自動作為傳過去
Vue.filter('addZero', data => {
return data > 10 ? data : '0' + data;
});
有時過濾器也要傳遞自己的參數(shù)：
<p>{{12.3456|number(3)}}</p>
Vue.filter('number', (data,n) => {
return data.toFixed(n);
});
（2）局部過濾器
局部過濾器的使用方法與全局過濾器的使用方法一致艾扮。
不過過濾器寫在vue實(shí)例中filters選項(xiàng)中既琴。
new Vue({
el:'#app',
data:{},
filters:{
number:data => {
//具體操作
}
}
})
未完待續(xù)。
