對Vue.js之事件的綁定(v-on: 或者 @ )詳解
更新時間：2018年09月15日 09:11:51 作者：Bwz_Learning
今天小編就為大家分享一篇對Vue.js之事件的綁定(v-on: 或者 @ )詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
1、Vue.js事件綁定的一般格式
v-on:click='function'
v-on:click/mouseout/mouseover/
@click
2、Vue.js事件綁定的實現(xiàn)
2.1 JavaScript代碼
<script type="text/javascript" src="../js/vue-1.0.21.js"></script>
<script type="text/javascript">
window.onload = function() {
vm = new Vue({
el: '#app',
data: {
arrMsg: ['apple', 'orage', 'pear']
},
methods: {
show: function() {
alert(this.arrMsg);
}
}
});
}
</script>
2.2 html代碼
<div id="app" class="container"> <hr /> 事件的綁定方式一,v-on指令 <button type="button" v-on:click='show' class="btn btn-primary btn-default">顯示數(shù)據(jù)</button> <hr/>事件的綁定方式二,簡寫方式 <button type="button" @click="show" class="btn btn-success btn-default">顯示數(shù)據(jù)</button> </div>
2.3 運行結(jié)果
3、完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/bootstrap.min.css" rel="external nofollow" />
<script type="text/javascript" src="../js/vue-1.0.21.js"></script>
<script type="text/javascript">
window.onload = function() {
vm = new Vue({
el: '#app',
data: {
arrMsg: ['apple', 'orage', 'pear']
},
methods: {
show: function() {
//使用this訪問數(shù)據(jù)
alert(this.arrMsg);
}
}
});
}
</script>
</head>
<body>
<!--形式-->
<!--v-on:click="函數(shù)"
v-on:click/mouseout/mouseover/dbclick-->
<div id="app" class="container">
<hr /> 事件的綁定方式一,v-on指令（要加一個:）
<button type="button" v-on:click='show' class="btn btn-primary btn-default">顯示數(shù)據(jù)</button>
<hr/>事件的綁定方式二,簡寫方式（@）
<button type="button" @click="show" class="btn btn-success btn-default">顯示數(shù)據(jù)</button>
</div>
</body>
</html>
以上這篇對Vue.js之事件的綁定(v-on: 或者 @ )詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用vue-video-player無法播放本地視頻的問題及解決
這篇文章主要介紹了vue使用vue-video-player無法播放本地視頻的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue使用keep-alive進行組件緩存方法詳解(組件不緩存問題解決)
keep-alive包裹動態(tài)組件時,會緩存不活動的組件實例,而不是銷毀它們,下面這篇文章主要給大家介紹了關(guān)于vue使用keep-alive進行組件緩存方法(組件不緩存問題解決)的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了解決vue scoped scss 無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。這篇文章主要介紹了vue組件（全局，局部，動態(tài)加載組件）,需要的朋友可以參考下2018-09-09
VUE對Storage的過期時間設(shè)置,及增刪改查方式
這篇文章主要介紹了VUE對Storage的過期時間設(shè)置,及增刪改查方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
本篇文章主要介紹了Vue項目中引入外部文件的方法（css、js、less），非常具有實用價值，需要的朋友可以參考下2017-07-07
在Vue中使用Avue、配置過程及實際應(yīng)用小結(jié)
在項目中遇到通過點擊加號實現(xiàn)輸入框的增加、以及對該輸入框的輸入內(nèi)容進行驗證，通過這些誘導(dǎo)因素創(chuàng)作的這篇文章，本文重點給大家介紹在Vue中使用Avue、配置過程以及實際應(yīng)用,需要的朋友可以參考下2022-10-10
下面小編就為大家分享一篇vue父組件點擊觸發(fā)子組件事件的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue3+高德地圖只展示指定市、區(qū)行政區(qū)域的地圖以及遮罩反向鏤空其他地區(qū)
vue大屏項目開發(fā),客戶覺得地圖上的文字標(biāo)注太多了,要求地圖上只顯示省市等主要城市的標(biāo)注,這篇文章主要給大家介紹了關(guān)于vue3+高德地圖只展示指定市、區(qū)行政區(qū)域的地圖以及遮罩反向鏤空其他地區(qū)的相關(guān)資料,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了讓Vue也可以使用Redux的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05