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

2019-02-28  本文已影响0人  伽蓝star

过滤器

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

全局过滤器

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

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

私有过滤器

<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="">

自定义键盘修饰符

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

按键值列表


自定义指令

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

钩子函数


指令定义函数提供了几个钩子函数(可选),下面是主要的三个:

在组件中创建局部的指令

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

自定义指令的使用方式:

<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">

生命周期 非常重要!!!


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

Vue 中发送请求的方式

请求的常用方式 Get Post jsonP

官方推荐的插件 Vue-resource 用法:

Vue-resource 的配置
手动搭建的方法: 通过Script引入 Vue.js 后 在使用script 引入Vue-resource 文件
在Vue 中 使用 $http 作为Vue-resource的调用名

            getInfo(){
                this.$http.get("url").then("成功回调","失败回调(可选)")
            },
            postInfo(){
                this.$http.post("url",{parameter:"参数"},{config:"配置"}).then("成功回调","失败回调(可选)")
            },
            jsonpInfo(){
                this.$http.jsonp('url',).then("成功回调","失败回调(可选)")
            },

第三方插件 axios

上一篇 下一篇

猜你喜欢

热点阅读