當前位置：
首頁 >
vue click事件_vue指令用法
發布時間：2023/12/4
40
豆豆
生活随笔
收集整理的這篇文章主要介紹了
vue click事件_vue指令用法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
vue指令
指令式帶有 v- 前綴的特殊特性v-text和v-html都屬于指令將數據和dom做關聯，當表達式的值改變時，響應式地作用在視圖
解決大胡子語法閃爍案例
[v-cloak] {dispaly: none; }一般把v-cloak綁在Vue實例el屬性綁定的節點上
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script><style>[v-cloak] {display: none;}</style></head><body><div id="app" v-cloak>{{msg}}</div><script>var vm = new Vue({el: "#app",data: {msg: "問題"}</script></body> </html>v-bind給標簽屬性綁定使用
v-bind是讓標簽屬性可以動態的使用data參數或者寫一些簡單的js表達式
v-text，v-html不同它倆是針對標簽中的內容，v-bind是針對標簽中的屬性
v-bind案例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--導入Vue cdn 的網址--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body><div id="app" ><a v-bind:href="url" v-bind:title="title">v-bind的縮寫是冒號:</a></div><script>var vm = new Vue({el:"#app",data:{url:"www.baidu.com",title:'百度'}})</script> </body> </html>v-on綁定事件v-on方法處理器和內聯處理器
方法處理器內聯處理器
v-on對象處理v-on:keyup監聽按鍵觸發
事件修飾符
阻止事件冒泡--stop實現捕獲觸發事件的機制--capture只會阻止自己身上冒泡行為--self阻止默認事件--prevent只觸發一次默認行為
v-on綁定事件可以用v-on指令監聽DOM事件
<button v-on:click="alert('a')">v-on</button>v-on的縮寫@符號
v-on方法處理器和內聯處理器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--導入Vue cdn 的網址--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body><div id="app" ><button v-on:click="doThis">v-on按鈕</button></div><script>var vm = new Vue({el:"#app",methods:{// es6 語法doThis(){if (event) {alert(event.target.tagName)}alert('我是方法處理器')}},})</script> </body> </html>使用的時候帶括號:'<button v-on:click="doThat('hello', $event)"></button>'帶括號的好處是可以傳參，但不自帶evet 事件，想使用event事件需要$event 參數傳入<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--導入Vue cdn 的網址--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body><div id="app" ><button v-on:click="doThat('hello', $event)">v-on按鈕</button></div><script>var vm = new Vue({el:"#app",methods:{// es6 語法doThat(parameter, event){let msg = parameter + "內聯方法";if (event) {alert(event.target.tagName)}alert(msg);}},})</script> </body> </html>內聯處理器是指的什么呢？
<div id="example-3"><button v-on:click="say">Say hi</button><button v-on:click="say">Say what</button> </div>new Vue({el: '#example-3',methods: {say: function () {alert('hello');}} });寫法：
<div id="example-3"><button v-on:click="say('hi')">Say hi</button><button v-on:click="say('what')">Say what</button> </div>new Vue({el: '#example-3',methods: {say: function (message) {alert(message);}} });差異一個有括號，一個沒括號，對吧？
沒括號的這個，直接就是函數名，有括號的這個，實際是一條JS語句，有括號的這個就叫『內聯處理器』。
沒括號的有這么一個好處：
<div id="example-3"><button v-on:click="say">Say hi</button><button v-on:click="say">Say what</button> </div>new Vue({el: '#example-3',methods: {say: function (event) {alert(event.target.tagName);}} });有括號的
讓有括號的也能得到無括號娘胎里自帶的event參數
<div id="example-3"><button v-on:click="say('hi', $event)">Say hi</button><button v-on:click="say('what', $event)">Say what</button> </div>new Vue({el: '#example-3',methods: {say: function (message, event) {alert(message);alert(event.target.tagName);}} });事件處理監聽事件
<div id="example"><button v-on:click="counter += 1">Add</button><p>the button{{counter}}time</p> </div>var example = new Vue({el: '#example',data: {counter: 0} })事件處理方法：
<div id="example-2"><!-- `greet` 是在下面定義的方法名 --><button v-on:click="greet">Greet</button> </div>var example2 = new Vue({el: '#example-2",data: {name: "Vue.js"},methods: {greet: function(event) {alert('hello' + this.name)if(event){alert(event.target.tagName)}}} }) example2.greet()內聯處理器中的方法
<div id="example-3"><button v-on:click="say('hi')">Say hi</button><button v-on:click="say('what')">Say what</button> </div>new Vue({el: '#example-3',methods: {say: function (message) {alert(message)}} })<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit </button>// ... methods: {warn: function (message, event) {// 現在我們可以訪問原生事件對象if (event) event.preventDefault()alert(message)} }事件修飾符：在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation()
Vue.js 為 v-on 提供了事件修飾符
.stop .prevent .capture .self .once .passive<!-- 阻止單擊事件繼續傳播 --> <a v-on:click.stop="doThis"></a><!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form><!-- 修飾符可以串聯 --> <a v-on:click.stop.prevent="doThat"></a><!-- 只有修飾符 --> <form v-on:submit.prevent></form><!-- 添加事件監聽器時使用事件捕獲模式 --> <!-- 即元素自身觸發的事件先在此處理，然后才交由內部元素進行處理 --> <div v-on:click.capture="doThis">...</div><!-- 只當在 event.target 是當前元素自身時觸發處理函數 --> <!-- 即事件不是從內部元素觸發的 --> <div v-on:click.self="doThat">...</div>v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊
<!-- 點擊事件將只會觸發一次 --> <a v-on:click.once="doThis"></a><!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發 --> <!-- 而不會等待 `onScroll` 完成 --> <!-- 這其中包含 `event.preventDefault()` 的情況 --> <div v-on:scroll.passive="onScroll">...</div>這個 .passive 修飾符尤其能夠提升移動端的性能
不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認行為。
按鍵修飾符
<!-- 只有在 `keyCode` 是 13 時調用 `vm.submit()` --> <input v-on:keyup.13="submit"><!-- 同上 --> <input v-on:keyup.enter="submit"><!-- 縮寫語法 --> <input @keyup.enter="submit">.enter .tab .delete (捕獲“刪除”和“退格”鍵) .esc .space .up .down .left .right// 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112自動匹配按鍵修飾符
<input @keyup.page-down="onPageDown">處理函數僅在 $event.key === 'PageDown' 時被調用
系統修飾鍵
.ctrl .alt .shift .meta<!-- Alt + C --> <input @keyup.alt.67="clear"><!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>.exact 修飾符允許你控制由精確的系統修飾符組合觸發的事件。<!-- 即使 Alt 或 Shift 被一同按下時也會觸發 --> <button @click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的時候才觸發 --> <button @click.ctrl.exact="onCtrlClick">A</button><!-- 沒有任何系統修飾符被按下的時候才觸發 --> <button @click.exact="onClick">A</button>.left .right .middle若本號內容有做得不到位的地方（比如：涉及版權或其他問題），請及時聯系我們進行整改即可，會在第一時間進行處理。
請點贊！因為你們的贊同/鼓勵是我寫作的最大動力！
歡迎關注達叔小生的簡書！
這是一個有質量，有態度的博客
總結
以上是生活随笔為你收集整理的vue click事件_vue指令用法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 经济还未完全恢复？为什么股票还能走牛？
- 下一篇： vue路由上的#/怎么去掉_如何去掉vu