vue v-on監(jiān)聽事件詳解
更新時間：2017年05月17日 17:19:12 作者：街角小七
這篇文章主要為大家詳細(xì)介紹了vue v-on監(jiān)聽事件的相關(guān)資料，Vue.js中的監(jiān)聽事件是如何處理的，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在html或jsp頁面中我們總能碰到監(jiān)聽DOM事件來觸發(fā)javaScript代碼，下面我們就簡單聊聊Vue.js中的監(jiān)聽事件是怎么處理的。
在vue.js中監(jiān)聽事件是通過v-on指令來實現(xià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">點擊測試</button>
<p>這個按鈕被點擊了{(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">點擊測試</button>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data: {
name: 'Vue.js'
},
// 在 `methods` 對象中定義方法
methods: {
test: function (event) {
// `this` 在方法里指當(dāng)前 Vue 實例
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` 對象中定義方法
methods: {
say:function(message){
alert(message)
}
}
})
</script>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3后臺管理系統(tǒng)之創(chuàng)建和配置項目
后臺管理系統(tǒng)是我們?nèi)粘ｉ_發(fā)學(xué)習(xí)經(jīng)常遇到的一個項目,下面這篇文章主要給大家介紹了關(guān)于Vue3后臺管理系統(tǒng)之創(chuàng)建和配置項目的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue 虛擬dom的patch源碼分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
在Vue 3項目中使用Jest進(jìn)行單元測試是一種常見的做法,它可以幫助我們驗證代碼的正確性和穩(wěn)定性,本文將介紹如何在Vue 3項目中配置Jest,以生成測試報告,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了詳解Vite的新體驗，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
vue如何將html內(nèi)容轉(zhuǎn)為圖片并下載到本地
這篇文章主要介紹了vue如何將html內(nèi)容轉(zhuǎn)為圖片并下載到本地，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實現(xiàn)點擊圖片放大功能，文中的示例代碼講解詳細(xì)，具有一定的借鑒價值，需要的可以參考一下2022-12-12
本文主要介紹了el-menu動態(tài)加載路由的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了Vue.js上傳圖片到阿里云OSS存儲的方法示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
眾所周知，vue 的 mixins 是個非常靈活，但又很容易帶來混亂的 API，Mixins 本該是一種強(qiáng)大的重用代碼的手段，但使用之后往往帶來更多的混亂，代碼變得不易維護(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)資料,文中通過代碼示例將解決的辦法介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08