详解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 相关文章推荐
用jscript实现新建word文档
Jun 15 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
js实现随机8位验证码
Jul 24 Javascript
JavaScript中的执行环境和作用域链
Sep 04 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
示例详解Laravel的注册重构
2016/08/14 PHP
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
React实现轮播效果
2020/08/25 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
基于python调用psutil模块过程解析
2019/12/20 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
小学教师岗位职责
2013/11/25 职场文书
新学期开学寄语
2014/01/18 职场文书
大学军训感言200字
2014/02/26 职场文书
初中同学会活动方案
2014/08/22 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
2014年组织部工作总结
2014/11/14 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
MySQL生成千万测试数据以及遇到的问题
2022/08/05 MySQL