vue學習（一）、Vue.js簡介
Vue.js 五天 湯小洋
一、 Vue.js簡介
1. Vue.js是什麼
Vue.js也稱為Vue，讀音/vju:/，類似view，錯誤讀音v-u-e 版本：v1.0 v2.0
是一個構建使用者介面的框架
是一個輕量級MVVM（Model-View-ViewModel）框架，和angular、react類似，其實就是所謂的資料雙向繫結
資料驅動+元件化的前端開發（核心思想）
通過簡單的API實現響應式的資料繫結和組合的檢視元件
更容易上手、小巧
參考：官網
2.vue和angular的區別
2.1 angular
上手較難
指令以ng-xxx開頭
所有屬性和方法都儲存在$scope中
由google維護
2.2 vue
簡單、易學、更輕量
指令以v-xxx開頭
HTML程式碼+JSON資料，再建立一個vue例項
由個人維護：尤雨溪，華人，目前就職於阿里巴巴，2014.2開源了vue.js庫
共同點：都不相容低版本IE 對比：GitHub上vue的stars數量大約是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實現
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實現
js:
new Vue({
el:'#itany', //指定關聯的選擇器
data:{ //儲存資料
msg:'Hello World',
name:'tom'
}
});
html:
<div id="itany">
{{msg}}
</div>
3. 安裝vue-devtools外掛，便於在chrome中除錯vue
直接將vue-devtools解壓縮，然後將資料夾中的chrome拖放到擴充套件程式中
//配置是否允許vue-devtools檢查程式碼，方便除錯，生產環境中需要設定為false
Vue.config.devtools=false;
Vue.config.productionTip=false; //阻止vue啟動時生成生產訊息
三、 常用指令
1. 什麼是指令？
用來擴充套件html標籤的功能
angular中常用的指令：
ng-model
ng-repeat
ng-click
ng-show/ng-hide
ng-if
2. vue中常用的指令
v-model 雙向資料繫結，一般用於表單元素
v-for 對陣列或物件進行迴圈操作，使用的是v-for，不是v-repeat 注：在vue1.0中提供了隱式變數，如$index、$key 在vue2.0中去除了隱式變數，已被廢除
v-on 用來繫結事件，用法：v-on:事件="函式"
v-show/v-if
用來顯示或隱藏元素，v-show是通過display實現，v-if是每次刪除後再重新建立，與angular中類似
四、 練習：使用者管理
使用BootStrap+Vue.js
五、 事件和屬性
1. 事件
1.1 事件簡寫
v-on:click=""
簡寫方式 @click=""
1.2 事件物件$event
包含事件相關資訊，如事件源、事件型別、偏移量
target、type、offsetx
1.3 事件冒泡
阻止事件冒泡：
a)原生js方式，依賴於事件物件
b)vue方式，不依賴於事件物件
@click.stop
1.4 事件預設行為
阻止預設行為：
a)原生js方式，依賴於事件物件
1.5 鍵盤事件
回車：@keydown.13 或@keydown.enter
上：@keydown.38 或@keydown.up
預設沒有@keydown.a/b/c...事件，可以自定義鍵盤事件，也稱為自定義鍵碼或自定義鍵位別名
1.6 事件修飾符
.stop - 呼叫 event.stopPropagation()。
.prevent - 呼叫 event.preventDefault()。
.{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回撥。
.native - 監聽元件根元素的原生事件。
.once - 只觸發一次回撥。
2. 屬性
2.1 屬性繫結和屬性的簡寫
v-bind 用於屬性繫結， v-bind:屬性=""
屬性的簡寫：
v-bind:src="" 簡寫為 :src=""
2.2 class和style屬性
繫結class和style屬性時語法比較複雜：
六、 模板
1. 簡介
Vue.js使用基於HTML的模板語法，可以將DOM繫結到Vue例項中的資料
模板就是{{}}，用來進行資料繫結，顯示在頁面中
也稱為Mustache語法
2. 資料繫結的方式
a.雙向繫結
v-model
b.單向繫結
方式1：使用兩對大括號{{}}，可能會出現閃爍的問題，可以使用v-cloak解決
方式2：使用v-text、v-html
3. 其他指令
v-once 資料只繫結一次
v-pre 不編譯，直接原樣顯示
七、 過濾器
1. 簡介
用來過濾模型資料，在顯示之前進行資料處理和篩選
語法：{{ data | filter1(引數) | filter2(引數)}}
2. 關於內建過濾器
vue1.0中內建許多過濾器，如：
currency、uppercase、lowercase
limitBy
orderBy
filterBy
vue2.0中已經刪除了所有內建過濾器，全部被廢除
如何解決：
a.使用第三方工具庫，如lodash、date-fns日期格式化、accounting.js貨幣格式化等
b.使用自定義過濾器
3. 自定義過濾器
分類：全域性過濾器、區域性過濾器
3.l 自定義全域性過濾器
使用全域性方法Vue.filter(過濾器ID,過濾器函式)
3.l 自定義區域性過濾器