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

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

源码 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

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

js 隔行变色+鼠标移上换色+鼠标离开颜色恢复+鼠标点击弹出点击的是第几行是什么颜色
隔行变色: 先获取要操作的HTML标签 var oLis = document.querySelectorAll('li') 循环HTML标签 for (var i = 0; i < oLis. ...
jquery 点击事件点击元素添加和移除class
jquery 点击事件点击元素添加和移除class 怎么实现点击一个元素给它添加class,再点击一个元素移除上一个元素的class,再给现在点击的元素添加class <div class=&q ...
鼠标移开事件（onmouseout）
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
基于vue框架下使用Element-UI获取文件MD5值并上传
基于vue框架下使用Element-UI获取文件MD5值并上传使用插件: spark-md5 .vue页面 <el-uploadclass="avatar-uploader idca ...
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
鼠标滚轮事件java_JavaScript 事件——“事件类型”中“焦点、鼠标和滚轮事件”的注意要点...
焦点事件一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合.主要有: blur:元素失去焦点,不会冒泡: DOMFocusIn:同HT ...
js事件详解二：鼠标和滚轮事件
概述鼠标事件是web开发中最常用的一类事件,毕竟鼠标还是最主要的定位设备.在DOM3级事件中定义了9个鼠标事件,分别是:click,dbclick,mousedown,mouseenter,mous ...
html5鼠标事件监听,HTML5 Canvas鼠标与键盘事件
演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件通过键盘控制Canvas上对象移动. Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(Mo ...
鼠标悬浮鼠标移上移出事件时改变背景颜色
效果首先给一个 class="liStyle" <li class="liStyle" @mouseover="mouseover(index ...

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

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

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

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

3.传递参数

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

提示：

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

最新文章

热门文章