需要知道的是：

  • @click.stop="xxx"
  • @click.prevent="xxx"
  • @keypress.enter="xxx"
  • :money.sync="total"

.stop

作用：阻止事件冒泡

  1. <template>
  2.   <div id="app">
  3.     <div @click="show1()">
  4.       <button @click.stop="show2()">ok</button>
  5.     </div>
  6.   </div>
  7. </template>
  9. <script>
  10. export default {
  11.   name: "App",
  12.   methods: {
  13.     show1() {
  14.       console.log("show1");
  15.     },
  16.     show2() {
  17.       console.log("show2");
  18.     },
  19.   },
  20. };
  21. </script>

因为阻止了冒泡事件，以上代码最后输出结果为 show2 ！

.prevent

作用：阻止事件的默认行为，例如点击表单提交按钮时会提交，点击超连接时会跳转到对应的地方等，利用 .prevent 可以阻止这些默认行为。如：

  1. <template>
  2.   <div id="app">
  3.     <a @click.prevent href="www.bilibili.com">bilibili</a>
  4.   </div>
  5. </template>

不能点击跳转了！！！

.enter

作用：监听回车事件

一般用于@keypress事件，在这个输入事件里按下回车就会触发回车事件，如：

  1. <template>
  2.   <div id="app">
  3.     <input @keypress.enter="y" />
  4.   </div>
  5. </template>
  7. <script>
  8. export default {
  9.   name: "App",
  10.   methods: {
  11.     y() {
  12.       console.log("回车按下了");
  13.     },
  14.   },
  15. };
  16. </script>

.sync

重中之重，看我已经写好的博客：$emit、v-on与.sync修饰符