VUE02

v-cloak

给闪烁的元素加上v-cloak指令  解决差值表达式闪烁的问题
当vue结束编译后（vue文件加载完成后）v-cloak会被删除
<p v-cloak>{{name}}</p>

ref

ref属性代表对dom的引用，随便取值，不能重复

monted

mounted钩子函数，表示页面加载的时候执行里面内容
名字不能随便取，且不能写在methods里面
mounted(){
    this.$refs.name.focus()
}

Vue.directive()自定义指令

Vue.directive(name,{})包含两个参数，name必须小写；{}为指令的配置项
Vue.directive(name,{
    inserted(el,binding){
        console.log(el)
        el.focus()
    }
})

inserted同为钩子函数，表示指令插入到标签中的时候执行
el表示自定义指令的元素，binding表示自定义指令的信息
Vue.directive('mycolor', {
inserted(el, binding) {
  console.log(binding);
  // binding.value可以获取传入自定义指令中的属性的值
  el.style.color = binding.value
}

})

Vue.filter过滤器

Vue.filter（）
有两个参数，第一个是过滤器的名字；第二个是过滤器的处理函数，这个函数有默认参数，表示需要过滤的数据
Vue.filter（'fmttime',(time,seprator) => {
    var y = time.getFullYear(),
        m = time.getMonth + 1,
        d = time.getDate();
    return y+seprator+m+seprator+d
})

computed计算属性

根据data已有的属性计算得出新的属性
创建计算属性需要computed关键字，它是一个对象
计算属性基于依赖进行缓存的
computed: {
      // 这里fullName就是一个计算属性，它是一个函数，但这个函数可以当成属性来使用
      fullName () {
        return this.firstName + this.lastName
      }
    }

watch监听器

watch用来监听data数据

watch: {
      // 这里面的函数名很特殊，它是你需要监听的data的名字，这个函数包含两个参数，一个是newVal,一个是oldVal
      firstName (newVal, oldVal) {
        console.log(newVal, oldVal);
        this.watchFullName = newVal + this.lastName
      },
      lastName (newVal, oldVal) {
        this.watchFullName = this.firstName + newVal
      }
    }

能用computed实现就用computed
需要执行异步操作的时候使用watch

深度监听
watch: {
      // 监听对象不能使用下面这种写法，要使用深度监听
      // user(newVal, oldVal) {
      //   console.log('改变了');
      // }

      user: {
        // hanlder这个函数名字固定
        handler (newval) {
          console.log('改变了');
          console.log(newval.name);
        },
        // deep:true表示深度监听
        deep: true
      }
    }

axios

axios.get('接口名称'.{
    params:{
        ID:123
    }
})
    .then(res => {
    console.log(res)
})
    .catch(error => {
    console.log(error)
})

axios.post('接口名称'.{
    name:"zs",
    age:18
})
    .then(res => {
    console.log(res)
})
    .catch(error => {
    console.log(error)
})

过渡和动画

vue提供了多重方式应用过渡效果。有一下工具：
-在在 CSS 过渡和动画中自动应用 class
-可以配合使用第三方 CSS 动画库，如 Animate.css
-在过渡钩子函数中使用 JavaScript 直接操作 DOM
-可以配合使用第三方 JavaScript 动画库，如 Velocity.js

transition封装组件，下列情形，可以给任何元素组件添加进入/离开过渡
-v-if条件渲染
-v-show条件展示
-动态组件
-组件根节点