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 相关文章推荐
js查错流程归纳
May 04 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
JS请求servlet功能示例
Jun 01 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 Javascript
vue mvvm数据响应实现
Nov 11 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 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
js实现数组转换成json
2015/06/26 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
python自定义函数def的应用详解
2020/06/03 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
建筑工程技术应届生自荐信
2013/09/27 职场文书
机械专业应届生求职信
2013/12/12 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
小学生常见病防治方案
2014/06/06 职场文书
《比的意义》教学反思
2016/02/18 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS