vue2详解

事件修饰符

常用的事件修饰符

• prevent：阻止默认事件
• stop：阻止事件冒泡
• once：事件只触发一次
• capture：使用事件捕获模式
• self：只有event.target是当前操作的元素才触发事件
• passive：事件的默认行为立即执行，无需等待事件回调执行完毕

// 使用事件修饰符stop
<button @click.stop='handle'>点击</button>

键盘事件

• enter：回车
• delete：删除
• esc：退出
• space：空格
• tab：换行（特殊,必须配合 keydown 去使用）
• up：上
• down：下
• left：左
• right：右

// 使用键盘事件
<input type="text" name="" id="" @keyup.enter="showInfo">

methods:{
  showInfo(){
   console.log('回车事件触发了');
  }
}

计算属性

计算属性主要用到 computed，有完整写法和简写形式
举例计算商品打折后的价格

//可以直接在{{}}做运算，但使用计算属性更佳
<div>总价：{{price / discount}}</div>
//计算属性
<div>总价：{{fullPrice}}</div>
data：{
  price:100,
  discount:3
},
computed:{
  fullPrice:{
     //当有人读区fullPrice时，get就是被调用，且返回值就作为为fullPrice的值
     get(){
       console.log('get触发了')
       return this.price / this.discount
     },
     //计算属性修改时触发
     set(value){
       console.log('set触发了')
     }
  }，
  //简写形式前提确认计算值不会被修改
  fullPrice(){
    return this.price / this.discount
  }
}

监听属性

监听属性 watch 用来响应数据的变化，需要在数据变化时执行异步或开销较大的操作时使用。

data:{
    isHot:true,
    number:{
        a:1,
        b:2
    },
},
watch:{
  //监听isHot,完整写法
  isHot:{
    handler(newvalue,oldvalue){
      console.log('isHot被修改了,newvalue,oldvalue')
    }
  },
  //简写
  isHot(newvalue,oldvalue){
    console.log('isHot被修改了,newvalue,oldvalue')
  },
  //监听多级结构某个属性number.a
  'number.a':{
        handler(newval,oldval){
        console.log('新',newval,'旧',oldval);
        }
   },
       // 监听完整写法
    number:{
        // 初始化时让handler 调用一次
        immediate:true, 
        // deep:true 深度监听
        deep:true,
        handler(newval,oldval){
            console.log('新111',newval,'旧222',oldval);
            }
    }
}

动态绑定class之动态添加class

对象形式

<div :class="{'active':isActive}"></div>
//或者
<div :class="{'active':isActive, 'active2':isActive2}"></div>

类名 active 依赖于数据 isActive ,当其为 true 时候，div 会拥有类名 active；为false时则不再拥有 active 类名

判断是否绑定active

<div :class="{'active':index == 1}"></div>

对象形式(判断绑定多个)

//直接逗号分隔
<div :class="{'active':isActive,'hot',isHot}"></div>
//或者把数据放到data
<div :class="allClass"></div>
data(){
  return:{
    allClass:{
       active:true,
       hot:false
    }
  }
}

数组形式

<div :class="[isActive,isHot]"></div>

data(){
  return:{
    isActive:'active',
    isHot:'hot'
  }
}

数组结合 三元运算 综合判断需要的class

<div :class="[isActive?'active':'']"></div>
//或者
<div :class="[isActive?'active':'hot']"></div>
//或者
<div :class="[isActive == 1?'active':'hot']"></div>

三目运算符

<div :class="isActive?'active':''"></div>
//或者
<div :class="isActive?'active':'hot'"></div>
//或者
<div :class="isActive == 1?'active':'hot'"></div>

使用switch进行多个条件判断

<div :class="allClass(1)">动态绑定样式</div>
    methods: {
        allClass(index) {
            let className = ''
            switch (index) {
                case 1:
                    className = 'isActive'
                    break;
                case 2:
                    className = 'isHot'
                    break;
            }
            return className;
        }
    },

style样式绑定之动态添加style

注意:
1、凡是有 - 的style属性名都要变成驼峰式，比如font-size要变成fontSize。
2、除了绑定值，其他的属性名的值要用引号括起来，比如fontSize:'14px’而不是 fontSize:14px。

对象形式

<div :style="{ color: '#333', fontSize: '14px' }"></div>

数组形式

<div :style="[isRadio,isBlack]"></div>

data(){
  return:{
    isRadio:{
       border:'1px solid red'
    },
    isBlack:{
       background:'#000000'
    }
  }
}

三目运算符形式

<div :style="{background:index===0 ? '#FFFFFF' : '#000000'}"></div>

<div :style="[{color:index==0 ?'#333':'#000'},{fontSize:'14px'}]"></div>