写了一个简单的 vue.js 插件，让 dom 中的链接和跳转更简单！

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3240 天前的主题，其中的信息可能已经有所发展或是发生改变。

一个 vue.js 的指令插件，可以让你给 [任何 dom ] 加上一个跳转的事件。属于那种并没有什么卵用但是写起来还蛮省事的插件。

<div id="demo" v-href:blank="'http://google.com'">
    click me to open new tab to google
</div>

这段和以下的代码基本是等价的：

<a href="http://google.com" target='_blank'>
    <div id="demo">
        click me to open new tab to google
    </div>
</a>

这样就减少了一层 a 的嵌套，写起来也能省了不少事情（比如扣 css 什么的）。然后我自己也预设了一些快速的写法，比如：

v-href:b     等价于     v-href:blank

考虑到链接上会有一些打点啊什么的，我实现了一个比较挫的 before 和 after 回调，使用方法如下：

v-href="['http://google.com',before,after]"

其中的 before 和 after 就是回调函数啦。

还有更多的介绍都写在了 github 的 readme 里面，希望大家提提建议和意见。（当然能给个 star 更好啦）

3 条回复 • 2016-08-12 22:26:50 +08:00

xylitolLin

2016-01-13 11:33:24 +08:00

那个 div 才是多余的吧，正确姿势难道不是这样 <a id="demo" href=""></a> ？

zhanfenghai

2016-08-12 15:59:13 +08:00

为什么要在 a 里面再加个 div 呢，很奇怪的事情

kokdemo

2016-08-12 22:26:50 +08:00

@zhanfenghai div 只是举例啊……实际上 img ， li 都可以这么用的