vue click事件_vue指令用法
vue指令
指令式帶有 v- 前綴的特殊特性v-text和v-html都屬于指令將數(shù)據(jù)和dom做關(guān)聯(lián)，當(dāng)表達(dá)式的值改變時(shí)，響應(yīng)式地作用在視圖
解決大胡子語法閃爍案例
[v-cloak] {dispaly: none; }一般把v-cloak綁在Vue實(shí)例el屬性綁定的節(jié)點(diǎn)上
<!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給標(biāo)簽屬性綁定使用
v-bind是讓標(biāo)簽屬性可以動(dòng)態(tài)的使用data參數(shù)或者寫一些簡單的js表達(dá)式
v-text，v-html不同它倆是針對標(biāo)簽中的內(nèi)容，v-bind是針對標(biāo)簽中的屬性
v-bind案例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--導(dǎo)入Vue cdn 的網(wǎng)址--><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的縮寫是冒號(hào):</a></div><script>var vm = new Vue({el:"#app",data:{url:"www.baidu.com",title:'百度'}})</script> </body> </html>v-on綁定事件v-on方法處理器和內(nèi)聯(lián)處理器
方法處理器內(nèi)聯(lián)處理器
v-on對象處理v-on:keyup監(jiān)聽按鍵觸發(fā)
事件修飾符
阻止事件冒泡--stop實(shí)現(xiàn)捕獲觸發(fā)事件的機(jī)制--capture只會(huì)阻止自己身上冒泡行為--self阻止默認(rèn)事件--prevent只觸發(fā)一次默認(rèn)行為
v-on綁定事件可以用v-on指令監(jiān)聽DOM事件
<button v-on:click="alert('a')">v-on</button>v-on的縮寫@符號(hào)
v-on方法處理器和內(nèi)聯(lián)處理器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--導(dǎo)入Vue cdn 的網(wǎng)址--><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>使用的時(shí)候帶括號(hào):'<button v-on:click="doThat('hello', $event)"></button>'帶括號(hào)的好處是可以傳參，但不自帶evet 事件，想使用event事件需要$event 參數(shù)傳入<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--導(dǎo)入Vue cdn 的網(wǎng)址--><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 + "內(nèi)聯(lián)方法";if (event) {alert(event.target.tagName)}alert(msg);}},})</script> </body> </html>內(nèi)聯(lián)處理器是指的什么呢？
<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);}} });差異一個(gè)有括號(hào)，一個(gè)沒括號(hào)，對吧？
沒括號(hào)的這個(gè)，直接就是函數(shù)名，有括號(hào)的這個(gè)，實(shí)際是一條JS語句，有括號(hào)的這個(gè)就叫『內(nèi)聯(lián)處理器』。
沒括號(hào)的有這么一個(gè)好處：
<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);}} });有括號(hào)的
讓有括號(hào)的也能得到無括號(hào)娘胎里自帶的event參數(shù)
<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);}} });事件處理監(jiān)聽事件
<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()內(nèi)聯(lián)處理器中的方法
<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) {// 現(xiàn)在我們可以訪問原生事件對象if (event) event.preventDefault()alert(message)} }事件修飾符：在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation()
Vue.js 為 v-on 提供了事件修飾符
.stop .prevent .capture .self .once .passive<!-- 阻止單擊事件繼續(xù)傳播 --> <a v-on:click.stop="doThis"></a><!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form><!-- 修飾符可以串聯(lián) --> <a v-on:click.stop.prevent="doThat"></a><!-- 只有修飾符 --> <form v-on:submit.prevent></form><!-- 添加事件監(jiān)聽器時(shí)使用事件捕獲模式 --> <!-- 即元素自身觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理 --> <div v-on:click.capture="doThis">...</div><!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) --> <!-- 即事件不是從內(nèi)部元素觸發(fā)的 --> <div v-on:click.self="doThat">...</div>v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會(huì)阻止對元素自身的點(diǎn)擊
<!-- 點(diǎn)擊事件將只會(huì)觸發(fā)一次 --> <a v-on:click.once="doThis"></a><!-- 滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā) --> <!-- 而不會(huì)等待 `onScroll` 完成 --> <!-- 這其中包含 `event.preventDefault()` 的情況 --> <div v-on:scroll.passive="onScroll">...</div>這個(gè) .passive 修飾符尤其能夠提升移動(dòng)端的性能
不要把 .passive 和 .prevent 一起使用，因?yàn)?.prevent 將會(huì)被忽略，同時(shí)瀏覽器可能會(huì)向你展示一個(gè)警告。請記住，.passive 會(huì)告訴瀏覽器你不想阻止事件的默認(rèn)行為。
按鍵修飾符
<!-- 只有在 `keyCode` 是 13 時(shí)調(diào)用 `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自動(dòng)匹配按鍵修飾符
<input @keyup.page-down="onPageDown">處理函數(shù)僅在 $event.key === 'PageDown' 時(shí)被調(diào)用
系統(tǒng)修飾鍵
.ctrl .alt .shift .meta<!-- Alt + C --> <input @keyup.alt.67="clear"><!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>.exact 修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。<!-- 即使 Alt 或 Shift 被一同按下時(shí)也會(huì)觸發(fā) --> <button @click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的時(shí)候才觸發(fā) --> <button @click.ctrl.exact="onCtrlClick">A</button><!-- 沒有任何系統(tǒng)修飾符被按下的時(shí)候才觸發(fā) --> <button @click.exact="onClick">A</button>.left .right .middle若本號(hào)內(nèi)容有做得不到位的地方（比如：涉及版權(quán)或其他問題），請及時(shí)聯(lián)系我們進(jìn)行整改即可，會(huì)在第一時(shí)間進(jìn)行處理。
請點(diǎn)贊！因?yàn)槟銈兊馁澩?鼓勵(lì)是我寫作的最大動(dòng)力！
歡迎關(guān)注達(dá)叔小生的簡書！
這是一個(gè)有質(zhì)量，有態(tài)度的博客
總結(jié)
以上是生活随笔為你收集整理的vue click事件_vue指令用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 经济还未完全恢复？为什么股票还能走牛？
- 下一篇： vue路由上的#/怎么去掉_如何去掉vu