详解Vue方法与事件


Posted in Javascript onMarch 09, 2017

一 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_3water.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中读取json文件示例代码
May 10 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
Vue实现自带的过滤器实例
Mar 09 #Javascript
Vue中fragment.js使用方法详解
Mar 09 #Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 #Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 #Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 #Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 #Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 #Javascript
You might like
php在线生成ico文件的代码
2007/10/09 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
discuz目录文件资料汇总
2014/12/30 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
举例讲解Python中装饰器的用法
2015/04/27 Python
你应该知道的python列表去重方法
2017/01/17 Python
python matplotlib画图实例代码分享
2017/12/27 Python
python中int与str互转方法
2018/07/02 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
Python 实现自动导入缺失的库
2019/10/29 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
计算机应用与科学个人的自我评价
2013/11/15 职场文书
上课睡觉检讨书
2014/01/28 职场文书
收款委托书范本
2014/09/11 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
2016春节家属慰问信
2015/03/25 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书