Vuejs
源碼：https://github.com/zhuangZhou/vuejs
下載Vue.js
官網(wǎng)：http://vuejs.org
live-server使用
live-server是一個簡單的服務(wù)器佩番，具有熱更新
使用npm進行全局安裝
npm install -g live-server
在項目目錄中啟動
liver-server
內(nèi)部指令
v-if & v-else & v-show
1寒跳、v-if
v-if 用來判斷是否在加載HTML的DOM，比如模擬用戶登錄
<div v-if="isLogin">你好梳庆，XXX</div>
<div v-else>請登錄</div>
在Vue里的data定義isLogin的值舱卡，當(dāng)為true時赢笨，顯示“你好盾戴，XXX”，當(dāng)為false時楚堤，顯示“請登錄”逾雄。
2、v-show
v-show是通過調(diào)整css的display屬性的屬性值品追，來顯示和隱藏節(jié)點玄括，其實在HTML渲染時，已經(jīng)加載了DOM肉瓦；
<div v-show="isLogin">哈哈哈</div>
當(dāng)isLogin為true時遭京，顯示“哈哈哈”，當(dāng)為false時泞莉，隱藏哪雕。
3、兩者的區(qū)別
v-if：判斷是否加載鲫趁，可以減輕服務(wù)器壓力斯嚎，當(dāng)需要時在加載
v-show：調(diào)整css dispaly屬性，可以使客戶端操作更加流暢挨厚。
v-for
1堡僻、 v-for
v-for是用來循環(huán)data中的數(shù)組，來解析重復(fù)模板疫剃；
2钉疫、 基本用法
模板：
<ul>
<li v-for="(item,index) in list">
{{index}} - {{item}}
</li>
</ul>
js:
var vm = new Vue({
...
data(){
return{
list: [20, 23, 18, 65, 32, 19, 5, 56, 41]
}
}
});
模板中的使用形式是v-for="(item,index) in list" ，其中l(wèi)ist是源數(shù)據(jù)數(shù)組巢价，即js中data的list數(shù)組牲阁，item是數(shù)組元素迭代的別名（可以隨便起），index是數(shù)組元素的索引蹄溉，可以省略寫成v-for="item in list";
3、排序
使用排序您炉，我們需要使用computed屬性柒爵，在computed里面，重新聲明一個sortList對象赚爵，為什么要重新聲明棉胀，是為了不污染源數(shù)據(jù)法瑟。
var vm = new Vue({
...
computed:{
sortList(){
var list = [];
for(var i =0;i<this.list.length;i++){
list.push(this.list[i]);
}
return list.sort(sortNumber);
}
}
})
function sortNumber(a,b){
return a-b;
}
4、對象循環(huán)輸出
在實際項目中唁奢，我們使用的最多的就是對象的循環(huán)輸出霎挟，那如何輸出呢？
首先麻掸，在js中定義一個對象數(shù)組：
var vm = new Vue({
...
data(){
return{
person:[
{
name: 'xhz',
age: 22
},
{
name: 'qws',
age: 34
},
{
name: 'asd',
age: 12
},
{
name: 'xdc',
age: 23
}
]
}
}
})
然后酥夭，在模板中輸出
<ul>
<li v-for="(p,index) in person">
{{index+1}} - {{p.name}} - {{p.age}}
</li>
</ul>
對象的排序函數(shù)：
function sortByKey(arr,key){
return array.sort(function (a, b) {
var x = a[key];
var y = b[key];
return ((x<y)?-1:((x>y)?1:0));
})
}
v-text & v-html
前面我們使用插值表達式（即{{XXX}}）在HTML中輸出data，當(dāng)網(wǎng)速比較慢或者加載javascript出錯時脊奋，會出現(xiàn)一個很大的弊端熬北，即暴露我們的{{XXX}}；因此诚隙，Vue給我們提供v-text指令來解決這一問題：
<div v-text="text"></div>
當(dāng)數(shù)據(jù)里需要解析HTML標(biāo)簽的時候讶隐，v-text是無法輸出的，因此久又，Vue還給我們提供了一個指令：v-html
<div v-html="html"></div>
需要注意的是：在生產(chǎn)環(huán)境中動態(tài)渲染HTML是非常危險的巫延，因為容易導(dǎo)致XSS攻擊。所以只能在可信的內(nèi)容上使用v-html地消，永遠不要在用戶提交和可操作的網(wǎng)頁上使用炉峰。
v-on
v-on是用來綁定監(jiān)聽事件的，可以監(jiān)聽DOM觸發(fā)的一些javascript代碼犯建；
<button v-on:click="add">add</button>
<button @click="add">add</button>
上面的兩行代碼是一個意思讲冠，@click是v-on:click的簡寫；
當(dāng)然适瓦，除了綁定click事件竿开，其他的事件也可以綁定，比如change事件玻熙，focu事件否彩，鍵盤事件，下面來說說鍵盤事件：
<input type="text" @key.enter="onKey">
代碼的意思是嗦随，當(dāng)按下"enter"鍵時列荔，觸發(fā)onkey事件；也可以使用鍵值：
<input type="text" @key.13="onKey">
v-model
v-model綁定數(shù)據(jù)源枚尼。就是把數(shù)據(jù)綁定在特定的表單元素上贴浙，可以很容易的實現(xiàn)雙向數(shù)據(jù)綁定。
1署恍、雙向數(shù)據(jù)綁定
模板：
<div id="app">
<p>原始文本信息:{{inputValue}}</p>
<h3>文本框</h3>
<p>v-model:<input type="text" v-model="inputValue"></p>
</div>
js:
var vm = new Vue({
...
data(){
return{
inputValue:'Hello World!'
}
}
})
2崎溃、 修飾符
lazy：取代 imput 監(jiān)聽 change 事件。
number：輸入字符串轉(zhuǎn)為數(shù)字盯质。
-
trim：輸入去掉首尾空格袁串。
<p>v-model.lazy:<input type="text" v-model.lazy="inputValue"></p> <p>v-model.number:<input type="text" v-model.number="inputValue"></p> <p>v-model.trim:<input type="text" v-model.trim="inputValue"></p>
3概而、文本區(qū)域加入數(shù)據(jù)綁定
<textarea rows="10" cols="30" v-model="inputValue"></textarea>
4、多選按鈕綁定一個值
<input type="checkbox" id="checkTrue" v-model="isFlag"><label for="checkTrue">{{isFlag}}</label>
5囱修、多選綁定一個數(shù)組
<p>
<input type="checkbox" name="zz" id="zz" value="zz" v-model="names">
<label for="zz">zz</label>
<input type="checkbox" name="yym" id="yym" value="yym" v-model="names">
<label for="yym">yym</label>
<input type="checkbox" name="zxr" id="zxr" value="zxr" v-model="names">
<label for="zxr">zxr</label>
</p>
6赎瑰、單選按鈕綁定數(shù)據(jù)
<p>
<input type="radio" name="1" id="man" value="男" v-model="sex">
<label for="man">男</label>
<input type="radio" name="0" id="woman" value="女" v-model="sex">
<label for="woman">女</label>
</p>
v-bind
v-bind是處理HTML中的標(biāo)簽屬性的，例如<div></div>就是一個標(biāo)簽破镰，<img>也是一個標(biāo)簽餐曼，我們綁定<img>上的src進行動態(tài)賦值。
模板：
<h3>綁定圖片地址</h3>
<p></p>
<p></p>
上面兩行代碼是一個意思啤咽，v-bind:src是完整語法晋辆，:src是簡寫；
js:
var vm = new Vue({
...
data(){
return{
imgSrc:"https://www.baidu.com/img/qixi_pc_f35fe4b00cc1d200aea7cf9f86ae5dae.gif",
}
}
});
當(dāng)然宇整，除了綁定圖片地址瓶佳，還可以綁定<a></a>標(biāo)簽的href屬性：
<a :href="url"></a>
在工作中我們經(jīng)常使用v-bind來綁定css樣式：
在綁定CSS樣式是，綁定的值必須在vue中的data屬性中進行聲明鳞青。
1霸饲、直接綁定class樣式
<p><span :class="className">1、綁定class</span></p>
2臂拓、綁定classA并進行判斷厚脉，在isOK為true時顯示樣式，在isOk為false時不顯示樣式胶惰。
<p>
<span :class="{classA:isOK}">2傻工、綁定class判斷</span>
<input type="checkbox" id="isOK" v-model="isOK">
<label for="isOK">isOK:{{isOK}}</label>
</p>
3、綁定class中的數(shù)組
<p><span :class="[classA,classB]">3孵滞、綁定class數(shù)組</span></p>
4中捆、綁定class中使用三元表達式判斷
<p><span :class="isOK?classA:classB">4、綁定class三元運算符</span></p>
5坊饶、綁定style
<p><span :style="{color:red,fontSize:font}">1泄伪、綁定style</span></p>
6、用對象綁定style樣式
<p><span :style="styleObj">2匿级、對象綁定style</span></p>
var vm = new Vue({
el: '#app',
data() {
return {
imgSrc: "https://www.baidu.com/img/qixi_pc_f35fe4b00cc1d200aea7cf9f86ae5dae.gif",
url: 'http://www.baidu.com',
className:'classA',
classA:'classA',
classB:'classB',
isOK:false,
red:'green',
font:'26px',
styleObj:{
color:'red',
fontSize:'30px'
}
}
}
})
v-pre & v-cloak & v-once
1蟋滴、v-pre
在模板中跳過vue的編譯，直接輸出原始值痘绎。就是在標(biāo)簽中加入v-pre就不會輸出vue中的data值了津函。
<div v-pre>{{msg}}</div>
這時并不會輸出我們的message值，而是直接在網(wǎng)頁中顯示{{message}}
2孤页、v-cloak
在vue渲染完指定的整個DOM后才進行顯示尔苦。它必須和CSS樣式一起使用，
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
3、v-once
在第一次DOM時進行渲染蕉堰，渲染完成后視為靜態(tài)內(nèi)容，跳出以后的渲染過程悲龟。
<div>
<input type="text" v-model="msg">
<p v-once>{{msg}}</p>
<p>{{msg}}</p>
</div>