動態綁定使用v-bind:(縮寫爲:),綁定事件用v-on:(縮寫爲@ )
1. :經常用於動態綁定數據
2. @ 經常用來綁定事件,不僅可以用來綁定點擊事件@click,還可以用來綁定其他的事件如@mousemove移動屬性
<template>
<div id="app">
<p @mousemove="moveXY">輸出當前鼠標的x和y的值{{x}}/{{y}}</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
x:0,
y:0
}
},
methods:{
moveXY:function(e){
this.x=e.clientX;
this.y=e.clientY;
}
}
}
</script>
<style scoped>
</style>
事件修飾符:可以讓我們阻止冒泡和阻止默認事件行爲;
1.傳統的方式:阻止冒泡;
<template>
<div id="app">
<span @mousemove="stop">我不想獲取x和y的值了</span>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
x:0,
y:0
}
},
methods:{
moveXY:function(e){
this.x=e.clientX;
this.y=e.clientY;
},
stop:function(e){
e.stopPropagation();
}
}
}
</script>
<style scoped>
</style>
2.事件修飾符的方式:阻止冒泡;
<template>
<div id="app">
<span @mousemove.stop="">我不想獲取x和y的值了</span>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
x:0,
y:0
}
},
methods:{
moveXY:function(e){
this.x=e.clientX;
this.y=e.clientY;
},
/* stop:function(e){
e.stopPropagation();
}*/
}
}
</script>
<style scoped>
</style>
3.阻止事件的默認行爲:
<template>
<div id="app">
<span @mousemove.stop="">我不想獲取x和y的值了</span>
<a href="https://www.baidu.com" @click.prevent="">baidu</a>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
x:0,
y:0
}
},
methods:{
moveXY:function(e){
this.x=e.clientX;
this.y=e.clientY;
},
/* stop:function(e){
e.stopPropagation();
}*/
}
}
</script>
<style scoped>
</style>
4.既阻止冒泡也阻止事件的默認行爲;
<template>
<div id="app">
<span @mousemove.stop.prevent="">我不想獲取x和y的值了</span>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
x:0,
y:0
}
},
methods:{
moveXY:function(e){
this.x=e.clientX;
this.y=e.clientY;
},
/* stop:function(e){
e.stopPropagation();
}*/
}
}
</script>
<style scoped>
</style>
5.按鍵修飾符:
之前的做法:彈出e.which,就知道輸入的是什麼按鍵;
<template>
<div id="app">
<input type="text" @keyup="input">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
x:0,
y:0
}
},
methods:{
moveXY:function(e){
this.x=e.clientX;
this.y=e.clientY;
},
input:function(e){
alert(e.which);
}
}
}
</script>
<style scoped>
</style>
現在的做法:
1.當點擊enter鍵時,纔會觸發函數
<template>
<div id="app">
<input type="text" @keyup.enter="input">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
x:0,
y:0
}
},
methods:{
moveXY:function(e){
this.x=e.clientX;
this.y=e.clientY;
},
input:function(e){
alert("input");
}
}
}
</script>
<style scoped>
</style>
2.當點擊空格鍵時,纔會觸發函數
<input type="text" @keyup.space="input">
3.即觸發空格鍵觸發回車鍵
<input type="text" @keyup.space.enter="input">
4.按enter鍵觸發
<input type="text" @keyup.space.13="input">