DOVE-----Vue.js框架入门（四）

第二周学习内容整理（7.15-7.16）

常用特性

2、自定义指令

• 为何需要自定义指令：内置指令不满足要求
• 自定义指令的语法规则（获取元素焦点）

Vue.directive('foucs'{
  inserted: function(el) {
    //获取元素的焦点
    el.foucs();
    }
    })

• 自定义指令用法

"text" v-foucs>

• 带参数的自定义指令（改变元素背景色）

Vue.directive('coler',{
  inserted: function(el, binding) {
    el.style.backgroundColor = binding.value.color;
    }
    })

• 指令的用法

"text" v-color='(color:"orange")'>

• 局部指令

directives: {
  foucs:{
   //指令的定义
   inserted: function(el) {
    el.foucs();
    }
   }
  }

3、计算属性

• 为何需要计算属性：表达式的计算逻辑可能会比较复杂，使用计算属性可以继续使模板内容更加整洁
• 计算属性的用法

computer:  {
  reversedMessage: function () {
    return this.msg.split('').reverse().join('')
   }
 }

• 计算属性与方法的区别
  （1） 计算属性是基于他们的依赖进行缓存的
  （2）方法不存在缓存

4、侦听器

• 侦听器的应用背景：数据变化时执行异步或开销较大的操作
• 侦听器的用法

watch: {
  firstName: function(val){
    //val表示变化之后的值
    this.fullName = val + this.lastName;
  },
  lastName: function(val){
    this.fullName = this.firstName + val;
  }
}

5、过滤器

• 过滤器的作用：格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等
• 自定义过滤器

Vue.filter( '过滤名称' , function(value){
  //过滤器业务逻辑
  })

• 过滤器的使用

{{msg | upper}}
{{msg | upper | lower}}
v-bind:id=“id | formatId">

• 局部过滤器

filters:{
  capitalize: function(){}
}

• 带参数的过滤器

Vue.filter( 'format' , function(value, argl){
  //value就是过滤器传递过来的参数
  })

• 过滤器的使用

{{date | format('yyy-MM-dd')}}