一 vue方法实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue方法与事件</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="test"> <button @click="sayHi">点击我</button> <!--这里使用@--> </div> <script type="text/javascript"> var myVue = new Vue({ el: '#test', methods: { //这里使用methods sayHi: function () { alert('我被点击了') } } }) </script> </body> </html>
二 方法传参
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue方法与事件</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="test"> <button @click="sayHi('你好')">说你好</button> <!--这里使用@--> <button @click="sayHi('我被点击了')">说我被点击了</button> <!--这里使用@--> </div> <script type="text/javascript"> var myVue = new Vue({ el: '#test', methods: { //这里使用methods sayHi: function (message) { alert(message) } } }) </script> </body> </html>
三 vue访问原生 DOM 事件
注意用$event获取
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue方法与事件</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="test"> <button @click="changeColor('你好',$event)">点击我</button> <!--这里使用@--> <div style="height: 100px;width: 100px;background-color: red;" @mouseover="over('鼠标从我上面滑过',$event)"> 鼠标从我上面滑过试试 </div> </div> <script type="text/javascript"> var myVue = new Vue({ el: '#test', methods: { //这里使用methods changeColor: function (message, event) { alert(message+event); //弹出我被点击了,事件是[object MouseEvent] }, over :function (message, event) { alert(message+event); //弹出鼠标从我上面滑过,事件是[object MouseEvent] } } }) </script> </body> </html>
四 事件修饰符
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue方法与事件</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="test"> <button @click.stop="sayHi('你好')">说你好</button> <!-- 阻止单击事件冒泡 --> <button @click.prevent="sayHi('你好')">说你好</button> <!-- 提交事件不再重载页面 --> <button @click.stop.prevent="sayHi('你好')">说你好</button> <!-- 阻止单击事件冒泡和提交事件不再重载页面 --> <button @click.capture="sayHi('你好')">说你好</button> <!-- 添加事件侦听器时使用 capture 模式 --> <button @click.self="sayHi('你好')">说你好</button> <!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 --> <div @keyup.13="sayHi('你好')">说你好</div> <!-- 只有在 keyCode 是 13 时调用 vm.submit() --> </div> <script type="text/javascript"> var myVue = new Vue({ el: '#test', methods: { //这里使用methods sayHi: function (message) { alert(message) } } }) </script> </body> </html>
本文下载:vue-click_jb51.rar
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍jQuery事件绑定on()、bind()与delegate() 方法详解,包括了jQuery事件绑定on()、bind()与delegate() 方法详解的使用技巧和注意事项,需要的朋友参考一下 啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀
本文向大家介绍vue component组件使用方法详解,包括了vue component组件使用方法详解的使用技巧和注意事项,需要的朋友参考一下 什么是组件 按照惯例,引用Vue官网的一句话: 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件
本文向大家介绍Vue官方推荐AJAX组件axios.js使用方法详解与API,包括了Vue官方推荐AJAX组件axios.js使用方法详解与API的使用技巧和注意事项,需要的朋友参考一下 Axios.js作为Vue官方插件的AJAX组件其主要有以下几个特点: 1、比Jquery轻量,但处理请求不多的时候,可以使用 2、基于Promise语法标准 3、支持nodejs 4、自动转换JSON数据 Ax
本文向大家介绍Vue中fragment.js使用方法详解,包括了Vue中fragment.js使用方法详解的使用技巧和注意事项,需要的朋友参考一下 大部分内容源自 jQuery,当然,同时也参考了 component/domify ,如果有兴趣去这翻阅原始的代码,可以到 jQuery 中查找 wrapMap;至于 domify,直接到 github 搜索即可,相关项目类容很少,直接看 index
本文向大家介绍node.JS事件机制与events事件模块的使用方法详解,包括了node.JS事件机制与events事件模块的使用方法详解的使用技巧和注意事项,需要的朋友参考一下 node.JS事件机制说明 多数 Node.js 核心 API 都是采用惯用的异步事件驱动架构,其中某些类型的对象(称为触发器)会周期性地触发命名事件来调用函数对象(监听器)。例如,一个net.Server对象会在每次有
本文向大家介绍vue组件与复用详解,包括了vue组件与复用详解的使用技巧和注意事项,需要的朋友参考一下 一、什么是组件 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。 二、组件用法 组件需要注册后才可以使用,注册有全局注册和局部注册两种方式。 2.1 全局注册后,任何V ue 实例都可以使用。如: 要在父实例中使用这