Vue【二】_vue光标离开事件

作者：IT小白 | 2024-02-19 12:15:27

踩

vue光标离开事件

5)绑定事件v-on

1.概述:
  使用vue框架,如果想在指定的标签上加上事件,并绑定vue中编写的函数,就需要使用  v-on指令,就不用像写js那样直接写事件名了

2.语法:
  v-on:事件名 = "要绑定的vue中的函数名"
  
  简化:
  @事件名 = "要绑定的vue中的函数名"
      
3.细节问题:
  a.使用vue给标签设置事件,事件名和js中学的事件名一样,只需要将js中的事件名的on去掉
    比如:  js中单击事件  ->  onclick
          vue中单击事件  ->  click
        
  b.事件绑定的函数需要在vue中的methods里面写
  c.事件调用函数时,函数后面的小括号写不写都行(除非需要传参)
        
4.methods中的函数写法:
  函数名:function(){
  
  }
  
  或者

  函数名(){
  
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

1). <button v-on:click="num++">增加1</button>   绑定点击事件
2).<button @click="num++">增加1</button>		   简化写法
3).<button @click="addNum">增加1</button

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue事件绑定v-on</title>

</head>
<body>
    <div id="app">
        {{num}}
        
	1. 如果是复杂计算建议使用function函数进行定义.获取属性时 使用this关键字.

   	2. 如果是简单的计算.则可以通过@click="计算操作" 该操作可以直接获取vue.js中的属性.  无需添加this关键字.
    
        <button v-on:click="num++">+</button>
        <button @click="num++">增加</button>
        <button @click="addNum">增加1</button>

        {{num}}
        <button v-on:click="num--">-</button>
    </div>
</body>
    <script src="js/vue.js"></script>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                num:0
            },
            methods:{
                addNum(){
                    this.num++
                }
            }
        });
    </script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

6)事件修饰符

事件冒泡

1.什么是事件冒泡:
  比如:点击内层div,会将内层div要触发的事件传递到外层div中;也就是说,点击内层div绑定的事件,外层div绑定的事件也触发了
      
2.正常逻辑:
  点击内层div,只触发内层div绑定的事件;点击外层div,只触发外层div绑定的事件
1
2
3
4
5

1.阻止事件冒泡

<button @click.stop="num++">自增</button>
1

2.阻止默认行为

@click.prevent="函数名称"

或者是js自带的:event.preventDefault(),阻止默认的行为

需求:
	在form表单的actioin中或者a标签的href中,不想让其直接跳转,需要对其进行去其他的业务操作,要用到prevent
	如注册页面中的action,我们需要先对输入的信息进行处理(验证是否存在或是否为空)时,如果验证成功则再跳转,否则就不能用跳转.
1
2
3
4
5
6
7

7)常用事件介绍

1)change事件:数据进行修改后离焦时触发(如在输入框中使用,输入值后,鼠标离开输入框外事件触发,多结合正则验证使用)

@change=“函数”

2)blur事件:不需要进行修改,离焦事件触发

@blur=“函数”

<!--按键修饰符:  敲击指定的按键触发事件
            v-on:keyup :  按键弹起来有效.  使用更加频繁
            v-on:keydown: 按键按下去有效.
            .enter
            .tab
            .delete (捕获“删除”和“退格”键)
            .esc
            .space
            .up
            .down
            .left
            .right
        -->
1
2
3
4
5
6
7
8
9
10
11
12
13

如以下是使用正则验证用户名

<label>用户名称:</label>
<input type="text" placeholder="请输入用户名" name="username" v-model="user.username" @change="checkUser"  />
--------------------
data:{
checkUser(){
          let reg=/^[a-z0-9]{6,16}$/i;
          if(reg.test(this.user.username)){
            this.msg.userMsg="√";
            this.flag[0]=1;
          }else{
            this.msg.userMsg="用户名应为6~16位数字和字母组成";
            this.flag[0]=0;
          }
        },
   }           
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

知识点:

1.但凡用户可以输入的位置 记得使用双向数据绑定
2.如果要求用户输入的只有数值类型 则建议type="number"
3.默认条件下 input框中的数据 当作是字符串类型. 如果需要当作number则需要转化.
      3.1 eval("字符串")  该函数是JS原始提供的 将字符串转化为number类型
      3.2 parseInt(this.numA) 该函数 是JS后期提供的.  二选一即可
        4.如果页面中某些元素 需要"扩展" 可以进行样式修饰/js的操作/干预 最小的标签 使用span
      5.在进行算术计算时,只有加法操作 可能会进行字符串拼接. 其它操作都按照number类型处理
1
2
3
4
5
6
7

Vue【二】_vue光标离开事件

5)绑定事件v-on

6)事件修饰符

1.阻止事件冒泡

2.阻止默认行为

7)常用事件介绍

属性绑定声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/114643

属性绑定
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/114643