v-on綁定事件監(jiān)聽(tīng)器
直接擼代碼：
<div id="app">
<h2>計(jì)數(shù)器</h2>
number：{{number}}
<button v-on:click="add">+</button>
<button @click="subtract">-</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // app是Vue實(shí)例的掛在對(duì)象
data: {
number: 0
},
methods: {
add () {
this.number ++
},
subtract () {
this.number --
}
}
})
</script>
@click等同于v-on:click赴邻，是Vue的語(yǔ)法糖熙暴，在methods內(nèi)定義好方法肌幽，v-on指令監(jiān)聽(tīng)DOM事件來(lái)觸發(fā)一些javascript代碼贪庙。
除了綁定click之外蛛株，我們還可以綁定其它事件团赁，比如鍵盤回車事件v-on:keyup.enter,更多事件請(qǐng)點(diǎn)擊查看
面試考點(diǎn)：Vue事件修飾符的作用
<div id="app">
<div @click="grandfather">
<div @click="father">
<div @click="son">me</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // app是Vue實(shí)例的掛在對(duì)象
data: {
},
methods: {
grandfather () {
console.log('grandfather')
},
father () {
console.log('father')
},
son () {
console.log('son')
},
}
})
</script>
事件流圖(來(lái)自百度)：
上面一段代碼，什么修飾符都不添加時(shí)谨履，點(diǎn)擊“me”欢摄，依次打印son、father笋粟、grandfather
- .stop
阻止冒泡,操作子元素不會(huì)觸發(fā)父元素同類事件
<div @click.stop="grandfather">
<div @click.stop="father">
<div @click.stop="son">me</div>
</div>
</div>
此時(shí)怀挠，只會(huì)觸發(fā)子元素事件
- .capture
添加事件偵查時(shí)使用事件捕獲模式，從外到內(nèi)依次捕獲
<div @click.capture="grandfather">
<div @click.capture="father">
<div @click.capture="son">me</div>
</div>
</div>
依次打印grandfather害捕、father绿淋、son
- .prevent
取消默認(rèn)事件
<a href="www.baidu.com" @click.prevent="">百度</a>
鏈接不跳轉(zhuǎn)
- .self
只在添加事件的元素自身觸發(fā) - .once
事件只觸發(fā)一次
其他指令
v-pre（不需要表達(dá)式）
在模板中跳過(guò)vue的編譯，直接輸出原始值尝盼。就是在標(biāo)簽中加入v-pre就不會(huì)輸出vue中的data值了
<div id="app" v-pre>
<h1>{{message}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // app是Vue實(shí)例的掛在對(duì)象
data: {
message: 'Hello world'
}
})
</script>
v-cloak（不需要表達(dá)式）
為了解決當(dāng)網(wǎng)速較慢時(shí)吞滞，Vue.js文件沒(méi)有被加載完時(shí)頁(yè)面上數(shù)據(jù)綁定的閃現(xiàn)問(wèn)題。
例如：
<h1>{{message}}</h1>
會(huì)閃現(xiàn){{message}}
利用v-cloak指令使頁(yè)面在Vue渲染完指定的整個(gè)DOM后才進(jìn)行顯示盾沫，并且v-cloak會(huì)在Vue實(shí)例結(jié)束編譯后從綁定的DOM上移除裁赠，結(jié)合CSS可以解決這個(gè)問(wèn)題。
[v-cloak] {
display: none;
}
v-once（不需要表達(dá)式）
這個(gè)指令在實(shí)際開(kāi)發(fā)中用的不是很多赴精，作用是使定義它的元素或組件只渲染一次佩捞，包括元素或組件的所有子節(jié)點(diǎn)。渲染一次后不會(huì)隨數(shù)據(jù)變化蕾哟，可以視為靜態(tài)失尖。
<div id="app" v-once>
<input type="text" v-model="message">
<h1>{{message}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app', // app是Vue實(shí)例的掛在對(duì)象
data: {
message: "Hello world" // 字面量
}
})
</script>
以上是本期全部?jī)?nèi)容，欲知后事如何渐苏，請(qǐng)聽(tīng)下回分解<(￣︶￣)↗[GO!]
