Vue事件的基本操作你知道吗

目录

• 1.事件的基本操作
• 1.1v-on
• 1.1.1v-on的小案例
• 1.2事件修饰符
• 1.2.1事件修饰符代码解析
• 1.3键盘事件
• 1.4计算属性（computed）
• 1.5监视属性（watch）
• 1.5.1watch和computed的区别
• 总结

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一些基本事件的操作，希望对大家有帮助！