一、 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>

五、常用事件

  v-on:click/mouseover......

  简写的:    @click=""   推荐

  1、事件对象:
    @click="show($event)"
  2、事件冒泡:
    阻止冒泡:
    a). ev.cancelBubble=true;
    b). @click.stop 推荐
  3、默认行为(默认事件):
    阻止默认行为:
      a). ev.preventDefault();
      b). @contextmenu.prevent 推荐
  4、键盘:
    @keydown $event ev.keyCode
    @keyup

    常用键:
      回车
      a). @keyup.13
      b). @keyup.enter
      上、下、左、右
      @keyup/keydown.left  // 左
      @keyup/keydown.right  // 右
      @keyup/keydown.up // 上
      @keyup/keydown.down  // 下

Vue入门---事件与方法详解的更多相关文章

  1. Vue自定义指令使用方法详解 和 使用场景

    Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definitio ...

  2. vue中事件修饰符详解(stop, prevent, self, once, capture, passive)

    ==.stop== 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 ==.prevent== 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提 ...

  3. Bootstrap Table使用方法详解

    http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...

  4. javascript event(事件对象)详解

    javascript event(事件对象)详解   1. 事件对象     1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...

  5. jquery移除、绑定、触发元素事件使用示例详解

    这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...

  6. Android ActionBar 关于tab的应用 以及 TabListener的方法详解

    actionBar的tab标签应用以及TabListener的方法详解 package com.example.actionBarTest.actionBarTab; import android.a ...

  7. C# Process.Start()方法详解(转)

    C# Process.Start()方法详解 System.Diagnostics.Process.Start(); 能做什么呢?它主要有以下几个功能: 1.打开某个链接网址(弹窗). 2.定位打开某 ...

  8. Android事件分发机制详解

    事件分发机制详解 一.基础知识介绍 1.经常用的事件有:MotionEvent.ACTION_DOWN,MotionEvent.ACTION_MOVE,MotionEvent.ACTION_UP等 2 ...

  9. Android事件传递机制详解及最新源码分析——ViewGroup篇

    版权声明:本文出自汪磊的博客,转载请务必注明出处. 在上一篇<Android事件传递机制详解及最新源码分析--View篇>中,详细讲解了View事件的传递机制,没掌握或者掌握不扎实的小伙伴 ...

随机推荐

  1. 织梦提交表单(提交留言)前的js校验

    第一种情况:页面有引入jq的 在form标签上加上id <form action="/plus/diy.php" enctype="multipart/form-d ...

  2. 在mvc视图中实现rdlc报表展示(补充)

    上篇: 在mvc视图中实现rdlc报表展示 在上一遍中,由于不知道如何在aspx.cs后台中实例化abp的IxxxAppService.cs的接口,我采取的方式是在视图页中把查询出的数据存储到aspx ...

  3. *p++,*++p,*(p++),*(++p)

    直接上代码: #include <stdio.h> #include <stdlib.h> int main () { ,,,}; ; int *p, *tmp; p = &a ...

  4. 剖析管理所有大数据组件的可视化利器:Hue

    日常的大数据使用都是在服务器命令行中进行的,可视化功能仅仅依靠各个组件自带的web界面来实现,不同组件对应不同的端口号,如:HDFS(50070),Yarn(8088),Hbase(16010)等等, ...

  5. test temp

    http://img3.cache.netease.com/love/cssjs/20026/script/page/common.jshttp://img3.cache.netease.com/lo ...

  6. C# 文本转语音朗读

    1. 利用DONET框架自带的 SpeechSynthesizer ,缺点是没有感情色彩,抑扬顿挫等. using System; using System.Collections.Generic; ...

  7. 2017-2018-2 20155203《网络对抗技术》 Exp8:Web基础

    基础问题回答 (1)什么是表单 我认为,form概念主要区分于table,table是用网页布局设计,是静态的,form是用于显示和收集信息传递到服务器和后台数据库中,是动态的: 以下是表单的百度百科 ...

  8. mfc CFileFind查找类

    查找文件 CFileFind类 提取文件图标 显示大图标 显示小图标 一.查找文件 . CFileFind类 //c:\mydir\myfile.txt GetFileName 获取文件名 myfil ...

  9. python 回溯法 子集树模板 系列 —— 8、图的遍历

    问题 一个图: A --> B A --> C B --> C B --> D B --> E C --> A C --> D D --> C E -- ...

  10. 利用Github搭建自己的博客

    教程链接:搭建个人博客 嘿嘿嘿!!一直想自己搭建博客的,一直没机会,这次终于把博客搭了起来.虽然只是一个壳子..套了别人的模板~不过还是很令人兴奋哟!总的来说,就按照这个教程一直往下走,其中有一个坑就 ...