Vue方法与事件
gitHub地址:https://github.com/manlili/vue_learn里面lesson10
一 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方法与事件的更多相关文章
- 详解Vue 方法与事件处理器
本篇文章主要介绍了详解Vue 方法与事件处理器 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 方法与事件处理器 方法处理器 可以用 v-on 指令监听 DOM 事件 ...
- Vue 方法与事件处理器
按键修饰符 在监听键盘事件时,我们经常需要检测 keyCode.Vue.js 允许为 v-on 添加按键修饰符: <!-- 只有在 keyCode 是 时调用 vm.submit() --> ...
- React对比Vue（03 事件的对比，传递参数对比，事件对象，ref获取DOM节点，表单事件，键盘事件，约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
- Vue中的事件与常见的问题处理
Vue的事件:获取事件对象$event: 事件冒泡:事件会向上传播 原生js阻止事件冒泡,需要先获取事件对象,再调用stopPropagation()方法: vue事件修饰符stop,例@clik.s ...
- vue教程1-04 事件 v-on:click="函数"
vue教程1-04 事件 v-on:click="函数" v-on:click/mouseout/mouseover/dblclick/mousedown..... 实例:为d ...
- Vue 实例之事件 操作样式 （文本、事件、属性、表单、条件）指令
Vue 可以独立完成前后端分离式web项目的JavaScript框架 三大主流框架之一: Angular React Vue 先进的前端设计模式:MVVM 可以完全脱离服务器端,以前端代码复用的方式渲 ...
- 第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Vue_(基础)Vue中的事件
Vue.js中文文档 传送门 Vue@事件绑定 v-show:通过切换元素的display CSS属性实现显示隐藏: v-if:根据表达式的真假实现显示隐藏,如果隐藏,它绑定的元素都会销毁,显示的时候 ...
- Kendo UI for jQuery使用教程：方法和事件
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
随机推荐
- MMO之禅（二）职业精神
MMO之禅(二)职业精神 --心态 目标 信仰 Zephyr 201304 继续上篇,继续讲什么?打了很多腹稿点滴,从引擎架构,到上层数据.逻辑模块规划,想了很多,临起笔,却总发觉四顾心茫然,乱不可言 ...
- 注解Annotation 详解（转）
要深入学习注解,我们就必须能定义自己的注解,并使用注解,在定义自己的注解之前,我们就必须要了解Java为我们提供的元注解和相关定义注解的语法. 元注解: 元注解的作用就是负责注解其他注解.Java5. ...
- 跟随标准与Webkit源码探究DOM -- 获取元素之getElementsByTagName
按照标签名获取元素 -- getElementsByTagName 标准 DOM 1在Element和Document两个interface中均有定义,原型NodeList getElementsBy ...
- php网页切图/js切图
PhantomJS抓取网站页面信息以及网站截图 http://phantomjs.org/download.html PHP imagegrabscreen和imagegrabwindow(截取网站缩 ...
- MFC的消息管理
一般而言,与视图状态和用户输入有关的命令由视图类来处理,与文件操作有关的命令由文档类来处理,与窗口布局有关的命令由主框架类来处理,与程序的运行状态有关的命令由APP类来处理.
- C++:不同类型的指针的本质与差异
转自:http://blog.csdn.net/richerg85/article/details/10076365 指针的类型(The Type of a Pointer) 一 ...
- AjaxControlToolKit--TabContainer控件的介绍
1. Introduction: Tab本身就应该是个以页签形式显示组织网页内容的一个控件.在AJAX Control Tool Kit的控件中有TabContainer控件,它是一些Ta ...
- VS2012未找到与约束ContractName...匹配的导出
用VS2012创建ARCGIS插件项目时,提示“未找到与约束ContractName...匹配的导出”,此前一直都是正常的额 经查,发现是近期系统相关更新导致,解决办法有两种途径: 一是删除近期更新的 ...
- `fw服务端非完整` 工程开发初期的工作
前面写到了一些关于cocos2dx在开发中的一些模块以及一些解决方法,那些都属于本人的个人简介和个人倾向的解决方案.最近这几天我完善了一下ui解析的部分,当然也只是抽出一点点时间去做的这件事情.我添加 ...
- java正则表达式小练习（IP地址检测、排序，叠词的处理，邮件地址的获取）
import java.util.Arrays; import java.util.Comparator; import java.util.Scanner; import java.util.reg ...