vue基礎知識學習

1、 事件和屬性

1. 事件

1.1 事件簡寫

v-on:click="" 簡寫爲 @click=""

1.2 事件對象$event

包含事件相關信息，如事件源（target）、事件類型（type）、偏移量（offsetx）

1.3鍵盤事件

回車：@keydown.13 或@keydown.enter

上：@keydown.38 或@keydown.up

默認沒有@keydown.a/b/c...事件，能夠自定義鍵盤事件，也稱爲自定義鍵碼或自定義鍵位別名

1.3 事件修飾符

.stop - 調用 event.stopPropagation()。

.prevent - 調用 event.preventDefault()。

.{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。

.native - 監聽組件根元素的原生事件。

.once - 只觸發一次回調。

2. 屬性

2.1 屬性綁定和屬性的簡寫

v-bind 用於屬性綁定， v-bind:屬性="" 簡寫成 v-bind:src="" 簡寫爲 :src=""

2、 模板

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 不編譯，直接原樣顯示

3、 過濾器

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.2自定義局部過濾器

4、 發送AJAX請求

1. 簡介

vue自己不支持發送AJAX請求，須要使用vue-resource、axios等插件實現 axios是一個基於Promise的HTTP請求客戶端，用來發送請求，也是vue2.0官方推薦的，同時再也不對vue-resource進行更新和維護

參考：GitHub上搜索axios，查看API文檔

2. 使用axios發送AJAX請求

2.1 安裝axios並引入

npm install axios -S

也可直接下載axios.min.js文件

2.2 基本用法

axios([options])
axios.get(url[,options]);

傳參方式：
    1.經過url傳參
    2.經過params選項傳參
    axios.post(url,data,[options]);
    axios默認發送數據時，數據格式是Request Payload，並不是咱們經常使用的Form Data格式，
因此參數必需要以鍵值對形式傳遞，不能以json形式傳參
傳參方式：
    1.本身拼接爲鍵值對
    2.使用transformRequest，在請求發送前將請求數據進行轉換
    3.若是使用模塊化開發，可使用qs模塊進行轉換

axios自己並不支持發送跨域的請求，沒有提供相應的API，做者也暫沒計劃在axios添加支持發送跨域請求，因此只能使用第三方庫

3. 使用vue-resource發送跨域請求

3.1 安裝vue-resource並引入

cnpm install vue-resource -S

3.2 基本用法

使用this.$http發送請求

this.$http.get(url, [options])
this.$http.head(url, [options])
this.$http.delete(url, [options])
this.$http.jsonp(url, [options])
this.$http.post(url, [body], [options])
this.$http.put(url, [body], [options])
this.$http.patch(url, [body], [options])

5、Vue生命週期

vue實例從建立到銷燬的過程，稱爲生命週期，共有八個階段

6、計算屬性

1. 基本用法

計算屬性也是用來存儲數據，但具備如下幾個特色：

a.數據能夠進行邏輯處理操做

b.對計算屬性中的數據進行監視

2.計算屬性 vs 方法

將計算屬性的get函數定義爲一個方法也能夠實現相似的功能

區別：

a.計算屬性是基於它的依賴進行更新的，只有在相關依賴發生改變時才能更新變化

b.計算屬性是緩存的，只要相關依賴沒有改變，屢次訪問計算屬性獲得的值是以前緩存的計算結果，不會屢次執行

3. get和set

計算屬性由兩部分組成：get和set，分別用來獲取計算屬性和設置計算屬性 默認只有get，若是須要set，要本身添加

7、 vue實例的屬性和方法

1. 屬性

vm.$el

vm.$data

vm.$options

vm.$refs

2. 方法

vm.$mount()

vm.$destroy()

vm.$nextTick(callback)

vm.$set(object,key,value)

vm.$delete(object,key)

vm.$watch(data,callback[,options])

8、自定義指令

分類：全局指令、局部指令

1. 自定義全局指令

使用全局方法Vue.directive(指令ID,定義對象)

2. 自定義局部指令

9、過渡(動畫)

1. 簡介

Vue 在插入、更新或者移除 DOM 時，提供多種不一樣方式的應用過渡效果 本質上仍是使用CSS3動畫：transition、animation

2. 基本用法

使用transition組件，將要執行動畫的元素包含在該組件內

<transition>
    運動的元素
</transition>

過濾的CSS類名：6個

3. 鉤子函數

8個

4. 結合第三方動畫庫animate..css一塊兒使用

<transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight"> <p v-show="flag">網博</p> </transition>

5. 多元素動畫

<transition-group>