Vueday03-生命周期，自定义指令，过滤器

过滤器

作用：可以用作一些常见的文本格式化

用处：差值表达式 v-bind表达式

用法：管道符（|）连接

全局过滤器：写在main.js中

//第一个参数：过滤器的名字
//第二个参数：回调函数
Vue.filter('setMsg',function(data,format){
  log(data)//管道符前面的数据 msg
  log(format)//传递回来的参数，就是调用时{{msg | setMsg(6)}}的6
  return  data.replace('你好','**').replace()
})

//如果存在第二个过滤器，他的data是前一个filter的返回值

私有过滤器：

//和methods同级
filters:{
  setMsg1(data,format){
    log(data)//管道符前面的数字 msg
 		log(format)//传递回来的参数，就是调用时{{msg | setMsg(6)}}的6，常用来传递格式
}
}

补位函数	说明
.padStart(位数，补的数)	不足位数在前面补
.padEnd(位数，补的数)	不足位数在后面补

自定义指令

使用：v-指令的名字

全局自定义指令：

<div v-color='green'>
//第一个参数：自定义指令的名字
//第二个参数：对象
Vue.directive('color',{
  //这个三个方法第一个参数都是el，原生的dom对象
  //bind只调用一次，指令第一次绑定到元素时调用
  bind(el,binding){
    log(el)//绑定的元素
    log(binding)//信息对象
    el.style.color=binding.value
  },
  //这个元素已经渲染到界面上之后执行  是真实dom
  inserted(el){
    log(el)
  	el.focus()
  },
  //更新之后触发的函数
  update(el){
         log(el)
  }
})

• el：指令所绑定的元素，可以用来直接操作 DOM 。

• binding：一个对象，包含以下属性：

• • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。

• oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用。

私有指令

//与data同级
directives:{
  //直接写一个函数相当于color1是一个bind函数，只执行一次
  color1(el,binding){
    el.focus()
  },
  color2:{
    bind(el,binding){ },
    inserted(el){},
    update(el){}
  }
}

生命周期

（生命周期函数，生命周期钩子，生命周期事件）

生命周期：从Vue实例创建、运行、到销毁的期间、总是伴随着各种各样的事件，这些事件，统称为生命周期（12个，均与data同级

与data同级

方法	说明	作用
beforeCreate(){}	data和methods中的数据还没有初始化就执行，获取不到data和methods中的数据	页面重定向
created(){}	创建之后第一个可以操作data和methods的生命周期	数据初始化、接口请求
beforeMount(){}	处于创建之前的状态，是虚拟DOM挂载
mounted(){}	处于创建之后的状态，是真实的dom挂载	第一个可以操作DOM元素的生命周期
beforeUpdate(){}	执行零次或者无数次，处于更新之前的状态，data中的数据是最新的，页面中的数据是旧的，还未保持同步
updated(){}	执行零次或者无数次，处于更新之后的状态，data和页面中的数据都是最新的
beforeDestroy(){}	处于销毁之前的状态，页面还未销毁	清空定时器和页面监听
destroyed(){}	处于销毁之后的状态

安装axios :mpm install axios

镜像：npm config set registry https://registry.npmmirror.com/

created(){
  //get请求
  axios.get('url').then(res=>{
    log(res.data.data[0].imgUrl)
  }
  //post请求
 axios.post('url',{
      type:'free'
    },
    {
      headers:{
        
      }
    }).then(res => {
      
    })               
}