Vue学习计划--Vue2（三）methods和computed

Vue

1. 事件 v-on @

1. 基础

2. 使用 v-on:xxx或者@xxx绑定事件，其中xxx是事件名

3. 事件的回调需要配置在methods对象中，最终会在vm上

4. methods中配置函数，不要用箭头函数，否则this就不是vm了

5. methods中配置函数，都是被Vue管理的函数，this指向 vm 或者 组件实例对象

6. @click="demo"和@click=demo($event)效果一致，但是后者可以传参

7. 事件修饰符

8. prevent: 阻止默认事件（常用）

9. once: 事件只触发一次（常用）

10. stop: 阻止事件冒泡（常用）

11. capture: 使用事件的捕获模式 --> 给父级加

12. self: 只有event.target是当前操作的元素时才触发事件

13. passtive: 事件的默认行为立即执行，无需要等待事件回调执行完毕

14. @click.stop.prevent = 可以链式写法

注意：

1. .self和.stop 都可以阻止事件冒泡，有什么区别呢？

   1. .stop 是阻止事件向外继续冒泡，当你给了子级.stop后他的父级就不会冒泡;
   2. .self 是我只让自己不冒泡，其他人我不管

    
      
   
          
   self阻止冒泡
     
      
   
         
   stop阻止冒泡
      
   
   

案例：

    

        
        跳转
        

        
        {{ count }}
        add
        

        
        

            
冒泡事件
            
冒泡事件vue之前
        
        

        
        

            

                
捕获模式
            
        
       
        

        
        

            
self
        
        

        
        
        
 
            

                
self阻止冒泡
            
            

                
stop阻止冒泡
            
        
        

        
       
        
        

            链式写法
        
    
    

3. 键盘事件 @keyup @keydown

vue之前键盘事件：
@keyup = "show"
methods:{
show(e){
    if(e.keyCode !== 13) return
    console.log(e.target.value)
}
}

1. Vue中常见的按键别名：

    回车 => enter
    删除 => delete
    退出 => esc
    空格 => space
    换行 => tab (配合keydown使用)
    上 => up
    下 => down
    左 => left
    右 => right

2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但要注意转为kebeb-case(短横线命名)
3. 系统修饰键(用法特殊)： shift, ctrl, alt, meta(win)

   1. 配合keyup使用，按下修饰键的同时，再按下其他的键，随后释放其他键，事件才会被触发

      @keyup.ctrl | @keyup.ctrl.y 可以链式

   2. 配合keydown使用，正常触发事件

4. 也可以使用keyCode去指定具体的按键（不推荐,被淘汰）
   
5. Vue.config.keyCode.自定义键名 = 键码，可以去定制按键别名(不推荐)

    
    Vue.config.keyCodes.huiche = 13

案例：

2. 计算属性(computed)

0. 引入： 姓名案例， 模板语法：vue官网风格指南=> 模板中简单表达式
1. 定义：要用的属性不存在，要通过已有 的属性计算得来
2. 原理： 利用Object.defineProperty方法提供的getter和setter
3. get函数什么时候执行？

   1. 初次读取时会执行一次
   2. 当依赖的数据发生改变时会被再次调用

4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
5. 备注：
   1. 计算属性最终会出现在vm上，直接读取使用即可
   2. 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算属性依赖的数据发生变化

const vm = new Vue({
el: '#APP',
data:{
    firstName: '张'，
    lastName: '三'
}，
computed:{
    // 1. 完整写法
    fullName:{
        // get有什么作用？当有人读取fullName时，get就会被调用，且返回值就是fullName的值
        // 计算属性有缓存
        // get什么时候被调用？ 1. 初次读取数据会执行一次  2. 当依赖的数据发生改变时会被再次调用
        get(){
            console.log('get被调用了')
            console.log(this) // this指向vm
            return this.firstName + '-' + lastName
        },
        // set有什么作用？ 当每次修改fullName时，就会调用set
        set(value){
            const arr = value.split('-')
            // 计算属性是依赖 firstName，lastName计算出来的，改变fullName需要把依赖的数据改变
            this.firstName = arr[0]
            this.lastName = arr[1]
            }
        },
        // 2. 简写， 
        // 确定只是读取，不对fullName做修改，可以简写
        // fullName就是计算属性的名称
        fullName(){
            return this.firstName + '-' + this,lastName
        }
    }
})