快捷導(dǎo)航

Vue 實(shí)例事件簡(jiǎn)單示例

更新時(shí)間：2019年09月19日 11:22:36 作者：Json____

這篇文章主要介紹了Vue 實(shí)例事件,結(jié)合簡(jiǎn)單示例形勢(shì)分析了vue.js事件響應(yīng)與頁(yè)面元素相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了Vue 實(shí)例事件。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue 實(shí)例事件</title>
  <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<h1>Vue 實(shí)例事件</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()">關(guān)閉事件</button></p>
</body>
</html>
<script>
   var app = new Vue({
    el:'#app',
    data:{
      num:1
    },
    methods:{
      add:function(){
        this.num++
      }
    },
  })
   //在構(gòu)造器 on 一直調(diào)用 once只能調(diào)用一次
  app.$on('reduce',function(){
    this.num--;
    console.log('執(zhí)行了reduce方法')
  })
  app.$once('reduceonce',function(){
    this.num--;
    console.log('執(zhí)行了reduceonce方法')
  })
  function reduce(){
    //emit 觸發(fā)當(dāng)前實(shí)例上的事件
    app.$emit('reduce');
  }
  function reduceonce(){
    app.$emit('reduceonce');
  }
  // $off 關(guān)閉事件
  function off(){
    app.$off('reduce');
    console.log('關(guān)閉了reduce')
  }
</script>

運(yùn)行結(jié)果：

感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Vue.js實(shí)現(xiàn)模擬微信朋友圈開(kāi)發(fā)demo
本篇文章主要介紹了Vue.js實(shí)現(xiàn)模擬微信朋友圈開(kāi)發(fā)demo，實(shí)現(xiàn)展示朋友圈，評(píng)論，點(diǎn)贊等功能，有興趣的可以了解一下。
2017-04-04
實(shí)現(xiàn)elementUI表單的全局驗(yàn)證的方法步驟
這篇文章主要介紹了實(shí)現(xiàn)elementUI表單的全局驗(yàn)證的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue配置代理服務(wù)器proxy 多種方法示例詳解
這篇文章主要介紹了vue配置代理服務(wù)器proxy 多種方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
vue實(shí)現(xiàn)卡片遮罩層交互式功能
在前端開(kāi)發(fā)中,卡片遮罩層是一種常見(jiàn)的交互設(shè)計(jì)元素,用于強(qiáng)調(diào)某個(gè)區(qū)域或內(nèi)容,并提供用戶(hù)操作的入口,本文將帶大家在?vue?中結(jié)合實(shí)際案例實(shí)現(xiàn)此功能,感興趣的朋友一起看看吧
2024-08-08
vue(element ui)使用websocket及心跳檢測(cè)方式
這篇文章主要介紹了vue(element ui)使用websocket及心跳檢測(cè)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue中v-for循環(huán)選中點(diǎn)擊的元素并對(duì)該元素添加樣式操作
這篇文章主要介紹了vue中v-for循環(huán)選中點(diǎn)擊的元素并對(duì)該元素添加樣式操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
vue使用websocket及封裝過(guò)程
這篇文章主要介紹了vue使用websocket及封裝過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue對(duì)象賦值視圖不更新問(wèn)題及解決方法
這篇文章主要介紹了Vue對(duì)象賦值視圖不更新問(wèn)題及解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-06-06
element-ui在table中如何禁用其中幾行
這篇文章主要介紹了element-ui在table中如何禁用其中幾行問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue的MVVM實(shí)現(xiàn)方法
本篇文章主要主要介紹了Vue的MVVM實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08