Vue中的v-on

最新推荐文章于 2024-05-10 18:15:56 发布

IT行星

最新推荐文章于 2024-05-10 18:15:56 发布

阅读量5.1k

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_72694993/article/details/126712244

版权

一、v-on（点击事件）基本用法

1.v-on的基本用法v-on:click="函数名字" 值得注意的是这里的函数需要在Vue中的methods下写入；即如下代码例子中的fn;

<div id="app">
   
       <button v-on:click="fn()">click</button>   
       <div v-for="(val,index) in arr">{{val}}--{{index}}</div>  

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
             arr:["a","b","c"],
            },
            methods: {
                fn(){
            //  console.log(this);
                this.arr.push(Math.random());
                },
            },
        });
    </script>

通过点击button触发函数fn；vue直接操作data的数据，不是操作dom。

2.@:click="函数名字"是v-on:click的简写模式，效果和用法是一样的；

3.我们像下边这么调用也是可以的，只是唯一的却别在于是否有参数需要传入下边的方式并不能传入参数；区别在于v-on后边的函数名字后没有参数

 <div id="app">
   
       <button v-on:click="fn">click</button>   
       <div v-for="(val,index) in arr">{{val}}--{{index}}</div>  

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
             arr:["a","b","c"],
            },
            methods: {
                fn(){
            //  console.log(this);
            this.arr.push(Math.random());
                },
            },
        });
    </script>

4.我们可以在原有代码上新增一个功能进行删除，可以明显地看出删除的按钮需要在括号里把参数传递进去。

  <div id="app">
   
       <button v-on:click="fn">click</button>   
       <div v-for="(val,index) in arr">
        {{val}}--{{index}}
        <button @click="del(index)">删除</button>
       </div>  

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
             arr:["a","b","c"],
            },
            methods: {
                fn(){
            //  console.log(this);
            this.arr.push(Math.random());
                },
                del(number){
                 this.arr.splice(number,1);
                }
            },
        });
    </script>

二、v-on的晋升（关于事件冒泡）

当我们在做项目的时候我们很容易出现下边的情况（可以直接复制代码去运行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            background-color: pink;
            width: 300px;
            height: 300px;
        }
        .div2{
            background-color: blue;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div id="app">
   
      <div class="div1" @click="text1()">
        <div class="div2" @click="text2()"></div>
      </div>
         

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
             
            },
            methods: {
                text1(){
                    console.log("text1被摸了");
                },
                text2(){
                    console.log("text2被碰了");
                }
            },
        });
    </script>
    
</body>
</html>

运行之后会出现如图所示的页面

当我们点击红色区域的时候和我们预期效果一样控制台输出了text1的输出；

当我们点击蓝色区域会发现他输出了两个；如图所示；

并不是我们预期的效果，这个现象也叫做事件冒泡；

1.我们解决这个事件冒泡的第一种方法是通过在event(事件)下的stopPropagation()方法,值得注意的是我们是点击text2区域才出现这种情况的，所以我们应该阻止text2冒泡，应该在text2方法下加入改代码；即

      text2(){
                    console.log("text2被碰了");
                    event.stopPropagation();
                }

2.可以用vue中的方法进行阻止，在需要被阻止冒泡标签v-on后边加上.stop即

  <div id="app">
   
      <div class="div1" @click="text1()">
        <div class="div2" @click.stop="text2()"></div>
      </div>
         

    </div>

三、键盘事件的绑定

1.通过keyup进行绑定键盘事件，只要在输出一直调用绑定的事件函数，如下边代码的例子

 <div id="app">
   
      <input type="text" @keyup="text1()">
         

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
             
            },
            methods: {
                text1(){
                    console.log("text1被摸了");
                },
            },
        });
    </script>

2.我们在事件绑定的函数直接就可以调用event下的方法（例如event.keyCode等）

3.当我们在@keyup后边加上.enter的时候，即@keyup.enter=""，只有再点击回车的时候才会执行绑定的函数，也可以用enter的键盘码即用@keyup.81和enter效果相同

IT行星

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue中的v-on

1.我们解决这个事件冒泡的第一种方法是通过在event(事件)下的stopPropagation()方法,值得注意的是我们是点击text2区域才出现这种情况的，所以我们应该阻止text2冒泡，应该在text2方法下加入改代码；3.当我们在@keyup后边加上.enter的时候，即@keyup.enter=""，只有再点击回车的时候才会执行绑定的函数，也可以用enter的键盘码即用@keyup.81和enter效果相同。2.@:click="函数名字"是v-on:click的简写模式，效果和用法是一样的；
复制链接

扫一扫