编程 Javascript

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程序设计有所帮助。

Vue 实例事件简单示例

- Author -

Json____

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript 不能释放内存.

Sep 07 Javascript

解javascript 混淆加密收藏

Jan 16 Javascript

根据一段代码浅谈Javascript闭包

Dec 14 Javascript

Js sort排序使用方法

Oct 17 Javascript

jquery的ajax跨域请求原理和示例

May 08 Javascript

javascript三元运算符用法实例

Apr 16 Javascript

详解jQuery中的empty、remove和detach

Apr 11 Javascript

原生js实现百叶窗效果及原理介绍

Apr 12 Javascript

jquery拖动层效果插件用法实例分析(附demo源码)

Apr 28 Javascript

推荐一个基于Node.js的表单验证库

Feb 15 Javascript

Vue.extend 编程式插入组件的实现

Nov 18 Javascript

JS中作用域以及变量范围分析

Jul 18 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