Vue的簡單使用（2）

動態綁定使用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">