20170926day01
一.Vue的簡(jiǎn)單概述
什么是框架负甸？
框架指的是一套非常優(yōu)秀可被反復(fù)使用的代碼，幫助開發(fā)者解決一些復(fù)雜的問題
框架的好處汤善？
提高了代碼的復(fù)用率
降低模塊之間的耦合度
提高開發(fā)速度
提高代碼質(zhì)量
Vue是什么绘雁？
它是一個(gè)實(shí)現(xiàn)UI層的漸進(jìn)式j(luò)s框架，所謂的漸進(jìn)式就是你可以一步一步的舆吮，有階段性的來使用Vue揭朝。在Vue.js的設(shè)計(jì)上采用MVVM(Modol-View-ViewModel)模式队贱。
為什么學(xué)習(xí)Vue?
非常好的中文文檔
學(xué)習(xí)曲線比較緩和（容易上手）
速度快
體積小
基于組件化（web component）的開發(fā)方式
代碼的可讀性、可維護(hù)性比較好
如何使用Vue潭袱？
搭建環(huán)境有兩種方式：
方式1：CLI（command line interface 命令行窗口）
#安裝nodejs
https://nodejs.org/en/
#全局安裝 vue-cli
npm install --global vue-cli
#創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
vue init webpack my-project
#安裝依賴柱嫌，走你
cd my-project
npm install
npm run dev
方式2：直接引入對(duì)應(yīng)的js文件
二.Vue的基礎(chǔ)使用
數(shù)據(jù)綁定
通過new的方式來得到了Vue的實(shí)例，在new通過一個(gè)對(duì)象來對(duì)Vue的實(shí)例配置（el屯换，data)编丘；el指的是頁面中已經(jīng)存在的DOM元素，可以寫選擇器趟径。
接觸了雙花括號(hào)(mustache/interpolation)的語法:可以讀取變量的值 顯示在調(diào)用的元素的innerHTML中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>這是一個(gè)簡(jiǎn)單例子</title>
</head>
<body>
<div id="container">
<div>{{msg}}</div>
<div>{{car.brand}}</div>
<div>{{3+5}}</div>
<div>{{count>totalNum?'數(shù)據(jù)超過限制了':'正常'}}</div>
<div>{{!hasMore}}</div>
</div>
<script>
new Vue({
el: '#container',
data: {
msg: 'Hello VueJS',
car: {
brand: 'Volvo',
price: 30
},
count: 2,
totalNum: 10,
hasMore: true
}
});
</script>
</body>
</html>
三.Vue的常用指令
1.循環(huán)指令
1.<any v-for=" item in items"></any>瘪吏， 根據(jù)in關(guān)鍵詞后的集合，去循環(huán)創(chuàng)建多個(gè)標(biāo)簽蜗巧。
<!-- vue文件中-->
<ul>
<li v-for="item in myList">
{{item}}
</li>
</ul>
//js文件中
export default {
data() {
return {
myList:[100,200,300,400,500],
};
},
};
2.<any v-for="(value,key) in items"></any>支持一個(gè)可選參數(shù)作為當(dāng)前項(xiàng)的索引
<ul>
<li v-for="(value,index) in myList">
{{value}}-{{index}}
</li>
</ul>
//js文件中
export default {
data() {
return {
myList:[100,200,300,400,500],
};
},
};
3.除數(shù)組外掌眠，對(duì)象屬性也是可以遍歷的（循環(huán)渲染學(xué)生列表示例）
<table>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr v-for="tmp in stuList">
<td v-for="value in tmp">
{{value}}
</td>
<!--<td v-for="(value,key,index) in tmp">遍歷對(duì)象時(shí)有兩個(gè)可選參數(shù)
{{value}}
</td>-->
</tr>
</tbody>
</table>
export default {
data() {
return {
stuList: [{
name: 'michael',
sex: 1,
age: 20
},
{
name: 'miller',
sex: 1,
age: 21
},
{
name: 'lincoln',
sex: 0,
age: 23
},
{
name: 'lucy',
sex: 1,
age: 22
},
{
name: 'hanmeimei',
sex: 0,
age: 19
}
]
};
},
};
4.也可以迭代整數(shù)
<ul>
<li v-for="n in 10">
{{n}}
</li>
</ul>
2.條件渲染
v-if
v-show="表達(dá)式" 根據(jù)表達(dá)式執(zhí)行的結(jié)果的真假 來切換display顯示還是隱藏
<any v-if="表達(dá)式"></any>，v-if指令 ： 根據(jù)表達(dá)式執(zhí)行的結(jié)果的真假 來選擇是否要掛載到DOM幕屹。v-else-if要緊跟v-if蓝丙，v-else要緊跟v-else-if或者v-if。
<p>{{msg}}</p>
<p v-if="isMember">僅會(huì)員可見</p>
<p v-if="answer=='a'">A</p>
<p v-else-if="answer == 'b'">B</p>
<p v-else-if="answer == 'c'">C</p>
<p v-else>D</p>
export default {
data() {
return {
msg: 'Hello Vue',
isMember: true,
answer: 'c'
};
},
};
v-show
v-show="表達(dá)式" 根據(jù)表達(dá)式執(zhí)行的結(jié)果的真假 來切換display顯示還是隱藏
<p>{{msg}}</p>
<p v-show="status===1">當(dāng)status為1時(shí)顯示</p>
export default {
data() {
return {
status:1
};
},
};
v-show與v-if的用法基本一致望拖，只是v-show是改變css屬性display來控制元素顯示的渺尘，v-if會(huì)根據(jù)表達(dá)式來適當(dāng)?shù)匿N毀和重建組件或事件∷得簦總之鸥跟，v-if適合條件不經(jīng)常改變的場(chǎng)景，因?yàn)樗那袚Q開銷比較大盔沫，v-show適用于頻繁切換的條件医咨。
數(shù)組更新
vue的核心是數(shù)據(jù)與視圖雙向綁定，修改數(shù)組時(shí)架诞，vue會(huì)檢測(cè)數(shù)據(jù)變化拟淮，vue包含一組觀察數(shù)組變異的方法，使用它們會(huì)觸發(fā)視圖更新谴忧。
push()
pop()
shift()
unshift()
splice()
sort()
reverse()從這以上是會(huì)改變?cè)瓟?shù)組的
filter()
concat()
slice()從這以上返回新數(shù)組但是可替換原來的數(shù)組
<table>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr v-for="tmp in stuList">
<td>{{tmp.name}}</td>
<td>{{tmp.sex}}</td>
<td>{{tmp.age}}</td>
</tr>
</tbody>
</table>
export default {
data() {
return {
stuList: [{
name: 'michael',
sex: 1,
age: 20
},
{
name: 'miller',
sex: 1,
age: 21
},
{
name: 'lincoln',
sex: 0,
age: 23
}
]
};
},
};
但是很泊！下列變動(dòng)的數(shù)組中vue無法檢測(cè)也不會(huì)促發(fā)視圖的更新
1.通過索引直接設(shè)置項(xiàng)目，比如this.stuList[3]={...}
解決辦法兩種
第一種：this.$set(this.stuList,3,{name:'xiaoni',sex:0,age:23});
第二種：this.stuList.splice(3,1,{name:'xiaoni',sex:0,age:23});
2.修改數(shù)組長(zhǎng)度沾谓，比如this.stuList.length=1;
解決辦法：this.stuList.splice(1);
Vue事件綁定
<any v-on:eventName="處理函數(shù)名字"></any>委造，通過v-on去給指定的事件綁定一個(gè)處理函數(shù)。v-on的簡(jiǎn)寫為@均驶。vue提供了一個(gè)特殊變量$event,用于訪問原生DOM事件争涌。
<p>{{msg}}</p>
<button v-on:click="handleClick">clickMe</button>
<button @click="handleClick">clickMe</button>
<button @click="click(1,$event)">clickMe</button>
<select v-on:change="handleChange">
<option value="red">紅色</option>
<option value="green">綠色</option>
<option value="blue">藍(lán)色</option>
</select>
<form v-on:submit.prevent="handleSubmit">
<input type="checkbox"/>是否同意本站協(xié)議<br/>
<button>登錄</button>
</form>
export default {
data() {
return {
msg: 'Hello Vue',
};
},
methods: {
handleClick: function () {
console.log('btn is clicked');
},
click(data,event){
console.log(data);
},
handleChange: function (event) {
//方法會(huì)默認(rèn)將原生事件對(duì)象event傳入
console.log('選擇了某個(gè)選項(xiàng): ' + event.target.value);
},
handleSubmit: function () {
console.log('提交事件被觸發(fā)了');
}
}
};
Vue.js 為 v-on 提供了 事件修飾符。通過由點(diǎn)(.)表示的指令后綴來調(diào)用修飾符
.stop
.prevent
.capture
.self
.once
.passive
<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件監(jiān)聽器時(shí)使用事件捕獲模式 -->
<!-- 即元素自身觸發(fā)的事件先在此處理辣恋，然后才交由內(nèi)部元素進(jìn)行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>
<!-- 點(diǎn)擊事件將只會(huì)觸發(fā)一次 -->
<a v-on:click.once="doThis"></a>
Vue 允許為 v-on 在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符：
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">
全部的按鍵別名：
.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right
其他常用指令
1.v-bind將變量中的值 通過 v-bind 綁定到元素指定的屬性,簡(jiǎn)寫是：
<p>{{msg}}</p>
<!-- v-bind實(shí)現(xiàn)將變量中值 綁定到屬性-->
<img v-bind:src="'img/'+imgUrl" style="width:80px;height:80px" />
<a v-bind:href="myLink">baidu</a>
<a :href="myLink">baidu</a>
<button @click="modifyBGColor">修改背景色</button>
<h1 v-bind:style="{backgroundColor:myBGColor}">
背景色會(huì)被修改
</h1>
<p v-bind:class="{myRed:isRed}">我的字體顏色會(huì)變化</p>
<button v-bind:disabled="!isValid">clickMe</button>
<button v-show="hasMore">加載更多</button>
<p v-show="!hasMore">沒有跟多數(shù)據(jù)可以加載了</p>
<div v-html="myHtml">it is a test</div>
export default {
data() {
return {
msg: 'Hello Vue',
imgUrl: '1.jpg',
myLink: 'http://www.baidu.com',
myBGColor: '#ff0000',
isRed: false,
isValid: false,
hasMore: true,
myHtml: '<h1>it is a header</h1>'
};
},
methods: {
modifyBGColor: function () {
this.myBGColor = '#0000ff'
}
}
};
v-text
v-text='變量' 根據(jù)變量更新對(duì)應(yīng)的文本內(nèi)容
v-html
v-html="變量" 根據(jù)變量更新對(duì)應(yīng)的innerHTML
Vue中的v-model
v-model指令本身就是一個(gè)雙向數(shù)據(jù)綁定的指令：既可以將數(shù)據(jù)綁定到視圖亮垫，又可以將視圖中的結(jié)果綁定到數(shù)據(jù)。
<button @click="modifyMsg">修改msg</button>
<p>{{msg}}</p>
<input type="text" v-model.lazy="userAddress"/>
<p>{{"用戶輸入的結(jié)果為"+userAddress}}</p>
<!-- 有兩個(gè)輸入框伟骨，一個(gè)按鈕饮潦，
點(diǎn)擊按鈕時(shí)將輸入框輸入的數(shù)據(jù)進(jìn)行求和，將結(jié)果輸出在控制臺(tái)-->
<input type="number" v-model.number="num1"/>
<input type="number" v-model.number="num2"/>
<button @click="addSum">add</button>
<input type="text" v-model.trim="myNotes"/>
<p>{{myNotes.length}}</p>
export default {
data() {
return {
msg: 'Hello Vue',
userAddress: '北京萬壽路',
num1: 0,
num2: 0,
myNotes: ''
};
},
methods: {
modifyMsg: function () {
this.msg = 'Hello Data Binding';
},
addSum: function () {
console.log(this.num1 + this.num2);
}
}
};
v-model的修飾符携狭，用于控制數(shù)據(jù)同步的時(shí)機(jī)：
.lazy在輸入框中继蜡，v-modal默認(rèn)是在input事件中同步輸入框的數(shù)據(jù)(除了中文輸入法)，使用.lazy會(huì)轉(zhuǎn)變?yōu)樵赾hange事件中同步逛腿，msg的信息不會(huì)實(shí)時(shí)改變稀并，而是在失焦或者按回車時(shí)才會(huì)更新，示例代碼如下：
<input type="text" v-model.lazy="msg">
<p>{{msg}}</p>
.number可以將輸入轉(zhuǎn)換為Number類型
<input type="text" v-model.number="msg">
<p>{{msg}}</p>
.trim 自動(dòng)過濾輸入的首位空格
<input type="text" v-model.trim="msg">
<p>{{msg}}</p>
