快捷導(dǎo)航

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

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

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

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

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

<!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)聽方法事件的代碼示例

<!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語句

<!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)文章

vue登錄路由權(quán)限管理的項(xiàng)目實(shí)踐
在開發(fā)Web應(yīng)用程序時(shí)，常常需要進(jìn)行登錄驗(yàn)證和權(quán)限管理，本文主要介紹了vue登錄路由權(quán)限管理的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue使用luckyexcel實(shí)現(xiàn)在線表格及導(dǎo)出導(dǎo)入方式
這篇文章主要介紹了vue使用luckyexcel實(shí)現(xiàn)在線表格及導(dǎo)出導(dǎo)入方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-05-05
webpack轉(zhuǎn)vite的詳細(xì)操作流程與問題總結(jié)
Vite是新一代的前端開發(fā)與構(gòu)建工具,相比于傳統(tǒng)的webpack,Vite 有著極速的本地項(xiàng)目啟動(dòng)速度(通常不超過5s)以及極速的熱更新速度(幾乎無感知),下面這篇文章主要給大家介紹了關(guān)于webpack轉(zhuǎn)vite的詳細(xì)操作流程與問題總結(jié)的相關(guān)資料,需要的朋友可以參考下
2023-03-03
vue 實(shí)現(xiàn)在同一界面實(shí)現(xiàn)組件的動(dòng)態(tài)添加和刪除功能
這篇文章主要介紹了vue 實(shí)現(xiàn)在同一界面實(shí)現(xiàn)組件的動(dòng)態(tài)添加和刪除,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-06-06
Vue實(shí)現(xiàn)列表跑馬燈效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)列表跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue 解決provide和inject響應(yīng)的問題
這篇文章主要介紹了vue 解決provide和inject響應(yīng)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue?中使用?this?更新數(shù)據(jù)的一次問題記錄
這篇文章主要介紹了vue?中使用?this?更新數(shù)據(jù)的一次大坑?,我在 vue 實(shí)例中聲明了一個(gè)數(shù)組屬性如?books: []，在異步請(qǐng)求的回調(diào)函數(shù)中使用?this.books = res.data.data;?進(jìn)行數(shù)據(jù)更新，感興趣的朋友跟隨小編一起看看吧
2022-11-11
vue檢測(cè)對(duì)象和數(shù)組的變化分析
這篇文章給大家分享了vue檢測(cè)對(duì)象和數(shù)組的變化的相關(guān)知識(shí)點(diǎn)與實(shí)例代碼，有興趣的朋友參考下。
2018-06-06
在vue里面設(shè)置全局變量或數(shù)據(jù)的方法
下面小編就為大家分享一篇在vue里面設(shè)置全局變量或數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
簡(jiǎn)單理解vue中實(shí)例屬性vm.$els
這篇文章主要幫助大家簡(jiǎn)單理解vue中實(shí)例屬性vm.$els,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12