Vue-(九)事件處理

9-1.處理事件的兩種方式 (影片)

在methods中定義函式方法

當執行內容較多時，建議定義為函式方法

<div id='app'>
  <h1>{{count}}</h1>
  <button @click="add">Add</button>
</div>

new Vue({
  el:"#app",
  data:{
    count:0,
  },
  methods:{
    add(){
      this.count++;
    }
  }
})

直接改變data中的變數

當執行內容簡短時，可以直接改變屬性

<div id='app'>
  <h1>{{count}}</h1>
  <button @click="count++">Add</button>
</div>

new Vue({
  el:"#app",
  data:{
    count:0,
  },
})

---

9-2.偵聽滑鼠事件 (影片)

v-on綁定事件

v-on:click=""簡寫為@:click=""

其他滑鼠事件

• mouseover：滑鼠經過
• mouseout：滑鼠移出
• mousedown:滑鼠點下
• mouseup:滑鼠點下後‘放開’
• mousemove：滑鼠在其上方移動時

---

9-3.偵聽圖片的load事件 (影片)

偵聽圖片loading前後，回傳不同的class樣式

<div id='app'>
  <h2 v-if="loading">loading</h2>
  <h2 v-else>complete</h2>
  <image 
     :class='imgClass'
     @load="loading=false"  
     src="https://loremflickr.com/g/320/240/paris"></image>
</div>

.image{
  transition: all 1s;
  
}
.image.hide{
  opacity:0;
  transform: scale(3) rotate(180deg);
}

new Vue({
  el:"#app",
  data:{
    loading:true,
  },
  computed:{
    imgClass(){
      if(this.loading){
        return 'image hide';
      }else{
        return 'image'
      }
    }
  }
})

示範練習 (codepen)

---

9-4.偵聽按鍵事件 (影片)

鍵盤事件

• keydown：按鍵被‘按下’時
• keyup：按鍵被按下後‘彈起’時

  修飾符 定義按鍵

• v-on:keydown.enter
  (當「enter」按鍵被按下時)

  修飾符 防止按鍵內容被輸入

• v-on:keydown.a.prevent
  (當「a」按鍵被按下時，但a的內容不會被放入input中)

  <div id="app">
    <input v-model="input" v-on:keyup.enter="add"/>
    <ul>
      <li v-for="item in todo">{{item}}
    </ul>
  </div>

new Vue({
  el:"#app",
  data:{
  input:'',
  todo:[],
  },
  methods:{
    add(){
      this.todo.push(this.input);
      this.input = '';
    }
  }
})

示範練習 (codepen)

---

9-5.便利的修飾符語法 (影片)

.prevent：不執行預設效果

<div id="app">
  <a 
      href="https://www.google.com"
      target="_blank" 
      @click="linkClick">
    google</a>
</div>

new Vue({
  el:"#app",
  methods:{
    linkClick(event){
      event.preventDefault();
      alert("Don't do it!");
    }
  }
})

改用修飾符.prevent的便利寫法

<div id="app">
  <a 
      href="https://www.google.com"
      target="_blank" 
      @click.prevent="linkClick">
    google</a>
</div>

new Vue({
  el:"#app",
  methods:{
    linkClick(){
      alert("Don't do it!");
    }
  }
})

.stop：不讓event傳到外層

<div id="app">
  <div class="box" @click="clickA">
    <div class="box" @click="clickB">
      <div class="box" @click="clickC">
      </div>
    </div>
  </div>
  <h1>{{msg}}</h1>
</div>

.box{
  border:2px solid blue;
  min-width:30px;
  min-height:30px;
  padding:10px;
  margin:10px;
}

new Vue({
  el:"#app",
  data:{
    msg:'null',
  },
  methods:{
    clickA(event){
      event.stopPropagation();
      this.msg = 'A';
    },
    clickB(event){
      event.stopPropagation();
      this.msg = 'B';
    },
    clickC(event){
      event.stopPropagation();
      this.msg = 'C';
    }
  }
})

改用修飾符.stop的便利寫法

<div id="app">
  <div class="box" @click.stop="msg='A'">
    <div class="box" @click.stop="msg='B'">
      <div class="box" @click.stop="msg='C'">
      </div>
    </div>
  </div>
  <h1>{{msg}}</h1>
</div>

.self：只執行自己發出的event

<div id="app">
  <div class="box" @click.self="msg='A'">
    <div class="box" @click.self="msg='B'">
      <div class="box" @click.self="msg='C'">
      </div>
    </div>
  </div>
  <h1>{{msg}}</h1>
</div>

.once：只執行一次

<div id="app">
  <h1>{{num}}</h1>
  <button @click.once="num+=1">+Add </button>
</div>

new Vue({
  el:"#app",
  data:{
    num:0,
  },
})

更多修飾符，參考(Vue文件)