过滤器
- Vue 允许自定义一个过滤器，用来进行一些数据的格式化
- 过滤器应用在 插值 和 V-bind 表达式 后边
- 过滤器放在JS 表达式的尾部 由管道符号 | 来表示
全局过滤器
在Vue.filter方法中传入 过滤器名字 和执行函数就可以注册一个新过滤器了
- HTML元素
<td>{{item.ctime | msgFormat('参数')}}</td>
// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
return msg.replace(/单纯/g, arg + arg2)
})
私有过滤器
- HTML元素
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
- 定义方式：
filters: { // 定义私有过滤器 过滤器有两个 条件 【过滤器名称 和 处理函数】
dateFormat (dateStr, pattern = '') {}
},
过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串；
键盘修饰符 和自定义键盘修饰符
键盘修饰符 解释: 当需要处理键盘事件时 可以在事件类型后指定 所需要的按键
<input type="text" @keyup.enter="add" name="" id="">
自定义键盘修饰符
- 通过
Vue.config.keyCodes.自定义的名称 = 按键值来定义
按键值列表
自定义指令
通过
Vue.directive('指令名称',对象{三个钩子函数})来创建全局的
钩子函数
指令定义函数提供了几个钩子函数（可选）,下面是主要的三个：
-
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。 -
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 -
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
在组件中创建局部的指令
directives: {
focus: {
// 指令的定义---
}
}
自定义指令的使用方式：
<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">
生命周期 非常重要!!!
主要的生命周期函数分类：
- 创建期间的生命周期函数：
- beforeCreate：Vue实例刚被内存创建出来,还没有
datahemethods - created：Vue实例已经被内存创建完成,
datahemethods已经有了,此时还没有开始 编译模板 - beforeMount：此时已经完成了模板的编译但是还没有渲染到页面上
- mounted：此时 已将编译好的模板挂在指定的容器当中 也就是 el 所指定的元素内
- beforeCreate：Vue实例刚被内存创建出来,还没有
- 运行期间的生命周期函数:
- beforeUpdate: 页面数据更新时会被触发,此时data 中已经更改 但是页面中还未同步,并没有重新开始渲染DOM节点
- updated: 此时页面显示已和data 中同步完成,DOM节点已重新渲染完成
- 销毁期间的生命周期函数:
- beforeDestroy: Vue实例销毁之前,此时 Vue实例的方法 变量仍然可以使用
- destroyed: Vue实例 所绑定的变量 函数 事件监听 都被释放 已不可用
Vue 中发送请求的方式
请求的常用方式 Get Post jsonP
官方推荐的插件 Vue-resource 用法:
Vue-resource 的配置
手动搭建的方法: 通过Script引入 Vue.js 后 在使用script 引入Vue-resource 文件
在Vue 中 使用 $http 作为Vue-resource的调用名
- get 方法
getInfo(){
this.$http.get("url").then("成功回调","失败回调(可选)")
},
- post 方法
postInfo(){
this.$http.post("url",{parameter:"参数"},{config:"配置"}).then("成功回调","失败回调(可选)")
},
- jsonP 方法
jsonpInfo(){
this.$http.jsonp('url',).then("成功回调","失败回调(可选)")
},
第三方插件 axios
