过滤器 自定义键盘修饰符 生命周期 Vue-resource

过滤器

• Vue 允许自定义一个过滤器，用来进行一些数据的格式化
• 过滤器应用在 插值 和 V-bind 表达式 后边
• 过滤器放在JS 表达式的尾部 由管道符号 | 来表示

全局过滤器

在Vue.filter方法中传入 过滤器名字 和执行函数就可以注册一个新过滤器了

• HTML元素

{{item.ctime | msgFormat('参数')}}

    // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
    Vue.filter('msgFormat', function (msg, arg, arg2) {
      // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
      return msg.replace(/单纯/g, arg + arg2)
    })

私有过滤器

• HTML元素

{{item.ctime | dataFormat('yyyy-mm-dd')}}

• 定义方式：

     filters: { // 定义私有过滤器    过滤器有两个 条件  【过滤器名称 和 处理函数】
       
        dateFormat (dateStr, pattern = '') {}
      },

过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串；

---

键盘修饰符 和自定义键盘修饰符

键盘修饰符 解释: 当需要处理键盘事件时 可以在事件类型后指定 所需要的按键

自定义键盘修饰符

1. 通过 Vue.config.keyCodes.自定义的名称 = 按键值 来定义

按键值列表

---

自定义指令

通过 Vue.directive('指令名称',对象{三个钩子函数}) 来创建全局的

钩子函数

---

指令定义函数提供了几个钩子函数（可选）,下面是主要的三个：

• inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
• bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
• update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

在组件中创建局部的指令

directives: {
  focus: {
    // 指令的定义---
  }
}

自定义指令的使用方式：

生命周期 非常重要!!!

---

主要的生命周期函数分类：

• 创建期间的生命周期函数：
  • beforeCreate：Vue实例刚被内存创建出来,还没有datahe methods
  • created：Vue实例已经被内存创建完成,datahe methods 已经有了,此时还没有开始 编译模板
  • beforeMount：此时已经完成了模板的编译但是还没有渲染到页面上
  • mounted：此时 已将编译好的模板挂在指定的容器当中 也就是 el 所指定的元素内
• 运行期间的生命周期函数:
  • 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