Vue Notes17:a标签与添加点击事件

最近在学习vue基础，想给a添加一个点击事件，没有注意到a的href设为了空，导致页面一直在刷新，点击事件根本就没有进去 Username Email 更换方式 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 属性下的动作不执行，我们需要阻止默认行为, 但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句 这种方法是很多网站最常用的方法，也是最周全的方法，onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏,这种方法可以阻止默认行为 3. 这种方法也是网上很常见的代码，#是标签内置的一个方法，代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。 4.