湯小洋Vue課程代碼記錄
課程連接地址：http://edu.51cto.com/course/10543.html
抄錄至簡書僅方便自己查閱，小伙伴們可以去學(xué)院支持該課程
Vue.js 五天 湯小洋
一烙心、 Vue.js簡介
1. Vue.js是什么
Vue.js也稱為Vue瓤鼻，讀音/vju:/蹂风，類似view，錯(cuò)誤讀音v-u-e
版本：v1.0 v2.0
- 是一個(gè)構(gòu)建用戶界面的框架
- 是一個(gè)輕量級MVVM（Model-View-ViewModel）框架，和angular丑勤、react類似，其實(shí)就是所謂的數(shù)據(jù)雙向綁定
- 數(shù)據(jù)驅(qū)動(dòng)+組件化的前端開發(fā)（核心思想）
- 通過簡單的API實(shí)現(xiàn)響應(yīng)式的數(shù)據(jù)綁定和組合的視圖組件
- 更容易上手吧趣、小巧
參考：官網(wǎng)
2.vue和angular的區(qū)別
2.1 angular
- 上手較難
- 指令以ng-xxx開頭
- 所有屬性和方法都存儲(chǔ)在$scope中
- 由google維護(hù)
2.2 vue
- 簡單法竞、易學(xué)、更輕量
- 指令以v-xxx開頭
- HTML代碼+JSON數(shù)據(jù)强挫，再創(chuàng)建一個(gè)vue實(shí)例
- 由個(gè)人維護(hù)：尤雨溪岔霸，華人，目前就職于阿里巴巴俯渤，2014.2開源了vue.js庫
共同點(diǎn)：都不兼容低版本IE
對比：GitHub上vue的stars數(shù)量大約是angular的兩倍
二呆细、起步
1. 下載核心庫vue.js
bower info vue
npm init --yes
cnpm install vue --save
版本 v2.3.4 目前最新版本(2017.6.29)
vue2.0和1.0相比，最大的變化就是引入了Virtual DOM（虛擬DOM）,頁面更新效率更高八匠，速度更快
2. Hello World（對比angular）
2.1 angular實(shí)現(xiàn)
js:
let app=angular.module('myApp',[]);
app.controller('MyController',['$scope',function($scope){
$scope.msg='Hello World';
}]);
html:
<html ng-app="myApp">
<div ng-controller="MyController">
{{msg}}
</div>
</html>
2.2 vue實(shí)現(xiàn)
js:
new Vue({
el:'#itany', //指定關(guān)聯(lián)的選擇器
data:{ //存儲(chǔ)數(shù)據(jù)
msg:'Hello World',
name:'tom'
}
});
html:
<div id="itany">
{{msg}}
</div>
3. 安裝vue-devtools插件絮爷，便于在chrome中調(diào)試vue
直接將vue-devtools解壓縮，然后將文件夾中的chrome拖放到擴(kuò)展程序中
//配置是否允許vue-devtools檢查代碼梨树，方便調(diào)試坑夯，生產(chǎn)環(huán)境中需要設(shè)置為false
Vue.config.devtools=false;
Vue.config.productionTip=false; //阻止vue啟動(dòng)時(shí)生成生產(chǎn)消息
三、 常用指令
1. 什么是指令劝萤？
用來擴(kuò)展html標(biāo)簽的功能
angular中常用的指令：
ng-model
ng-repeat
ng-click
ng-show/ng-hide
ng-if
2. vue中常用的指令
v-model
雙向數(shù)據(jù)綁定渊涝，一般用于表單元素v-for
對數(shù)組或?qū)ο筮M(jìn)行循環(huán)操作，使用的是v-for，不是v-repeat
注：在vue1.0中提供了隱式變量跨释，如index胸私、key
在vue2.0中去除了隱式變量，已被廢除v-on
用來綁定事件鳖谈，用法：v-on:事件="函數(shù)"v-show/v-if
用來顯示或隱藏元素岁疼，v-show是通過display實(shí)現(xiàn)，v-if是每次刪除后再重新創(chuàng)建缆娃，與angular中類似
四捷绒、 練習(xí)：用戶管理
使用BootStrap+Vue.js
五、 事件和屬性
1. 事件
1.1 事件簡寫
v-on:click=""
簡寫方式 @click=""
1.2 事件對象$event
包含事件相關(guān)信息贯要，如事件源暖侨、事件類型、偏移量
target崇渗、type字逗、offsetx
1.3 事件冒泡
阻止事件冒泡：
a)原生js方式，依賴于事件對象
b)vue方式宅广，不依賴于事件對象
@click.stop
1.4 事件默認(rèn)行為
阻止默認(rèn)行為：
a)原生js方式葫掉，依賴于事件對象
1.5 鍵盤事件
回車：@keydown.13 或@keydown.enter
上：@keydown.38 或@keydown.up
默認(rèn)沒有@keydown.a/b/c...事件，可以自定義鍵盤事件跟狱，也稱為自定義鍵碼或自定義鍵位別名
1.6 事件修飾符
.stop - 調(diào)用 event.stopPropagation()俭厚。
.prevent - 調(diào)用 event.preventDefault()。
.{keyCode | keyAlias} - 只當(dāng)事件是從特定鍵觸發(fā)時(shí)才觸發(fā)回調(diào)驶臊。
.native - 監(jiān)聽組件根元素的原生事件挪挤。
.once - 只觸發(fā)一次回調(diào)。
2. 屬性
2.1 屬性綁定和屬性的簡寫
v-bind 用于屬性綁定关翎， v-bind:屬性=""
屬性的簡寫：
v-bind:src="" 簡寫為 :src=""
2.2 class和style屬性
綁定class和style屬性時(shí)語法比較復(fù)雜：
六电禀、 模板
1. 簡介
Vue.js使用基于HTML的模板語法，可以將DOM綁定到Vue實(shí)例中的數(shù)據(jù)
模板就是{{}}笤休，用來進(jìn)行數(shù)據(jù)綁定尖飞，顯示在頁面中
也稱為Mustache語法
2. 數(shù)據(jù)綁定的方式
a.雙向綁定
v-model
b.單向綁定
方式1：使用兩對大括號(hào){{}}，可能會(huì)出現(xiàn)閃爍的問題，可以使用v-cloak解決
方式2：使用v-text、v-html
3. 其他指令
v-once 數(shù)據(jù)只綁定一次
v-pre 不編譯凑兰，直接原樣顯示
七、 過濾器
1. 簡介
用來過濾模型數(shù)據(jù)沮明，在顯示之前進(jìn)行數(shù)據(jù)處理和篩選
語法：{{ data | filter1(參數(shù)) | filter2(參數(shù))}}
2. 關(guān)于內(nèi)置過濾器
vue1.0中內(nèi)置許多過濾器，如：
currency窍奋、uppercase荐健、lowercase
limitBy
orderBy
filterBy
vue2.0中已經(jīng)刪除了所有內(nèi)置過濾器酱畅，全部被廢除
如何解決：
a.使用第三方工具庫，如lodash江场、date-fns日期格式化纺酸、accounting.js貨幣格式化等
b.使用自定義過濾器
3. 自定義過濾器
分類：全局過濾器、局部過濾器
3.l 自定義全局過濾器
使用全局方法Vue.filter(過濾器ID,過濾器函數(shù))
