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若本號內容有做得不到位的地方（比如：涉及版權或其他問題），請及時聯繫我們進行整改即可，會在第一時間進行處理。
請點贊！因爲你們的贊同/鼓勵是我寫作的最大動力！
歡迎關注達達的簡書！
這是一個有質量，有態度的博客
