快捷導(dǎo)航

vue v-on監(jiān)聽(tīng)事件詳解

更新時(shí)間：2017年05月17日 17:19:12 作者：街角小七

這篇文章主要為大家詳細(xì)介紹了vue v-on監(jiān)聽(tīng)事件的相關(guān)資料，Vue.js中的監(jiān)聽(tīng)事件是如何處理的，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在html或jsp頁(yè)面中我們總能碰到監(jiān)聽(tīng)DOM事件來(lái)觸發(fā)javaScript代碼，下面我們就簡(jiǎn)單聊聊Vue.js中的監(jiān)聽(tīng)事件是怎么處理的。

在vue.js中監(jiān)聽(tīng)事件是通過(guò)v-on指令來(lái)實(shí)現(xiàn)的，先看一下簡(jiǎn)單的監(jiān)聽(tīng)事件代碼。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <button v-on:click="count += 1">點(diǎn)擊測(cè)試</button>
 <p>這個(gè)按鈕被點(diǎn)擊了{(lán){count}}次</p>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data:{
   count:0
  }
 })
</script>
</html>

下面再看看監(jiān)聽(tīng)方法事件的代碼示例

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <button v-on:click="test">點(diǎn)擊測(cè)試</button>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   name: 'Vue.js'
  },
  // 在 `methods` 對(duì)象中定義方法
  methods: {
   test: function (event) {
    // `this` 在方法里指當(dāng)前 Vue 實(shí)例
    alert('Hello ' + this.name + '!')
    // `event` 是原生 DOM 事件
    alert(event.target.tagName)
   }
  }
 })
</script>
</html>

內(nèi)聯(lián)處理器方法，內(nèi)聯(lián)javaScript語(yǔ)句

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <button v-on:click="say('say hello')">say hello</button>
 <button v-on:click="say('say goodbye')">say goodbye</button>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   name: 'Vue.js'
  },
  // 在 `methods` 對(duì)象中定義方法
  methods: {
   say:function(message){
    alert(message)
   }
  }
 })
</script>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3后臺(tái)管理系統(tǒng)之創(chuàng)建和配置項(xiàng)目
后臺(tái)管理系統(tǒng)是我們?nèi)粘ｉ_(kāi)發(fā)學(xué)習(xí)經(jīng)常遇到的一個(gè)項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于Vue3后臺(tái)管理系統(tǒng)之創(chuàng)建和配置項(xiàng)目的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
vue 虛擬dom的patch源碼分析
這篇文章主要介紹了vue 虛擬dom的patch源碼分析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
在Vue3項(xiàng)目中使用Jest配置生成測(cè)試報(bào)告的示例詳解
在Vue 3項(xiàng)目中使用Jest進(jìn)行單元測(cè)試是一種常見(jiàn)的做法,它可以幫助我們驗(yàn)證代碼的正確性和穩(wěn)定性,本文將介紹如何在Vue 3項(xiàng)目中配置Jest,以生成測(cè)試報(bào)告,需要的朋友可以參考下
2023-09-09
詳解Vite的新體驗(yàn)
這篇文章主要介紹了詳解Vite的新體驗(yàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02
vue如何將html內(nèi)容轉(zhuǎn)為圖片并下載到本地
這篇文章主要介紹了vue如何將html內(nèi)容轉(zhuǎn)為圖片并下載到本地，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue后臺(tái)實(shí)現(xiàn)點(diǎn)擊圖片放大功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)點(diǎn)擊圖片放大功能，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，需要的可以參考一下
2022-12-12
el-menu動(dòng)態(tài)加載路由的實(shí)現(xiàn)
本文主要介紹了el-menu動(dòng)態(tài)加載路由的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
Vue.js上傳圖片到阿里云OSS存儲(chǔ)的方法示例
這篇文章主要介紹了Vue.js上傳圖片到阿里云OSS存儲(chǔ)的方法示例,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
Vue中Mixin的正確用法詳解
眾所周知，vue 的 mixins 是個(gè)非常靈活，但又很容易帶來(lái)混亂的 API，Mixins 本該是一種強(qiáng)大的重用代碼的手段，但使用之后往往帶來(lái)更多的混亂，代碼變得不易維護(hù)，本文就詳細(xì)介紹Vue Mixin的正確用法,需要的朋友可以參考下
2023-06-06
el-date-picker設(shè)置日期默認(rèn)值兩種方法(當(dāng)月月初至月末)
這篇文章主要給大家介紹了關(guān)于el-date-picker設(shè)置日期默認(rèn)值(當(dāng)月月初至月末)的相關(guān)資料,文中通過(guò)代碼示例將解決的辦法介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-08-08