1. vue.js介紹
Vue.js是前端三大新框架：Angular.js、React.js奢人、Vue.js之一谓媒，Vue.js目前的使用和關(guān)注程度在三大框架中稍微勝出，并且它的熱度還在遞增何乎。
Vue.js可以作為一個(gè)js庫(kù)來(lái)使用句惯，也可以用它全套的工具來(lái)構(gòu)建系統(tǒng)界面，這些可以根據(jù)項(xiàng)目的需要靈活選擇支救，所以說(shuō)抢野，Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架。
Vue的核心庫(kù)只關(guān)注視圖層各墨，Vue的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定指孤，在這一點(diǎn)上Vue.js類似于后臺(tái)的模板語(yǔ)言。
Vue也可以將界面拆分成一個(gè)個(gè)的組件贬堵，通過(guò)組件來(lái)構(gòu)建界面恃轩，然后用自動(dòng)化工具來(lái)生成單頁(yè)面(SPA - single page application)系統(tǒng)。
- Vue.js使用文檔及下載Vue.js
Vue.js使用文檔已經(jīng)寫(xiě)的很完備和詳細(xì)了黎做，通過(guò)以下地址可以查看： https://cn.vuejs.org/v2/guide/
vue.js如果當(dāng)成一個(gè)庫(kù)來(lái)使用叉跛，可以通過(guò)下面地址下載： https://cn.vuejs.org/v2/guide/installation.html
2.基本使用
首先通過(guò)將vue.js作為一個(gè)js庫(kù)來(lái)使用,我們下載了vue.js后，需要在頁(yè)面上通過(guò)script標(biāo)簽引入vue.js蒸殿，開(kāi)發(fā)中可以使用開(kāi)發(fā)版本vue.js筷厘，產(chǎn)品上線要換成vue.min.js。
<script type="text/javascript" src="js/vue.min.js"></script>
- Vue實(shí)例
每個(gè) Vue 應(yīng)用都是通過(guò)實(shí)例化一個(gè)新的 Vue對(duì)象開(kāi)始的：
window.onload = function(){
var vm = new Vue({
el:'#app',
data:{message:'hello world!'}
});
}
......
<div id="app">{{ message }}</div>
其中宏所，el屬性對(duì)應(yīng)一個(gè)標(biāo)簽酥艳，當(dāng)vue對(duì)象創(chuàng)建后，這個(gè)標(biāo)簽內(nèi)的區(qū)域就被vue對(duì)象接管楣铁，在這個(gè)區(qū)域內(nèi)就可以使用vue對(duì)象中定義的屬性和方法玖雁。
- 數(shù)據(jù)與方法
當(dāng)一個(gè) Vue 實(shí)例被創(chuàng)建時(shí)，它向 Vue 的響應(yīng)式系統(tǒng)中加入了其data對(duì)象中能找到的所有的屬性盖腕。當(dāng)這些屬性的值發(fā)生改變時(shí)赫冬，視圖將會(huì)產(chǎn)生“響應(yīng)”浓镜，即匹配更新為新的值。還可以在Vue實(shí)例中定義方法劲厌，通過(guò)方法來(lái)改變實(shí)例中data對(duì)象中的數(shù)據(jù)膛薛，數(shù)據(jù)改變了，視圖中的數(shù)據(jù)也改變补鼻。
window.onload = function(){
var vm = new Vue({
el:'#app',
data:{message:'hello world!'},
methods:{
fnChangeMsg:function(){
this.message = 'hello Vue.js!';
}
}
});
}
......
<div id="app">
<p>{{ message }}</p>
<button @click="fnChangeMsg">改變數(shù)據(jù)和視圖</button>
</div>
3. vue模板語(yǔ)法
模板語(yǔ)法指的是如何將數(shù)據(jù)放入html中哄啄，Vue.js使用了基于 HTML的模板語(yǔ)法，允許開(kāi)發(fā)者聲明式地將DOM綁定至底層 Vue 實(shí)例的數(shù)據(jù)风范。所有 Vue.js的模板都是合法的 HTML 咨跌，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析。
插入值
數(shù)據(jù)綁定最常見(jiàn)的形式就是使用“Mustache”語(yǔ)法 (雙大括號(hào)) 的文本插值：
<span>Message: {{ msg }}</span>如果是標(biāo)簽的屬性要使用值硼婿，就不能使用“Mustache”語(yǔ)法锌半，需要寫(xiě)成使用v-bind指令：
<a v-bind:href="url" v-bind:title='tip'>百度網(wǎng)</a>插入的值當(dāng)中還可以寫(xiě)表達(dá)式：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a v-bind:href="url">鏈接文字</a>
- 指令
指令 (Directives) 是帶有“v-”前綴的特殊屬性。指令屬性的值預(yù)期是單個(gè)JavaScript表達(dá)式寇漫，指令的職責(zé)是刊殉，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響州胳，響應(yīng)式地作用于DOM记焊。常見(jiàn)的指令有v-bind、v-if栓撞、v-on遍膜。
<!-- 根據(jù)ok的布爾值來(lái)插入/移除 <p> 元素 -->
<p v-if="ok">是否顯示這一段</p>
<!-- 監(jiān)聽(tīng)按鈕的click事件來(lái)執(zhí)行fnChangeMsg方法 -->
<button v-on:click="fnChangeMsg">按鈕</button>
- 縮寫(xiě)
v-bind和v-on事件這兩個(gè)指令會(huì)經(jīng)常用，所以有簡(jiǎn)寫(xiě)方式：
<!-- 完整語(yǔ)法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫(xiě) -->
<a :href="url">...</a>
<!-- 完整語(yǔ)法 -->
<button v-on:click="fnChangeMsg">按鈕</button>
<!-- 縮寫(xiě) -->
<button @click="fnChangeMsg">按鈕</button>
4.計(jì)算屬性和偵聽(tīng)屬性
- 計(jì)算屬性
模板內(nèi)的表達(dá)式非常便利腐缤，但是設(shè)計(jì)它們的初衷是用于簡(jiǎn)單運(yùn)算的捌归。在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
這個(gè)表達(dá)式的功能是將message字符串進(jìn)行反轉(zhuǎn)岭粤，這種帶有復(fù)雜邏輯的表達(dá)式，我們可以使用計(jì)算屬性:
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
......
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計(jì)算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實(shí)例
return this.message.split('').reverse().join('')
}
}
})
- 偵聽(tīng)屬性
偵聽(tīng)屬性的作用是偵聽(tīng)某屬性值的變化特笋，從而做相應(yīng)的操作剃浇，偵聽(tīng)屬性是一個(gè)對(duì)象，它的鍵是要監(jiān)聽(tīng)的對(duì)象或者變量猎物，值一般是函數(shù),當(dāng)你偵聽(tīng)的元素發(fā)生變化時(shí)虎囚，需要執(zhí)行的函數(shù)，這個(gè)函數(shù)有兩個(gè)形參蔫磨，第一個(gè)是當(dāng)前值淘讥，第二個(gè)是變化之前的值。
window.onload = function(){
var vm = new Vue({
el:'#app',
data:{
iNum:1
},
watch:{
iNum:function(newval,oldval){
console.log(newval + ' | ' + oldval)
}
},
methods:{
fnAdd:function(){
this.iNum += 1;
}
}
});
}
5.Class 與 Style 綁定
使用v-bind指令來(lái)設(shè)置元素的class屬性或者sytle屬性堤如，它們的屬性值可以是表達(dá)式蒲列，vue.js在這一塊做了增強(qiáng)窒朋，表達(dá)式結(jié)果除了是字符串之外，還可以是對(duì)象或者數(shù)組蝗岖。
5.1 Class綁定
- 對(duì)象語(yǔ)法
- 可以給v-bind:class傳一個(gè)對(duì)象侥猩，以動(dòng)態(tài)的切換class
<div class="static" v-bind:class="{active:isActive,'text-danger':hasError }"></div>
data屬性值如下：
data: {
isActive: true,
hasError: false
}
最終渲染的效果：
<div class="static active"></div>
- 也可以給v-bind:class傳一個(gè)對(duì)象引用
<div v-bind:class="classObject"></div>
data屬性值可以寫(xiě)成：
data: {
classObject: {
active: true,
'text-danger': false
}
}
- 數(shù)組語(yǔ)法
- 可以給v-bind:class傳一個(gè)數(shù)組，以應(yīng)用一個(gè) class 列表
<div v-bind:class="[activeClass, errorClass]"></div>
......
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
最終渲染為：
<div class="active text-danger"></div>
- 如果你也想根據(jù)條件切換列表中的 class抵赢，可以用三元表達(dá)式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
- 不過(guò)欺劳，當(dāng)有多個(gè)條件class時(shí)這樣寫(xiě)有些繁瑣。所以在數(shù)組語(yǔ)法中也可以使用對(duì)象語(yǔ)法：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
5.2 style綁定
- 對(duì)象語(yǔ)法
- v-bind:style 的對(duì)象語(yǔ)法十分直觀——看著非常像 CSS铅鲤，但其實(shí)是一個(gè)JavaScript 對(duì)象划提。CSS 屬性名可以用駝峰式 (camelCase) 來(lái)命名：
<div v-bind:style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
data數(shù)據(jù)如下：
data: {
activeColor: 'red',
fontSize: 30
}
- 也可以給v-bind:style傳一個(gè)對(duì)象引用
<div v-bind:style="styleObject"></div>
data數(shù)據(jù)如下：
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
- 數(shù)組語(yǔ)法
v-bind:style 的數(shù)組語(yǔ)法可以將多個(gè)樣式對(duì)象應(yīng)用到同一個(gè)元素上：
<div v-bind:style="[baseStyles, overridingStyles]"></div>
6. 條件渲染
通過(guò)條件指令可以控制元素的創(chuàng)建(顯示)或者銷毀(隱藏)，常用的條件指令如下：
v-if
v-if可以控制元素的創(chuàng)建或者銷毀
<h1 v-if="ok">Yes</h1>v-else
v-else指令來(lái)表示 v-if 的“else 塊”邢享，v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面腔剂，否則它將不會(huì)被識(shí)別。
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
- v-else-if
v-else-if驼仪，顧名思義掸犬，充當(dāng) v-if 的“else-if 塊”，可以連續(xù)使用：
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
- v-show
另一個(gè)用于根據(jù)條件展示元素的選項(xiàng)是 v-show 指令绪爸。用法和v-if大致一樣湾碎，但是它不支持v-else,它和v-if的區(qū)別是，它制作元素樣式的顯示和隱藏奠货，元素一直是存在的：
<h1 v-show="ok">Hello!</h1>
7. 列表渲染
通過(guò)v-for指令可以將一組數(shù)據(jù)渲染到頁(yè)面中介褥，數(shù)據(jù)可以是數(shù)組或者對(duì)象，v-for 指令需要使用 item in items 形式的特殊語(yǔ)法递惋，items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名柔滔。
- 遍歷數(shù)組
<ul id="example-1">
<li v-for="item in items">
{{ item}}
</li>
</ul>
vue對(duì)象創(chuàng)建如下：
var example1 = new Vue({
el: '#example-1',
data: {
items: ['foo','bar']
}
})
如果想加上索引值，可以加上第二個(gè)參數(shù)
<ul id="example-2">
<li v-for="(item, index) in items">
{{ index }} - {{ item}}
</li>
</ul>
- 遍歷對(duì)象
也可以用 v-for 通過(guò)一個(gè)對(duì)象的屬性來(lái)迭代
<ul id="v-for-object">
<li v-for="value in object">
{{ value }}
</li>
</ul>
如果想加上對(duì)象屬性名萍虽，可以加上第二個(gè)參數(shù)
<ul id="v-for-object">
<li v-for="(value,key) in object">
{{ key }}-{{ value }}
</li>
</ul>
8. 事件處理
- 事件綁定方法
- 可以用 v-on 指令監(jiān)聽(tīng) DOM 事件睛廊，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼，事件的處理杉编，簡(jiǎn)單的邏輯可以寫(xiě)在指令中手幢，復(fù)雜的需要在vue對(duì)象的methods屬性中指定處理函數(shù)铝条。
<div id="example-1">
<!-- 在指令中寫(xiě)處理邏輯 -->
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
......
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
- methods屬性中指定處理函數(shù)：
<div id="example-2">
<!-- greet 是在下面定義的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
......
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 對(duì)象中定義方法
methods: {
greet: function () {
// `this` 在方法里指向當(dāng)前 Vue 實(shí)例
alert('Hello ' + this.name + '!')
}
}
})
- 事件修飾符
實(shí)際開(kāi)發(fā)中舶沿，事件綁定有時(shí)候牽涉到阻止事件冒泡以及阻止默認(rèn)行為特愿，在vue.js可以加上事件修飾符
<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
9. 表單輸入綁定
可以用 v-model 指令在表單 <input> 及 <textarea> 元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素
- 單行文本框
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
- 多行文本框
<span>Multiline message is:</span>
<p>{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
- 復(fù)選框
- 單個(gè)復(fù)選框光酣，綁定到布爾值：
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
- 多個(gè)復(fù)選框疏遏，綁定到同一個(gè)數(shù)組：
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
......
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
- 單選框
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
......
new Vue({
el: '#example-4',
data: {
picked: ''
}
})
- 下拉框
<div id="example-5">
<select v-model="selected">
<option disabled value="">請(qǐng)選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
......
new Vue({
el: '...',
data: {
selected:''
}
})
10.過(guò)濾器
Vue.js允許你自定義過(guò)濾器，可被用于一些常見(jiàn)的文本格式化。過(guò)濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式
在雙花括號(hào)中
{{ prize | RMB }}在v-bind中
<div v-bind:id="rawId | formatId"></div>
過(guò)濾器實(shí)際上是一個(gè)函數(shù)财异，可以在一個(gè)組件的選項(xiàng)中定義組件內(nèi)部過(guò)濾器：
filters:{
RMB:function(value){
if(value=='')
{
return;
}
return '￥ '+value;
}
}
或者在創(chuàng)建 Vue 實(shí)例之前全局定義過(guò)濾器：
Vue.filter('Yuan',function(value){
if(value=='')
{
return;
}
return value+'元';
});
此時(shí)過(guò)濾器'RMB'只能在定義它的對(duì)象接管標(biāo)簽內(nèi)使用倘零，而'Yuan'可以全局使用.
11. 實(shí)例生命周期
每個(gè)Vue實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過(guò)一系列的初始化過(guò)程——例如，需要設(shè)置數(shù)據(jù)監(jiān)聽(tīng)宝当、編譯模板视事、將實(shí)例掛載到DOM并在數(shù)據(jù)變化時(shí)更新 DOM 等。同時(shí)在這個(gè)過(guò)程中會(huì)自動(dòng)運(yùn)行一些叫做生命周期鉤子的函數(shù)庆揩，我們可以使用這些函數(shù)俐东，在實(shí)例的不同階段加上我們需要的代碼，實(shí)現(xiàn)特定的功能订晌。
beforeCreate
在實(shí)例初始化之后虏辫，數(shù)據(jù)觀測(cè) (data observer) 和 event/watcher 事件配置之前被調(diào)用。created
在實(shí)例創(chuàng)建完成后被立即調(diào)用锈拨。在這一步砌庄，實(shí)例已完成以下的配置：數(shù)據(jù)觀測(cè) (data observer)，屬性和方法的運(yùn)算奕枢，watch/event 事件回調(diào)娄昆。然而，掛載階段還沒(méi)開(kāi)始beforeMount
在掛載開(kāi)始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用缝彬。mounted
實(shí)例掛載到dom之后被調(diào)用萌焰，可以當(dāng)成是vue對(duì)象的ready方法來(lái)使用，一般用它來(lái)做dom的初始化操作谷浅。beforeUpdate
數(shù)據(jù)發(fā)生變化前調(diào)用updated
數(shù)據(jù)發(fā)生變化后調(diào)用
12. 數(shù)據(jù)交互
vue.js沒(méi)有集成ajax功能扒俯，要使用ajax功能，可以使用vue官方推薦的axios.js庫(kù)來(lái)做ajax的交互一疯。
axios庫(kù)的下載地址：https://github.com/axios/axios/releases
- axios完整寫(xiě)法：
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
- axios請(qǐng)求的寫(xiě)法也寫(xiě)成get方式和post方式撼玄。
- 執(zhí)行g(shù)et請(qǐng)求
// 為給定 ID 的 user 創(chuàng)建請(qǐng)求
// then是請(qǐng)求成功時(shí)的響應(yīng)，catch是請(qǐng)求失敗時(shí)的響應(yīng)
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 可選地墩邀，上面的請(qǐng)求可以這樣做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
- 執(zhí)行post請(qǐng)求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
