視頻課程鏈接：http://edu.51cto.com/course/10543.html

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,過濾器函數)

Vue.js 2.0之全家桶系列視頻課程——筆記（一）

Vue.js技術棧，主講：湯小洋

一、 Vue.js簡介

1. Vue.js是什麼

2.vue和angular的區別

2.1 angular

2.2 vue

二、起步

1. 下載核心庫vue.js

2. Hello World（對比angular）

2.1 angular實現

2.2 vue實現

3. 安裝vue-devtools插件，便於在chrome中調試vue

三、 常用指令

1. 什麼是指令？

2. vue中常用的指令

四、 練習：用戶管理

五、 事件和屬性

1. 事件

1.1 事件簡寫

1.2 事件對象$event

1.3 事件冒泡

1.4 事件默認行爲

1.5 鍵盤事件

1.6 事件修飾符

2. 屬性

2.1 屬性綁定和屬性的簡寫

2.2 class和style屬性

六、 模板

1. 簡介

2. 數據綁定的方式

3. 其他指令

七、 過濾器

1. 簡介

2. 關於內置過濾器

3. 自定義過濾器

3.l 自定義全局過濾器

3.l 自定義局部過濾器

三、常用指令

四、練習：用戶管理

五、事件和屬性

六、模板

七、過濾器