自定义变量、私有过滤器、全局过滤器、全局自定义、生命周期

自定义变量

export default {
  name: "customDirectives",
//   自定义变量
  data() {
    return {
      col: 'red',
      value: 'green'
    }
  },
  directives: {
    color1(el, format) {
      console.log(el)
      console.log(111)
      console.log(format)
    },
    color2:{
      inserted(el){
        console.log(el)
      }
    }


  }
}

<div>directives
  <div v-color="col">2</div>
  <div v-color="'green'">3</div>

  <input type="text" v-color1>

  <input type="text" v-color1 v-model="value">
  <div v-color2>333</div>
  <input type="text" v-color2>
</div>

私有 过滤器

export default {
  name: "filterPage",
  data(){
    return{
      msg:'我爱学习，学习爱我'
    }
  },
//   私有过滤器
  filters:{
    setMsg3(data,format){
      console.log(111)
      console.log(data)
      console.log(format)
    }
  }
}

<div>{{msg | setMsg}}
{{msg |setMsg(888)}}
  {{ msg | setMsg3(222)}}
</div>

全局过滤器

// 全局过滤器
// 第一个参数：过滤器的名字
// 第二个参数：回调函数
Vue.filter('setMsg',function(data,format){
  // 管道符前面的数据
  console.log(data);
//   传递回来的参数
  console.log(format);
  return data.replace('学习','吃饭').replace('学习','吃饭')
})

全局自定义

// 全局自定义指令
// 第一个参数：自定义指令的名字
// 第二个参数：对象
Vue.directive('color',{
  // 只调用一次，指令第一次绑定到元素时调用
  bind(el,binding){
  //   绑定的元素
    console.log(el);
  //   信息对象
    console.log(binding);
    el.style.color = binding.value
    console.log(binding.value)
  },
  // 这个元素已经渲染到页面上之后执行  真实的DOM
  inserted(el){
    // 绑定的元素
    console.log(el);
  },
  // 更新之后触发的函数
  update(el){
    console.log(el)
  }
})

生命周期

export default {
  name: "lifeCycle",
//   生命周期
  data(){
    return{
      msg:"hello",
      value:''
    }
  },
  // 创建之前，data和methods中的数据还没有初始化，获取不到data和methods中的数据
  // 作用：页面重定向
  beforeCreate(){
    console.log('beforeCreate')
    console.log(this.msg)
  },
//   创建之后，data和methods中的数据已经初始化，第一个可以操作data和methods的生命周期
//   作用：数据初始化，接口请求
created(){
  console.log('created')
  console.log(this.mgs)
},
  // 创建之前，虚拟DOM挂载
  beforeMount(){
    console.log('beforeMount')
    console.log(this.msg)
  },
  // 创建之后，真实的DOM挂载，第一个可以操作DOM元素的生命周期
  mounted(){
    console.log('mounted')
    console.log(this.msg)
  },
  // 执行0次或者无数次
  // 更新之前，data中的数据是最新的，页面中的数据是旧的，还未保持同步
  beforeUpdate(){
    console.log('beforeUpdate')
    console.log(this.msg)
  },
  // 更新之后，data和页面中的数据都是最新的
  updated(){
    console.log('updated')
    console.log(this.msg)
  },
  // 销毁之前 页面还未销毁
  // 作用：清空定时器和页面监听
  beforeDestroy(){
    console.log('beforeDestroy')
    console.log(this.msg)
  },
  // 销毁之后
  destroyed(){
    console.log('destroyed')
    console.log(this.msg)
  }
}