Vue 框架-02-事件：点击, 双击事件,鼠标移上事件

最新推荐文章于 2024-08-23 17:50:13 发布
最新推荐文章于 2024-08-23 17:50:13 发布
阅读量243 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/xpwi/p/9923290.html
版权

Vue 框架-02-事件：点击, 双击事件,鼠标移上事件

1.单击事件：v-on:click

20181107153425544.gif

源码 app2.js ：

//实例化 vue 对象
new Vue({
    //注意代码格式
    
    //el：element 需要获取的元素，一定是 html 中的根容器元素
    el:"#vue-app",
    data:{
        name:"肖朋伟",
        age:18
        
    },
    //存储自己的方法
    methods:{
        reduce: function(){
            this.age--;
        }
    }
});

源码 html ：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>事件</title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="vue-app">
            
            <!--name 具体的值是在 js 中定义的-->
            <h2>我今年 {{age}} 岁了！</h2>
            <br />
            方法一：直接在页面上进行自增<hr />
            <button v-on:click="age++">加一岁</button>
            <br /><br />
            方法二：在 js 中实现减一岁
            <br /><hr />
            <button v-on:click="reduce">减一岁</button>
            
        </div>
        
        <!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->
        <script type="text/javascript" src="js/app2.js" ></script>
    </body>
</html>

2.双击事件：v-on:dblclick

双击事件：只有双击的时候，在 js 中实现减一岁
<br /><hr />
            
<button v-on:dblclick="reduce">双击减一岁</button>

3.传递参数

app2.js：

//实例化 vue 对象
new Vue({
    //注意代码格式
    
    //el：element 需要获取的元素，一定是 html 中的根容器元素
    el:"#vue-app",
    data:{
        name:"肖朋伟",
        age:18
        
    },
    //存储自己的方法
    methods:{
        reduce: function(){
            this.age--;
        },
        reduce2: function(year){
            this.age = this.age-year;
        },
        
    }
});

html ：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>事件</title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="vue-app">
            
            <!--name 具体的值是在 js 中定义的-->
            <h2>我今年 {{age}} 岁了！</h2>
            <br />
            方法一：直接在页面上进行自增<hr />
            <button v-on:click="age++">加一岁</button>
            <br /><br />
            方法二：在 js 中实现减一岁
            <br /><hr />
            <button v-on:click="reduce">减一岁</button>
            <br /><br />
            双击事件：只有双击的时候，在 js 中实现减一岁
            <br /><hr />
            
            <button v-on:dblclick="reduce">双击减一岁</button>
            <button v-on:click="reduce2(10)">减10岁</button>
            <br />
            

            
        </div>
        
        <!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->
        <script type="text/javascript" src="js/app2.js" ></script>
    </body>
</html>

4.鼠标移上事件：显示鼠标位置

在这里插入图片描述

app2.js ：

//实例化 vue 对象
new Vue({
    //注意代码格式
    
    //el：element 需要获取的元素，一定是 html 中的根容器元素
    el:"#vue-app",
    data:{
        x:0,
        y:0,
        
    },
    //存储自己的方法
    methods:{
        showXY:function(event){
            this.x = event.offsetX;
            this.y = event.offsetY;
            
        }
    }
});

html :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>事件</title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="vue-app">
            <br />
            
            鼠标移上事件
            <hr />
            <div id="canvas" v-on:mousemove="showXY" style="border: 1px solid #eeaaaa;height: 200px;width: 300px;text-align: center;">
                当前鼠标位置（相对该div左上角）：<br> x:{{x}},y:{{y}}
            </div>
            
        </div>
        
        <!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->
        <script type="text/javascript" src="js/app2.js" ></script>
    </body>
</html>

提示：

html 中的

v-on:

可以直接用一个 @ 代替，例如：

<button @click="reduce">减一岁</button>

转载于:https://www.cnblogs.com/xpwi/p/9923290.html

san.hang
关注
vue实现鼠标移入移出事件代码实例
10-17
主要介绍了vue实现鼠标移入移出事件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解vue中v-on事件监听指令的基本用法
10-15
Vue.js 是一款流行的前端JavaScript框架，它提供了许多方便的特性，包括`v-on`事件监听指令，用于处理用户交互。本文将深入解析`v-on`的基本用法，并通过实例演示如何在Vue应用中有效地监听和响应用户事件。 一、...
vue2鼠标事件
zk_tww的博客
08-06 243
mouseover 在鼠标指针进入被选元素或任意子元素时都会被触发事件；mouseout不论鼠标指针离开被选元素还是任何子元素，都会触发事件；mouseleave只有在鼠标指针离开被选元素时，才会触发事件，mouseenter 只有在鼠标指针进入被选元素时被触发事件，
vue2 js实现鼠标移入dom显示弹窗，并随鼠标移动位置
最新发布
PepsiElek的博客
08-23 128
【代码】vue2 js实现鼠标移入dom显示弹窗，并随鼠标移动位置。
vue设置鼠标点击事件和鼠标移入事件
qq_54731568的博客
02-06 1589
vue设置鼠标点击事件和鼠标移入事件
vue2：鼠标触发各类事件
weixin_1095的博客
01-12 1854
当鼠标移动时，如何计算得出，当前鼠标位置与上一次鼠标位置的差值呢？这就要利用事件回调中的。
vue v-on监听事件详解
10-19
常见的事件包括点击（click）、双击（dblclick）、鼠标移动（mousemove）、键盘按键（keydown）等等。v-on可以简写为@符号。 首先，我们来看一个简单的例子，这个例子展示了如何使用v-on来监听一个按钮的点击事件，...
Cesium 中 实体类entity多种实例对象-实现点击事件
06-04
- 如果你使用Vue框架，可以将Cesium集成到项目中，通过Vue的生命周期钩子初始化Cesium Viewer，并在组件中响应点击事件。 ``` <div ref="cesiumContainer"></div> import Cesium from "cesium"; export...
vue的事件绑定与方法详解
08-29
事件绑定是指将一个事件与一个方法绑定在一起，例如点击事件、双击事件、鼠标悬停事件等等，而方法是指在 Vue 实例中定义的一些函数，以便在特定的事件发生时执行这些函数。 一、事件绑定 在 Vue 中，事件绑定是...
详解Vue3中的鼠标事件mousemove、mouseover和mouseout
一起学习
01-01 1万+
本文主要介绍Vue3中的常见鼠标事件mousemove、mouseover和mouseout。
vue之canvas拖动元素
12-28
vue之canvas拖动元素 支持选中，置顶，支持以鼠标点前点拖动
vue2手动封装一个双击事件
qiaozhilian的博客
10-19 410
vue2手动封装一个双击事件。
vue.js点击事件方法的使用（click）
热门推荐
weixin_45932157的博客
02-26 2万+
定义vue.js: <script src="../js/vue.min.js"> </script> 也可以使用网上的： <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 都可以。 定义方法： let vm=new Vue({ ...
Vue.js基础-07-绑定事件（v-on）-01-点击事件（click）
运维玄德公
05-31 6342
1. 点击事件参数（click） 1.1 基本使用 1.2 绑定一个方法 1.3 冒泡事件 说明 示例 2. 点击事件修饰符 2.1 .stop （阻止冒泡） 使用说明 使用示例 2.2 capture （捕获冒泡） 使用说明 使用示例 2.3 .self （只监听触发该元素的事件） 使用说明 使用示例 2.4 once （事件只触发一次） 使用说明 使用示例 2.5 鼠标的修饰符......
vue 点击事件
cjwcjwwjcwjc的博客
04-10 1129
编写vue @click绑定事件的时候，紧记不能把方法的名字设置成为export 否则会出现莫名的空白页。。。。。
vue中如何点击事件，获取该点击元素
子玉的博客
03-20 754
在上面的示例中，我们在``元素上添加了一个点击事件处理程序`@click="handleClick"`，当这个``元素被点击时，`handleClick`方法会被调用，并且传入一个事件对象`event`。通过`event.target`可以获取到被点击的元素。在Vue中，你可以通过事件处理程序（event handler）来监听点击事件，并通过事件对象（event object）获取点击的元素。
vue鼠标事件归纳
qq_46100747的博客
09-19 1774
【代码】vue鼠标事件归纳。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值