過濾器
- Vue 允許自定義一個過濾器赤套，用來進(jìn)行一些數(shù)據(jù)的格式化
- 過濾器應(yīng)用在 插值 和 V-bind 表達(dá)式 后邊
- 過濾器放在JS 表達(dá)式的尾部 由管道符號 | 來表示
全局過濾器
在Vue.filter方法中傳入 過濾器名字 和執(zhí)行函數(shù)就可以注冊一個新過濾器了
- HTML元素
<td>{{item.ctime | msgFormat('參數(shù)')}}</td>
// 定義一個 Vue 全局的過濾器，名字叫做 msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
// 字符串的 replace 方法档叔，第一個參數(shù)瓶佳，除了可寫一個 字符串之外芋膘，還可以定義一個正則
return msg.replace(/單純/g, arg + arg2)
})
私有過濾器
- HTML元素
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
- 定義方式：
filters: { // 定義私有過濾器 過濾器有兩個 條件 【過濾器名稱 和 處理函數(shù)】
dateFormat (dateStr, pattern = '') {}
},
過濾器調(diào)用的時候，采用的是就近原則霸饲，如果私有過濾器和全局過濾器名稱一致了为朋，這時候 優(yōu)先調(diào)用私有過濾器
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')來填充字符串；
鍵盤修飾符 和自定義鍵盤修飾符
鍵盤修飾符 解釋: 當(dāng)需要處理鍵盤事件時 可以在事件類型后指定 所需要的按鍵
<input type="text" @keyup.enter="add" name="" id="">
自定義鍵盤修飾符
- 通過
Vue.config.keyCodes.自定義的名稱 = 按鍵值來定義
按鍵值列表
自定義指令
通過
Vue.directive('指令名稱',對象{三個鉤子函數(shù)})來創(chuàng)建全局的
鉤子函數(shù)
指令定義函數(shù)提供了幾個鉤子函數(shù)（可選）,下面是主要的三個：
-
inserted: 被綁定元素插入父節(jié)點時調(diào)用（父節(jié)點存在即可調(diào)用厚脉，不必存在于 document 中）习寸。 -
bind: 只調(diào)用一次，指令第一次綁定到元素時調(diào)用傻工，用這個鉤子函數(shù)可以定義一個在綁定時執(zhí)行一次的初始化動作霞溪。 -
update: 被綁定元素所在的模板更新時調(diào)用孵滞，而不論綁定值是否變化。通過比較更新前后的綁定值鸯匹，可以忽略不必要的模板更新（詳細(xì)的鉤子函數(shù)參數(shù)見下）坊饶。
在組件中創(chuàng)建局部的指令
directives: {
focus: {
// 指令的定義---
}
}
自定義指令的使用方式：
<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">
生命周期 非常重要!!!
主要的生命周期函數(shù)分類：
- 創(chuàng)建期間的生命周期函數(shù)：
- beforeCreate：Vue實例剛被內(nèi)存創(chuàng)建出來,還沒有
datahemethods - created：Vue實例已經(jīng)被內(nèi)存創(chuàng)建完成,
datahemethods已經(jīng)有了,此時還沒有開始 編譯模板 - beforeMount：此時已經(jīng)完成了模板的編譯但是還沒有渲染到頁面上
- mounted：此時 已將編譯好的模板掛在指定的容器當(dāng)中 也就是 el 所指定的元素內(nèi)
- beforeCreate：Vue實例剛被內(nèi)存創(chuàng)建出來,還沒有
- 運行期間的生命周期函數(shù):
- beforeUpdate: 頁面數(shù)據(jù)更新時會被觸發(fā),此時data 中已經(jīng)更改 但是頁面中還未同步,并沒有重新開始渲染DOM節(jié)點
- updated: 此時頁面顯示已和data 中同步完成,DOM節(jié)點已重新渲染完成
- 銷毀期間的生命周期函數(shù):
- beforeDestroy: Vue實例銷毀之前,此時 Vue實例的方法 變量仍然可以使用
- destroyed: Vue實例 所綁定的變量 函數(shù) 事件監(jiān)聽 都被釋放 已不可用
Vue 中發(fā)送請求的方式
請求的常用方式 Get Post jsonP
官方推薦的插件 Vue-resource 用法:
Vue-resource 的配置
手動搭建的方法: 通過Script引入 Vue.js 后 在使用script 引入Vue-resource 文件
在Vue 中 使用 $http 作為Vue-resource的調(diào)用名
- get 方法
getInfo(){
this.$http.get("url").then("成功回調(diào)","失敗回調(diào)(可選)")
},
- post 方法
postInfo(){
this.$http.post("url",{parameter:"參數(shù)"},{config:"配置"}).then("成功回調(diào)","失敗回調(diào)(可選)")
},
- jsonP 方法
jsonpInfo(){
this.$http.jsonp('url',).then("成功回調(diào)","失敗回調(diào)(可選)")
},
第三方插件 axios
