文档章节

Vue.js学习系列(三十五)-- Vue.js事件监听

博为峰教研组
 博为峰教研组
发布于 2017/03/20 13:46
字数 363
阅读 88
收藏 0

Vue.js中事件监听可以使用 v-on 指令:

通过记录按钮点击次数来学习如何使用v-on指令来监听事件

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

<button v-on:click="counter+=1">增加1</button>

<p>这个按钮被点击{{counter}}次</p>

</div>

<script type="text/javascript">

new Vue({

el:"#app",

data:{

counter:0

}

})

</script>

</body>

</html>

运行结果:

点击增加1按钮,那么这个按钮被点击的次数就会增加。

通常情况下,我们会使用一个方法来调用javaScript方法,v-on 可以接收一个定义的方法来调用。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>事件绑定</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

<button v-on:click="addTimes">增加1</button>

</div>

<script type="text/javascript">

var app=new Vue({

el:"#app",

data:{

counter:0

},

methods:{

addTimes:function (event) {

this.counter+=1

alert("按钮点击的次数"+this.counter)

}

}

})

app.addTimes()

</script>

</body>

</html>

运行结果

 

点击”增加1”按钮,会弹出如下图的对话框

 

除了直接绑定到一个方法,也可以用内联 JavaScript 语句:

下面通过内联javaScript语句,实现和上个例子一样的功能。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>事件绑定</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

<button v-on:click="addTimes()">增加1</button>

</div>

<script type="text/javascript">

new Vue({

el:"#app",

data:{

counter:0

},

methods:{

addTimes:function () {

this.counter+=1

alert("按钮点击的次数"+this.counter)

}

}

})

</script>

</body>

</html>

© 著作权归作者所有

博为峰教研组
粉丝 52
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
vue-router 实现分析

vue-router 是 Vue.js 官方的路由库,本着学习的目的,我对 vue-router 的源码进行了阅读和分析,分享出来给其他感兴趣的同学做个参考吧。 参考 源码:vuejs/vue-router v2.2.1 - github 文档...

luobotang
2017/03/25
0
0
【Ts重构Vue】00-Ts重构Vue概要

为什么重构 本科机械设计制造及其自动化,16年稀里糊涂的进了一家干变厂,17年自学了大半年,18年正式跨行来到前端。工作中主要写业务代码,很少涉及造轮子工作,一直希望能够提高编程能力。...

峡迩
08/27
0
0
聊聊Vue.js组件间通信的几种姿势

写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出。 文章的原地址:https://github.com/answershuto/learnV...

染陌同学
2017/10/22
1K
2
[精读源码系列]前端路由Vue-Router

前言 相信用vue开发过项目的小伙伴都不会陌生,vue-router模块帮助我们处理单页面应用的理由跳转的,我们只需要将不同path对应的组件信息传给vue-router,就可以在页面局部刷新的情况下实现路由...

木子水吉
09/07
0
0
Vue新手向:14篇教程带你从零撸一个Todo应用

欢迎来到 Vue2.x Todo 系列教程,这个教程将手把手教你从零开始使用 Vue 搭建一个 Todo(待办事项)应用。 书写此教程的动机 Vue 作者尤雨溪在 新手向:Vue 2.0 的建议学习顺序 中给出了中肯...

追梦人物
01/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Git

指令 git init :创建版本库,生成.git文件夹 git add XX:上传代码到暂存区 git state:查看目前本地工作起、暂存区、分支,三者之间的文件状态 git diff demo.html:查看工作区和暂存区的代码...

Hui先生
39分钟前
6
0
绘制流程图用什么软件好?分享绘制流程图的简单方法

绘制流程图一般有两种方法,一种是手绘,另一种是利用画图工具进行绘制,更多的人们选择使用第二种方法进行绘制,方便简单。那绘制流程图用什么软件好?若是使用电脑进行绘制,可以选择迅捷画...

百因必有果
41分钟前
8
0
PHP制作的掷色子点数抽奖游戏实例

PHP制作的掷色子点数抽奖游戏实例,通过掷色子点数来达到抽奖的效果,为抽奖活动增添一些趣味性。 我们将在html页面中写下如下的html结构代码,.wrap用来放置色子和提示信息,#prize则是用来...

ymkjs1990
54分钟前
5
0
宝塔免费版部署

宝塔免费版部署 NiuSHOP安装环境及宝塔一键部署免费版 1、Niushop安装环境 操作系统:支持Windows和linux 服务器:支持Apache/Nginx/IIS服务器 PHP5.6版本及以上,最高支持PHP7.2,MySQL版本...

Geek-Chic
今天
7
0
MySQL查询优化临时表

【理论分析】 MySQL在执行SQL查询时可能会用到临时表,一般情况下,用到临时表就意味着性能较低。 临时表存储 MySQL临时表分为“内存临时表”和“磁盘临时表”,其中内存临时表使用MySQL的M...

1只特立独行的猪
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部