Vue | 09.本地应用 - v-on指令

1.概述

• v-on指令的作用是：为元素绑定事件
• 事件名不需要写on
• 指令也可以简写为==@==
• 绑定的函数定义在methods属性当中

2.为元素绑定事件

先定义Vue实例

new Vue({
    //挂载到id名为app的元素
    el: "#app",
    
    methods: {
        //定义方法
        方法名:function(){
            //...code here
        }
    }
    
})

随后为被挂载的元素添加属性，格式如下：

<div>
    <input type="button" value="按钮文本" v-on:事件名="方法名">
    <input type="button" value="按钮文本" v-on:click="方法名">
    <input type="button" value="按钮文本" v-on:dbclick="方法名">
    <!--"v-on:"可以被替换为"@"-->
    <input type="button" value="按钮文本" @dbclick="方法名">
</div>

3.常用的事件名

转自Vue v-on常用事件名 - 持续更新

事件名	触发条件
keydown	按下任意按键
keypress	除 Shift、Fn、CapsLock 外的任意键被按住（连续触发）
keyup	释放任意按键
click	在元素上 按下并释放任意鼠标按键
auxclick	已在元素上按下并释放指针设备按钮（任何非主按钮）
contextmenu	右键点击（在右键菜单显示前触发）
dblclick	在元素上双击鼠标按钮。
mousedown	在元素上按下任意鼠标按钮。
mouseenter	指针移到有事件监听的元素内。
mouseleave	指针移出元素范围外（不冒泡）。
mousemove	指针在元素内移动时持续触发。
mouseover	指针移到有事件监听的元素或者它的子元素内。
mouseout	指针移出元素，或者移到它的子元素上。
mouseup	在元素上释放任意鼠标按键。
pointerlockchange	鼠标被锁定或者解除锁定发生时。
pointerlockerror	可能因为一些技术的原因鼠标锁定被禁止时。
select	有文本被选中。
wheel	滚轮向任意方向滚动
focus	元素获得焦点（不会冒泡）
blur	元素失去焦点（不会冒泡）
resize	文档视图已调整大小
scroll	文档视图或元素已滚动
cut	已经剪贴选中的文本内容并且复制到了剪贴板
copy	已经把选中的文本内容复制到了剪贴板
paste	从剪贴板复制的文本内容被粘贴
reset	点击重置按钮时
submit	点击提交按钮
close	好像是关于窗口的,感觉有用,用到时在补充功能

4.实践

4.1.基础实践：单击按钮后弹窗

先创建Vue实例

为被挂载的元素添加v-on:...属性(或者@属性)

4.2.进阶实践1：修改另一Vue对象的属性

如上，有一个引用名为textVue的Vue实例，通过v-text指令赋值

现在希望使用v-on修改这个值，则可以这么做：

如上，操作textVue的text属性(不用写中间的data)修改即可！

4.3.进阶实践2：传参

传参又分为三种情况：

• 传入自定义参数，不传event

  • 括号内先定义好形参

  • 

  • v-on属性值中，传入参数

    

• 不传自定义参数，传入event

  • 同样，括号内先定义好形参

    

  • v-on中传入的参数写==$event==

    

• 自定义参数和event都需要

  • 其实就是上述两种情况的总和

  • 

  •