Vue 實例事件簡單示例
更新時間：2019年09月19日 11:22:36 作者：Json____
這篇文章主要介紹了Vue 實例事件,結(jié)合簡單示例形勢分析了vue.js事件響應與頁面元素相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了Vue 實例事件。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 實例事件</title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<h1>Vue 實例事件</h1>
<hr>
<div id="app">
<p>
{{num}}
</p>
<p><button @click="add">add</button></p>
</div>
<p><button οnclick="reduce()">reduce</button></p>
<p><button οnclick="reduceonce()">reduceonce</button></p>
<p><button οnclick="off()">關(guān)閉事件</button></p>
</body>
</html>
<script>
var app = new Vue({
el:'#app',
data:{
num:1
},
methods:{
add:function(){
this.num++
}
},
})
//在構(gòu)造器 on 一直調(diào)用 once只能調(diào)用一次
app.$on('reduce',function(){
this.num--;
console.log('執(zhí)行了reduce方法')
})
app.$once('reduceonce',function(){
this.num--;
console.log('執(zhí)行了reduceonce方法')
})
function reduce(){
//emit 觸發(fā)當前實例上的事件
app.$emit('reduce');
}
function reduceonce(){
app.$emit('reduceonce');
}
// $off 關(guān)閉事件
function off(){
app.$off('reduce');
console.log('關(guān)閉了reduce')
}
</script>
運行結(jié)果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
Vue.js實現(xiàn)模擬微信朋友圈開發(fā)demo
本篇文章主要介紹了Vue.js實現(xiàn)模擬微信朋友圈開發(fā)demo，實現(xiàn)展示朋友圈，評論，點贊等功能，有興趣的可以了解一下。2017-04-04
這篇文章主要介紹了實現(xiàn)elementUI表單的全局驗證的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了vue配置代理服務器proxy 多種方法,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
在前端開發(fā)中,卡片遮罩層是一種常見的交互設(shè)計元素,用于強調(diào)某個區(qū)域或內(nèi)容,并提供用戶操作的入口,本文將帶大家在?vue?中結(jié)合實際案例實現(xiàn)此功能,感興趣的朋友一起看看吧2024-08-08
vue(element ui)使用websocket及心跳檢測方式
這篇文章主要介紹了vue(element ui)使用websocket及心跳檢測方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue中v-for循環(huán)選中點擊的元素并對該元素添加樣式操作
這篇文章主要介紹了vue中v-for循環(huán)選中點擊的元素并對該元素添加樣式操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue使用websocket及封裝過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue對象賦值視圖不更新問題及解決方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了element-ui在table中如何禁用其中幾行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要主要介紹了Vue的MVVM實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08