Vue 实例事件简单示例


Posted in Javascript onSeptember 19, 2019

本文实例讲述了Vue 实例事件。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue 实例事件</title>
  <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<h1>Vue 实例事件</h1>
 <hr>
<div id="app">
  <p>
    {{num}}
  </p>
  <p><button @click="add">add</button></p>
</div>
<p><button οnclick="reduce()">reduce</button></p>
<p><button οnclick="reduceonce()">reduceonce</button></p>
<p><button οnclick="off()">关闭事件</button></p>
</body>
</html>
<script>
   var app = new Vue({
    el:'#app',
    data:{
      num:1
    },
    methods:{
      add:function(){
        this.num++
      }
    },
  })
   //在构造器 on 一直调用 once只能调用一次
  app.$on('reduce',function(){
    this.num--;
    console.log('执行了reduce方法')
  })
  app.$once('reduceonce',function(){
    this.num--;
    console.log('执行了reduceonce方法')
  })
  function reduce(){
    //emit 触发当前实例上的事件
    app.$emit('reduce');
  }
  function reduceonce(){
    app.$emit('reduceonce');
  }
  // $off 关闭事件
  function off(){
    app.$off('reduce');
    console.log('关闭了reduce')
  }
</script>

运行结果:

Vue 实例事件简单示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
微信小程序登录换取token的教程
May 31 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 #Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 #Javascript
vue 设置 input 为不可以编辑的实现方法
Sep 19 #Javascript
node 标准输入流和输出流代码实例
Sep 19 #Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 #Javascript
微信小程序3D轮播实现代码
Sep 19 #Javascript
layui 实现表格某一列显示图标
Sep 19 #Javascript
You might like
php抓取页面的几种方法详解
2013/06/17 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
js实现中文实时时钟
2020/01/15 Javascript
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
在Python中使用__slots__方法的详细教程
2015/04/28 Python
python使用turtle库绘制时钟
2020/03/25 Python
Django保护敏感信息的方法示例
2019/05/09 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
AURALog面试题软件测试方面
2013/10/22 面试题
汉语专业应届生求职信
2013/10/01 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
工程师岗位职责规定
2014/02/26 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS