Vue事件的基本操作有哪些

小编给大家分享一下Vue事件的基本操作有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

1. 事件的基本操作

1.1 v-on

功能：绑定指定事件名的回调函数

标准写法：v-on:click='xxx'v-on:keyup='xxx(参数)'v-on:keyup.enter='xxx'简便写法：@click='xxx'@keyup='xxx'@keyup.enter='xxx'

1.1.1 v-on的小案例

 
                
欢迎来到{{name}}学习
                点击我进行学习（不传参）         点击我进行学习（传参）                                //如果需要传参数的话就在后面加（），里面写的就参数    
    

1.2 事件修饰符

 Vue中的事件修饰符有6个            - prevent : 阻止默认行为            - stop : 禁止冒泡            - once : 事件只触发一次            - capture : 使用事件捕获模式            - self : 只有even.target所指向的操作元素才能触发事件            - passive : 让事件的默认行为立即执行    
                点击我进入b站        
                
            点击我触发事件        
        
                我只能触发一次哦        
                
            div1            
                div2            
        
        
                
            点击我        
        
                
            
        
                            
            点击我进入        
    

1.2.1 事件修饰符代码解析

html代码

    
                点击我进入b站        
                
            点击我触发事件        
        
                我只能触发一次哦        
                
            div1            
                div2            
        
        
                
            点击我        
        
                
            
        
                            
            点击我进入        
    

js代码

1.3 键盘事件

常用的按键别名：                          1.正常使用      例如： @keyup.enter = "xxx"                                           - 回车   enter            - 删除   delete            - 退出   esc            - 空格   space            - 上     up            - 下     down            - 左     left            - 右     right       2. 特别的按键                             系统修饰键 :            - ctrl,shift,alt,meta(就是window键)            - 换行   tab(必须配合keydown去使用)            - 配合keyup使用，当按下修饰键的时候在按下其他的键，然后在松开其他键事件才可以被触发            - 配合keydown使用，就直接触发事件       3.如果想要绑定其他按键，可以使用按键原始本身的key值（名字）去绑定       4.可以自定义去设置按键别名，Vue.config.keyCodes.自定义键名 = 键值

具体案例

 
        
欢迎学习{{name}}
                

                

            
    

1.4 计算属性（computed）

1.在页面中的使用方法：=={{方法名}}==来显示计算结果

2.定义：要使用的属性/变量不存在，需要通过已有的属性计算出来的

3.原理：底层是借助了Object.defineProperty方法所提供的getter和setter

4.get函数执行的时机：

（1）初次读取的时候会执行一次

（2）当所依赖的数据发生改变时就会再次被调用

5.相比于methods的优势，内部是有缓存机制（复用），效率会更高，调试会更方便

6.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

7.需要注意的一个特殊点：以下面例子举例：get函数中return返回值的会作为fullname的值进行返回，在控制台可以看到是这样的形式呈现fullname：xxx。

8.computed中的this指向是vm

9.简写形式: 基本要求就是在不使用set的情况下才可以简写 注意在调用的时候不要写成fullname()

        姓:         

        名:                                                 
全名:{{fullname}}
    
    

1.5 监视属性（watch）

1.当所监视的属性发生变化时，回调函数自动调用，进行相关的操作

2.监视属性必须要存在，才能进行监视

3.监视属性的两种写法：

（1）在new Vue中配置watch

（2）通过vm.$watch进行监视

4.watch里handler函数this的指向是vm

        
今天天气真{{weather}}
        切换天气         
a的值是: {{a}}
                点击我让a+1    
    

以上是"Vue事件的基本操作有哪些"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！