Vue入门---事件与方法详解
一、 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入门---事件与方法详解的更多相关文章
- Vue自定义指令使用方法详解 和 使用场景
Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definitio ...
- vue中事件修饰符详解(stop, prevent, self, once, capture, passive)
==.stop== 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 ==.prevent== 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提 ...
- Bootstrap Table使用方法详解
http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...
- javascript event(事件对象)详解
javascript event(事件对象)详解 1. 事件对象 1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...
- jquery移除、绑定、触发元素事件使用示例详解
这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...
- Android ActionBar 关于tab的应用 以及 TabListener的方法详解
actionBar的tab标签应用以及TabListener的方法详解 package com.example.actionBarTest.actionBarTab; import android.a ...
- C# Process.Start()方法详解(转)
C# Process.Start()方法详解 System.Diagnostics.Process.Start(); 能做什么呢?它主要有以下几个功能: 1.打开某个链接网址(弹窗). 2.定位打开某 ...
- Android事件分发机制详解
事件分发机制详解 一.基础知识介绍 1.经常用的事件有:MotionEvent.ACTION_DOWN,MotionEvent.ACTION_MOVE,MotionEvent.ACTION_UP等 2 ...
- Android事件传递机制详解及最新源码分析——ViewGroup篇
版权声明:本文出自汪磊的博客,转载请务必注明出处. 在上一篇<Android事件传递机制详解及最新源码分析--View篇>中,详细讲解了View事件的传递机制,没掌握或者掌握不扎实的小伙伴 ...
随机推荐
- 织梦提交表单(提交留言)前的js校验
第一种情况:页面有引入jq的 在form标签上加上id <form action="/plus/diy.php" enctype="multipart/form-d ...
- 在mvc视图中实现rdlc报表展示(补充)
上篇: 在mvc视图中实现rdlc报表展示 在上一遍中,由于不知道如何在aspx.cs后台中实例化abp的IxxxAppService.cs的接口,我采取的方式是在视图页中把查询出的数据存储到aspx ...
- *p++,*++p,*(p++),*(++p)
直接上代码: #include <stdio.h> #include <stdlib.h> int main () { ,,,}; ; int *p, *tmp; p = &a ...
- 剖析管理所有大数据组件的可视化利器:Hue
日常的大数据使用都是在服务器命令行中进行的,可视化功能仅仅依靠各个组件自带的web界面来实现,不同组件对应不同的端口号,如:HDFS(50070),Yarn(8088),Hbase(16010)等等, ...
- test temp
http://img3.cache.netease.com/love/cssjs/20026/script/page/common.jshttp://img3.cache.netease.com/lo ...
- C# 文本转语音朗读
1. 利用DONET框架自带的 SpeechSynthesizer ,缺点是没有感情色彩,抑扬顿挫等. using System; using System.Collections.Generic; ...
- 2017-2018-2 20155203《网络对抗技术》 Exp8:Web基础
基础问题回答 (1)什么是表单 我认为,form概念主要区分于table,table是用网页布局设计,是静态的,form是用于显示和收集信息传递到服务器和后台数据库中,是动态的: 以下是表单的百度百科 ...
- mfc CFileFind查找类
查找文件 CFileFind类 提取文件图标 显示大图标 显示小图标 一.查找文件 . CFileFind类 //c:\mydir\myfile.txt GetFileName 获取文件名 myfil ...
- python 回溯法 子集树模板 系列 —— 8、图的遍历
问题 一个图: A --> B A --> C B --> C B --> D B --> E C --> A C --> D D --> C E -- ...
- 利用Github搭建自己的博客
教程链接:搭建个人博客 嘿嘿嘿!!一直想自己搭建博客的,一直没机会,这次终于把博客搭了起来.虽然只是一个壳子..套了别人的模板~不过还是很令人兴奋哟!总的来说,就按照这个教程一直往下走,其中有一个坑就 ...