<a href="tel:10086" @click.prevent>10086</a> // 阻止拨打电话，这是个坑，在移动端需要注意
另外,href="tel:10086"在ios端点击一次是无法拨打的，很容易被忽略，ios必须长按这里这个链接才会提示是否拨打电话，而在android点一下就可以跳转到拨号页面

<form action="/xxx" @submit.prevent="test5"> //阻止表单提交，仅执行函数test5

@click.capture(捕获)

<div v-on:click.capture="doThis">...</div>
意思就是不加.capture是事件冒泡（默认就是冒泡）,加上.capture就是事件捕获(写在外层就先捕获外层的)，若有多个该修饰符，则由外而内触发。
就是谁有该事件修饰符，就先触发谁。

<div @click="console.log('==1')" style="width:500px;height:500px;background-color:red">
    <div @click.capture="console.log('-----2')" style="width:300px;height:300px;background-color:green">
        <div @click="console.log('===3')" style="width:100px;height:100px;background-color:blue">
			<div @click="console.log('===4')" style="width:50px;height:50px;background-color:pink"></div>
        </div>
    </div>
</div>

最外层500*500px->red

次外层300*300px->green

中层100*100px->blue

最内层50*50px->pink

这里capture次外层，最内层，所以点击内层触发依次为

-----2
===4
===3
==1

说明：先触发的都是capture（都有capture的情况下从外到内依次触发），其次再是默认冒泡的

这里优先capture由外到内触发2、4，接着由内到外冒泡 3、1

盗取一张图

.self

使用.self实现只有点击当前元素的时候，才会触发事件处理函数。

本来想在网上弄一段代码，发现不是太啰嗦就是冗余太多，没贴关键代码，看的脑阔疼，还是自己敲一下

<div class="inner" @click.self="div1Handler">
    <input type="button" value="戳我试试" @click="btnHandler">
</div>

这段代码看到@click.self，也就是说，我点击button的时候，不会去执行div1Handler，咦？？这怎么看起来是阻止了冒泡，确实从现象上来看是这样，但是这个应该解释为，点击子元素仍然会冒泡，但是我不接，你只有点击我的时候我才执行div1Handler。

看一下下面代码：

<div id="app" v-on:click.self="close">
    <button>点击</button>
</div>

不管你怎么点击按钮，都不会去执行close方法，因为你的self会忽略冒泡，除非这里的div是@click="close"才会收到子元素的冒泡去执行close方法

@click.prevent.self和@click.self.prevent区别

<div @click="alert">
      <a href="/#" @click.prevent.self="alert">
        <div @click="alert"></div>
      </a>
    </div>
// 点击div3，会alert3,alert1。不但阻止了alert(2)，还阻止了a的默认跳转。

// 因为点击的时候会先prevent，阻止默认事件，阻止了跳转;然后判断是否是self，因为点击到的是div3，所以不是self，阻止了alert(2)。

    <div @click="alert">
      <a href="/#" @click.self.prevent="alert">
        <div @click="alert"></div>
      </a>
    </div>
// 点击div3，会alert3,alert1,跳转到/#。只阻止了alert(2)。

// 因为会先判断self，点击到div3，不是self，所以不会执行click事件，就不会执行 阻止默认事件和alert(2) ，所以可以跳转

这里self忽略冒泡没得说，也就是子元素不会触发我的click方法，继续可以冒泡，反正我这里忽略了。

prevent在前后的问题-->prevent在前，阻止默认跳转，prevent在后，那跳转就阻止不了

很简单记的呀

.once

once：事件仅生效一次，一般与点击事件配合使用，比如@click.once。使得只可以点击一次。

比如：

<button @click.once='alert("我就第一次出现")'>点击</button>

又比如

<a href="https://www.baidu.com" @click.prevent.once> 第一次点击被阻止</a>

这个链接点击第二次及以后都可以跳转，第一次被阻止

===============Talk is cheap, show me the code================

周记随笔3

v-cloak

@click.stop与@click.prevent

@click.capture(捕获)

.self

@click.prevent.self和@click.self.prevent区别

.once