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的闭包
Dec 31 Javascript
jQuery 创建Dom元素
May 07 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
JQuery each打印JS对象的方法
Nov 13 Javascript
js控制table合并具体实现
Feb 20 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
微信小程序实现签到功能
Oct 31 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
JS控制下拉列表左右选择实例代码
May 08 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
一个简单的域名注册情况查询程序
2006/10/09 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
PHP分享图片的生成方法
2018/04/25 PHP
js传值 判断
2006/10/26 Javascript
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
Javascript的匿名函数小结
2009/12/31 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
年会活动策划方案
2014/01/23 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
刮痧观后感
2015/06/05 职场文书
居安思危观后感
2015/06/11 职场文书