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 相关文章推荐
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
JS中的substring和substr函数的区别说明
May 07 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
PHP的5个安全措施小结
2012/07/17 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
理解python正则表达式
2016/01/15 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
python保存网页图片到本地的方法
2018/07/24 Python
详解Python3定时器任务代码
2019/09/23 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
python 求10个数的平均数实例
2019/12/16 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
药学专业个人的自我评价
2013/12/31 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
装修协议书范本
2014/04/21 职场文书
征兵宣传标语
2014/06/20 职场文书
学校教师读书活动总结
2014/07/08 职场文书
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
mysql sql常用语句大全
2022/06/21 MySQL