vue v-on監(jiān)聽事件詳解
更新時間：2017年05月17日 17:19:12 作者：街角小七
這篇文章主要為大家詳細介紹了vue v-on監(jiān)聽事件的相關資料，Vue.js中的監(jiān)聽事件是如何處理的，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在html或jsp頁面中我們總能碰到監(jiān)聽DOM事件來觸發(fā)javaScript代碼，下面我們就簡單聊聊Vue.js中的監(jiān)聽事件是怎么處理的。
在vue.js中監(jiān)聽事件是通過v-on指令來實現的，先看一下簡單的監(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>這個按鈕被點擊了{{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` 在方法里指當前 Vue 實例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.tagName)
}
}
})
</script>
</html>
內聯處理器方法，內聯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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
在開發(fā)Web應用程序時，常常需要進行登錄驗證和權限管理，本文主要介紹了vue登錄路由權限管理的項目實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要介紹了vue使用luckyexcel實現在線表格及導出導入方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
Vite是新一代的前端開發(fā)與構建工具,相比于傳統(tǒng)的webpack,Vite 有著極速的本地項目啟動速度(通常不超過5s)以及極速的熱更新速度(幾乎無感知),下面這篇文章主要給大家介紹了關于webpack轉vite的詳細操作流程與問題總結的相關資料,需要的朋友可以參考下2023-03-03
vue 實現在同一界面實現組件的動態(tài)添加和刪除功能
這篇文章主要介紹了vue 實現在同一界面實現組件的動態(tài)添加和刪除,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細介紹了Vue實現列表跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue 解決provide和inject響應的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue?中使用?this?更新數據的一次大坑?,我在 vue 實例中聲明了一個數組屬性如?books: []，在異步請求的回調函數中使用?this.books = res.data.data;?進行數據更新，感興趣的朋友跟隨小編一起看看吧2022-11-11
這篇文章給大家分享了vue檢測對象和數組的變化的相關知識點與實例代碼，有興趣的朋友參考下。2018-06-06
下面小編就為大家分享一篇在vue里面設置全局變量或數據的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要幫助大家簡單理解vue中實例屬性vm.$els,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12