Vue2.0 【第一季】 第5节 v-on：绑定事件监听器

第五节 v-on：绑定事件监听器

v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。

一、使用绑定事件监听器，编写一个加分减分的程序。

程序代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>v-on 实例</title>

    <script type="text/javascript" src="../assets/js/vue.js"></script>

</head>

    <body>

        <h1>v-on 实例</h1>

        <hr>

        <div id="app">

            本场比赛得分：{{score}}

            <p>

                <button v-on:click="add">加分</button>

                <button v-on:click="subtract">减分</button><br/>

                <!-- 还有另一种写法：<button @click="subtract">减分</button><br/> -->

				<!-- 我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。 绑定事件写法：  -->

                <input type="text" v-on:keyup.enter="onEnter" v-model="score2">

                <!--这里绑定的是enter键，也可以写键值13，这样按enter键可以进行操作-->

            </p>

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el:'#app',

                data:{

                    score:0,

                    score2:1

                },

                methods:{

                    add:function(){

                        this.score++;

                    },

                    subtract:function(){

                        this.score--;

                    },

                    onEnter:function(){

                        this.score=this.score + parseInt(this.score2); //js代码，因为文本框的数字会默认转变成字符串，所以我们需要用parseInt()函数进行整数转换。

                    }

                }

            })

        </script>

    </body>

</html>

看一下浏览器效果：

附：键盘键值表：

Vue2.0 【第一季】第5节 v-on：绑定事件监听器的更多相关文章

  1. 分布式压测系列之Jmeter4.0第一季

    1)Jmeter4.0介绍 jmeter是个纯java编写的开源压测工具,apache旗下的开源软件,一开始是设计为web测试的软件,由于发展迅猛,现在可以压测许多协议比如:http.https.so ...

  2. vue2.0那些坑之使用elementUI后v-on:click事件不生效问题

    最近在维护vue2.0的项目,遇到了不少坑,在这里说下引用elementui之后,使用v-on:click绑定点击事件无效的情况,如下图: 我想阻止冒泡事件,发现无效.这里将@click换成了@cli ...

  3. 第一百七十节，jQuery，事件对象，event 对象，默认行为，冒泡

    jQuery,事件对象,event 对象,默认行为,冒泡 学习要点: 1.事件对象 2.冒泡和默认行为 JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象.但由于浏览器 ...

  4. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  5. 完善慕课网Vue2.0购物车功能

    vue一个Made in China创造出来的框架真的很66666~ 如果你是刚入门还不太懂也没有看慕课网上这门视频的,请先看一遍或许你会收获满满~ 使用vue2.0实现购物车和地址选配功能这门课程, ...

  6. vue2.0 父子组件之间的通信问题

    概要: 父组件向子组件通信:props属性 子组件向父组件通信:$emit()触发事件,$on()监听事件 在 vue 1.0 中可以使用$dispatch 和 $broadcast来实现 向上派发事 ...

  7. vue2.0 vs vue

    vue2.0相比vue1.0 有哪些改变,今天总结了一下 vue2.0组件中 template 不在支持代码片段 //vue1.0组件中template写法 <template> < ...

  8. Vue2.0 【第一季】第8节 v-pre & v-cloak & v-once

    目录 Vue2.0 [第一季] 第8节 v-pre & v-cloak & v-once v-pre 指令 v-cloak 指令 v-once 指令 Vue2.0 [第一季] 第8节 ...

  9. Vue2.0 【第一季】第7节 v-bind指令

    目录 Vue2.0 [第一季] 第7节 v-bind指令 第7节 v-bind指令 v-bind缩写 绑定CSS样式 Vue2.0 [第一季] 第7节 v-bind指令 第7节 v-bind指令 v- ...

随机推荐

  1. spring的事务，详解@Transactional

    事务管理是应用系统开发中必不可少的一部分.Spring 为事务管理提供了丰富的功能支持. Spring 事务管理分为编程式和声明式的两种方式. 编程式事务指的是通过编码方式实现事务,编程式事务管理使用 ...

  2. java生成饼图

    pom.xml文件导入依赖包 <!-- https://mvnrepository.com/artifact/org.jfree/jfreechart --> <dependency ...

  3. CPU|MICGPU|FPGA|超算|Meta-data|

    生物医学大数据: 收集数据后对数据的分析,如同看相,而对数据信息的挖掘可以看作是算命.这两个过程是基于算法和软件这类工具之上的. 在存储方面:在硬件上,为了Parallel computing的目的, ...

  4. 洛谷P4180【Beijing2010组队】次小生成树Tree

    题目描述: 小C最近学了很多最小生成树的算法,Prim算法.Kurskal算法.消圈算法等等.正当小C洋洋得意之时,小P又来泼小C冷水了.小P说,让小C求出一个无向图的次小生成树,而且这个次小生成树还 ...

  5. 格式化MyEclipse代码(java、jsp、js)行的长度@修改java代码字体@修改Properties文件编码方式

    每次用MyEclipse/Eclipse自带的快捷键Ctrl+shift+f格式化代码时,如果原来的一行代码大于80列,Eclipse就会自动换为多行.如果想格式化代码后不想让代码换行可以通过以下方式 ...

  6. 用Express 4和 MongoDB打造Todo List

    本篇文章主要參考自DreamersLab - 用Express和MongoDB寫一個todo list.原文的教學內容是使用Express 3.x版,在這邊做簡單Express 4.12.1的todo ...

  7. iOS多线程开发之GCD（死锁篇）

    上篇和中篇讲解了什么是GCD,如何使用GCD,这篇文章将讲解使用GCD中将遇到的死锁问题.有兴趣的朋友可以回顾<iOS多线程开发之GCD(上篇)>和<iOS多线程开发之GCD(中篇) ...

  8. git push的完整形式

    现在的情况是,本地有两个分支:master.div, 远程仓库有一个分支:master,本地master分支和远程master分支建立有跟踪联系,这样本地master分支提交时直接git push(只 ...

  9. HF Java Chap 1

    介绍了java的工作方式以及几个有趣的小程序 Java的工作模式 大体来说有四个步骤: 源代码 编译器 编译器的输出 Java虚拟机 源代码 这是我们程序员接触到的部分.根据我们面临的问题,编写一个符 ...

  10. 换到GitHub 博客了

    觉得还是github上面的代码风格看起来舒服些,所以决定把blog搬到github上面去了.以后这里就作为一个放资料的地方吧. github地址:http://l34rner.github.io/