vue指令用法
- 2019 年 11 月 3 日
- 筆記
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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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
