由来：
最近在学习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会导致默认人的页面跳转事件，如果为空值，就会刷新页面。
因为这个小的问题，就重新看了一下给a绑定点击事件注意的小地方，记录一下
1.链接的 onclick 事件被先执行，其次是 href 属性下的动作（页面跳转，或 javascript 伪链接）；
2.如果在链接的 href 属性中调用一个有返回值的函数，当前页面的内容将被此函数的返回值代替；
3.假设链接中同时存在 href 与 onclick，如果想让 href 属性下的动作不执行，我们需要阻止默认行为,
"a"标签中使用点击事件的方法
<a href="JavaScript:js_method();"</a>
但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句<a href="javascript:void(0);" onclick="js_method()"</a>
<a href="javascript:;" onclick="js_method()"</a>
这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏,这种方法可以阻止默认行为
3.<a href="#" onclick="js_method()"</a>
这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。
4.<a href="#" onclick="js_method();return false;"</a>
这种方法点击执行了js函数后return false，页面不发生跳转，执行后还是在页面的当前位置。
未完待续。。。
