14. VUE - 详解 v-on

v-on 就是事件监听

之前用过 ，复习一下：

v-on介绍
作用：绑定事件监听器

缩写：@

预期：Function | Inline Statement | Object  分别对应 ：  方法、表达式、对象

参数：event

 

用法就不多说了 直接就:  v-on:click="xxxx语句" 或 @click="xxxx语句".  前者是完整写法  后者是 语法糖写法

具体是什么事件 你自己改即可

 

 

v-on 的 传参 【参数】 重要

1. 有参 和 无参的区别

<div class="app">
    <button @click="add()">按钮1</button>

</div>

<script>
    const  app = new Vue({
        el:".app",
        data:{
            i:0
        },
        methods:{
            add(){
                this.i++;
                console.log(this.i);
            }
        }
    })
</script>

这是个正常例子，说明点击一下 i就++，然后打印出来，很明显add是无参的，那么无参的方法，刁调用的时候 不用加括号也是可以的. 这很容易懂：

<div class="app">
<!--  原来：  <button @click="add()">按钮1</button> 改变：-->
    <button @click="add">按钮1</button>
</div>

 

那么如果 我add有参，你调用的时候 我不给参数 而且 不加括号 会出现什么：

<div class="app">
    <button @click="add">按钮1</button>   <!--add这个方法 是有参数的哦 我不给参数 而且 不加括号-->
</div>

<script>
    const  app = new Vue({
        el:".app",
        methods:{
            add(x){
                console.log(x); //打印x 看些不给参数 看下给的参是什么
            }
        }
    })
</script>

打印出来的是 点击方法的 even ，所以呢 我们学过原生的JS 也知道 even完全可以用this 传进来 但我们这里讲VUE的： ，Vue中的 v-on ：

当你方法有参数的时候，你直接写 键名 是直接默认把 even 当参数传递进去的。【这里的 键名 是指 ES6新写法 的内个 键名 并不是方法名哦】

 

问题来了： 如果有两个以上参数 那么我们想要一个even  但我们怎么知道谁是even？

代码:

<div class="app">
    <button @click="add">按钮1</button>   <!--add这个方法 是有参数的哦 我不给参数 而且 不加括号-->
</div>

<script>
    const  app = new Vue({
        el:".app",
        methods:{
            add(x,y){
                console.log(x); //打印x
                console.log(y); //打印y
            }
        }
    })
</script>

打印的是 x 是 even ，y 是 undefined ，所以如果存在多个参数，但你直接给个键名的话，那么他永远都会往第一个参数里面填充even，

如果我们实在是想让even 指定赋给 某个参数 我们可以这样：

如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

代码：

<div class="app">
    <button @click="add(x,$event,z)">按钮1</button>   <!--这里even 想赋给 y-->
</div>

<script>
    const  app = new Vue({
        el:".app",
        data:{
          x:1,
          z:2
        },
        methods:{
            add(x,y,z){
                console.log(x); //打印x
                console.log(y); //打印even
                console.log(z); //打印z
            }
        }
    })
</script>

所以 even 就成功赋给 y 了，这里注意啊  当你参数没加双引号，那么vue直接当变量找，没找到就报错了。

 

所以呢 参数就说打这里

 

修饰符

什么是修饰符：

在某些情况下，我们拿到event的目的可能是进行 一些事件处理，Vue提供了修饰符来帮助我们方便的处理一些事件：【更方便！！！！！！】

 

 

.stop - 调用 event.stopPropagation()。

.prevent - 调用 event.preventDefault()。

.{keyCode | keyAlias} - 只当事件是从特定键 触发时才触发回调。

.native - 监听组件根元素的原生事件。

.once - 只触发一次回调。

 

第一个： 很熟悉哦 其实就是阻止冒泡事件啊：

<div class="app">
    <div style="color: red" @click="outs()">
        外面
        <button @click.stop="ins()">         <!--如果你不加 .stop 修饰符 点击按钮会冒泡的-->
            里面
        </button>
    </div>
</div>

<script>
    const app = new Vue({
        el:".app",
        methods:{
            outs(){alert("外面")},
            ins(){alert("里面")}
        }
    })
</script>

 

第二个：很熟悉哦 其实就是阻止组件的默认事件啊： 但阻止那个事件的 你需要自己定义，下面阻止 点击 这个事件的 默认属性：

<div class="app">
    <form action="xxx">
        <input @click.prevent="clicks()"  type="submit">       <!--点击的默认事件是 提交  那么我们阻止掉-->
    </form>
</div>

<script>
    const app = new Vue({
        el:".app",
        methods:{
            clicks(){alert("阻止了input的默认事件 我自己收集数据")},
        }
    })
</script>

 

 

第三个:   .{keyCode | keyAlias} - 只当事件是从特定键 触发时才触发回调。

这个的意思是监视你的键盘 比如 keyup 事件  是用户按下键盘后弹起的事件  那么你就可以通过这个修饰符去修饰你想也已监听特定的键： 他可以是键代码 也可以是 VUE定义好的键变量：

例如： 我按下回车键 后想触发语句：

<script src="js/vue.js"></script>
<div  class = "app">
  <!--这里还可以是键代码  你喜欢了-->
<textarea @keyup.enter="tips()">
  你尝试按下回车键 会触发我的事件！！
</textarea>
</div>


<script>

const app = new Vue({
  el:".app",
  methods:{
    tips(){
      alert("你按下了 回车键！！！")
    }
  }
})
</script>

 

 

 

 

 

第四个：这个要自定义组件才能实现 这里暂缺

暂缺

 

第五个： 这玩意就是说 只触发一次 事件。以后都不触发了 ，JQ也有这个方法的：

<div class="app">
    <button @click.once="clicks()">v-on 的 once</button>
</div>

<script>
    const app = new Vue({
        el:".app",
        methods:{
            clicks(){alert("只会触发我一次 第二次第三次第xxx次不会执行我")},
        }
    })
</script>

 

完.