Vue入门学习（二）

一、事件处理

基本用法

• 使用v-on:xxx或者@xxx绑定事件，xxx为事件名，例如click事件

• 事件的回调需要配置在methods对象中，最后会在vm上

• methods中配置的汉纳树，不要使用箭头函数，否则this就不是vm

• methods中配置函数，都是呗Vue所管理的函数，this指向vm或哲组件实例对象

• @click = "btn1"和@click = btn1($event)效果一样，但是后者可以传递参数

    
    
    
    
    


    

        
hello,{{name}}
        点我无参数
        

        点我无参数-简要写法
        

        
        点我有参数
    

    

二、事件修饰符

• prevent 阻止默认事件-常用

• stop 阻止事件冒泡

• once 事件只触发一次

• capture 使用事件的捕获模式，加上后，子容器的事件先触发父容器事件

• self 只有event.target是当前操作的元素时才触发事件，只有自己的事件才会触发，子容器的事件不会触发

• passive：事件的默认行为立即执行，无需等待事件的回调执行完毕

@scroll滚动条的滚动

@wheel鼠标中键的滚动

修饰符可以连续写，比如可以这么用，@click.prevent.stop即阻止事件冒泡，也阻止事件的默认行为。

 

    
    
    
    
    

    


    

        
hello,{{name}}

        
        点我无参数
        

        点我无参数-简要写法

        

        
        点我有参数
        
 
        
        
        
        
        a标签超链接
        
        

            阻止事件冒泡
        
        

        
        事件只发生一次

        
        
        

            div1
            

                div2
            
        
        
        
        

            点我
        
        
        

            
1
            
2
            
3
            
4
        
    
    

三、鼠标事件

键盘上的每个按键都有自己的名称和编码，例如Enter(12)，而Vue还对一些常用的按键起了别名方便使用。

常用的按键别名：

• 回车 enter

• 删除 delete捕获删除和退格键

• 退出 esc

• 空格 space

• 换行 tab 特殊，必须配合keydown去使用，因为自带切换光标的功能

• 上 up

• 下 down

• 左 left

• 右 right

vue未提供的别名的按键，可以使用按键原始的key值去绑定，但注意要转换：多单词小写，短横线写法

系统修饰键，CTRL 、alt 、shift、 meta(windows键)

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

Vue.config.keyCodes.自定义键名 = 键码 可以定制按键别名

如果需要组合键的事件时：@keyup.ctrl.y表示ctrl+y键生效