VUE事件處理之@click用法示例代碼
更新時間：2023年05月08日 14:51:45 作者：你瘋了抱抱我
在Vue進行前端開發(fā)中事件處理是必不可少的功能,下面這篇文章主要給大家介紹了關于VUE事件處理之@click用法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
總覽
1.傳參的事件綁定
2.不傳參的事件綁定
一、不傳參的事件處理
1.原理
1.1 我們在vue模板實例中，給標簽設定一個屬性：v-on:click=“xxx”（可以簡寫為 @click=“xxx”），然后賦一個函數(shù)名 A。
1.2 意思就是，如果我們點擊這個標簽，那么就會執(zhí)行這個函數(shù) A 中的內(nèi)容
1.3 請注意，我們給vue模板實例對應的事件函數(shù)也要寫在 實例對象vm的method:{}中，請看代碼就懂了
2.代碼示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>事件的基本使用</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 準備好一個容器-->
<div id="root">
<h2>歡迎來到{{name}}學習</h2>
<!-- <button v-on:click="showInfo">點我提示信息</button> -->
<button @click="showInfo1">點我提示信息1（不傳參）</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產(chǎn)提示。
const vm = new Vue({
el:'#root',
data:{
name:'尚硅谷',
},
methods:{
showInfo1(event){
// console.log(event.target.innerText)
// console.log(this) //此處的this是vm
alert('同學你好！')
},
}
})
</script>
</html>二、傳參的事件處理
1.原理
傳參的內(nèi)容中，我們只需要比不傳參的多加一個（ e v e n t , 參 數(shù) ） ， 這 個 event,參數(shù)），這個 event,參數(shù)），這個event只是用來連接vue實例的
2.代碼示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>事件的基本使用</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 準備好一個容器-->
<div id="root">
<h2>歡迎來到{{name}}學習</h2>
<!-- <button v-on:click="showInfo">點我提示信息</button> -->
<button @click="showInfo2($event,66)">點我提示信息2（傳參）</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生產(chǎn)提示。
const vm = new Vue({
el:'#root',
data:{
name:'尚硅谷',
},
methods:{
showInfo2(event,number){
console.log(event,number)
// console.log(event.target.innerText)能夠顯示event中傳遞過來的標簽包住的內(nèi)容，比如說“點我提示信息2（傳參）”
alert('同學你好??！')
}
}
})
</script>
</html>總結
到此這篇關于VUE事件處理之@click用法的文章就介紹到這了,更多相關VUE事件處理@click用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue中的插件：Vuex。本文將圍繞它的優(yōu)缺點、使用場景和示例展開詳細的說明，感興趣的小伙伴可以跟隨小編一起了解一下2022-01-01
vue?element-ui動態(tài)橫向統(tǒng)計表格的實現(xiàn)
這篇文章主要介紹了vue?element-ui動態(tài)橫向統(tǒng)計表格的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue等兩個接口都返回結果再執(zhí)行下一步的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
本文主要介紹了elementUI組件el-dropdown的一些坑，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
懶加載的好處在于減少服務器的壓力,在網(wǎng)絡比較慢的情況下,可以提前給這張圖片添加一個占位圖片,提高用戶的體驗,這篇文章主要給大家介紹了關于vue項目實現(xiàn)圖片懶加載的相關資料,需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細介紹了Vue實現(xiàn)時間軸效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
el-select如何獲取當前選中的對象所有(item)數(shù)據(jù)
在開發(fā)業(yè)務場景中我們通常遇到一些奇怪的需求,下面這篇文章主要給大家介紹了關于el-select如何獲取當前選中的對象所有(item)數(shù)據(jù)的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了VUE中V-IF條件判斷改變元素的樣式操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨想過來看看吧2020-08-08
vue2.0+vuex+localStorage代辦事項應用實現(xiàn)詳解
本篇文章給大家分享了一個用vue2.0+vuex+localStorage代辦事項應用實現(xiàn)的代碼過程，有興趣的朋友跟著參考學習下。2018-05-05
vue項目本地開發(fā)使用Nginx配置代理后端接口問題
這篇文章主要介紹了vue項目本地開發(fā)使用Nginx配置代理后端接口問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12