Interpretation of @ and @ in Vue

Vue @ and @

one,@

question:

A click event is added to the parent element, and the click event is also added to the child element below. At this time, I want to click the child element to get the click event of the child element, but it triggers the event of the parent element:

&lt;view class="footer-box" @click="clickCard"&gt;
		&lt;view @click="footerClick('like')"&gt;&lt;text class="footer-box__item"&gt;like&lt;/text&gt;&lt;/view&gt;
		&lt;view @click="footerClick('Comment')"&gt;&lt;text class="footer-box__item"&gt;Comment&lt;/text&gt;&lt;/view&gt;
		&lt;view @click="footerClick('share')"&gt;&lt;text class="footer-box__item"&gt;share&lt;/text&gt;&lt;/view&gt;
&lt;/view&gt;

At this point, we need to use the @:Stop event bubble method to solve this problem:

&lt;view class="footer-box" @click="clickCard"&gt;
		&lt;view @="footerClick('like')"&gt;&lt;text class="footer-box__item"&gt;like&lt;/text&gt;&lt;/view&gt;
		&lt;view @="footerClick('Comment')"&gt;&lt;text class="footer-box__item"&gt;Comment&lt;/text&gt;&lt;/view&gt;
		&lt;view @="footerClick('share')"&gt;&lt;text class="footer-box__item"&gt;share&lt;/text&gt;&lt;/view&gt;
&lt;/view&gt;

two,@

There is also a similar method: @: Block the default behavior of events,

For example:

Write a tag a in the code and click it to jump to the target link web page:

&lt;view class="example-body"&gt;
	&lt;a href="" rel="external nofollow"  rel="external nofollow" &gt;Baidu&lt;/a&gt;
&lt;/view&gt;

But if we don't want it to jump but still want to use the a tag, we need to use the @ method at this time:

&lt;view class="example-body"&gt;
	&lt;a href="" rel="external nofollow"  rel="external nofollow"  @='notLink'&gt;Baidu&lt;/a&gt;
&lt;/view&gt;

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.