由來：

最近在學習vue基礎，想給a添加一個點擊事件，沒有注意到a的href設為了空，導致頁面一直在刷新，點擊事件根本就沒有進去

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>
<a href=""  v-on:click="doChange">更換方式</a>
</div>

var watchExampleVM= new Vue({
  el:'#example',
  data: {
    loginType:'username'
  },
  methods: {
     doChange: function () {
       this.loginType =this.loginType =="username"?"email":"username";
       return this.loginType;
    
    }
 }
})

后來知道a標簽的href會導致默認人的頁面跳轉(zhuǎn)事件，如果為空值，就會刷新頁面。
因為這個小的問題，就重新看了一下給a綁定點擊事件注意的小地方，記錄一下
1.鏈接的 onclick 事件被先執(zhí)行，其次是 href 屬性下的動作（頁面跳轉(zhuǎn)，或 javascript 偽鏈接）；
2.如果在鏈接的 href 屬性中調(diào)用一個有返回值的函數(shù)，當前頁面的內(nèi)容將被此函數(shù)的返回值代替；
3.假設鏈接中同時存在 href 與 onclick，如果想讓 href 屬性下的動作不執(zhí)行，我們需要阻止默認行為,

"a"標簽中使用點擊事件的方法

1. <a href="JavaScript:js_method();"</a>
   但是這種方法在傳遞this等參數(shù)的時候很容易出問題，而且javascript:協(xié)議作為a的href屬性的時候不僅會導致不必要的觸發(fā)window.onbeforeunload事件，在IE里面更會使gif動畫圖片停止播放。W3C標準不推薦在href里面執(zhí)行javascript語句

2. <a href="javascript:void(0);" onclick="js_method()"</a>
<a href="javascript:;" onclick="js_method()"</a>
   這種方法是很多網(wǎng)站最常用的方法，也是最周全的方法，onclick方法負責執(zhí)行js函數(shù)，而void是一個操作符，void(0)返回undefined，地址不發(fā)生跳轉(zhuǎn)。而且這種方法不會像第一種方法一樣直接將js方法暴露在瀏覽器的狀態(tài)欄,這種方法可以阻止默認行為
   3.<a href="#" onclick="js_method()"</a>
   這種方法也是網(wǎng)上很常見的代碼，#是標簽內(nèi)置的一個方法，代表top的作用。所以用這種方法點擊后網(wǎng)頁后返回到頁面的最頂端。
   4.<a href="#" onclick="js_method();return false;"</a>
   這種方法點擊執(zhí)行了js函數(shù)后return false，頁面不發(fā)生跳轉(zhuǎn)，執(zhí)行后還是在頁面的當前位置。
   未完待續(xù)。。。