Vue小基礎鼠標點擊和阻止冒泡

1.once修飾符的使用（once修飾符是讓點擊事件只能夠執行一次）。
2，阻止冒泡事件，使用JS阻止和Vue修飾符stop阻止

  <div id="app">
    <p>{{ age }}</p>
    <!-- 使用Vue的once修飾符，讓點擊事件只能使用一次 -->
    <button @click.once='btn'>只能點擊一次</button>
    <button @click='btn2(10)'>加10</button>
    <br>
    鼠標事件
<!-- 使用鼠標移入事件，獲取在該區域內的坐標值-->
     <div class="box" @mousemove='updateXY'
      style=" width: 500px;border: 1px solid red;
      text-align: center;
      padding: 200px 20px;">
      {{x}},{{y}}
      <!-- 阻止冒泡事件 使用vue的事件修飾符阻止冒泡事件,鼠標移動到該區域之前的事件停止 -->
      <!--使用Vue修飾符 stop阻止-->
      <span @mousemove.stop="">阻止冒泡事件</span>
      <p style="padding: 50px 0;background-color: red;" @mousemove='doThis'>JS自帶阻止冒泡事件的方法</p>
    </div>
  </div>
  <script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        age: 30,
        x: 0,
        y: 0
      },
      methods: {
        btn() {
          this.age++;
        },
        btn2(sum) {
          this.age += sum;
        },
        updateXY(event) {
          // console.log(event)
          // event是系統自帶的從里面拿它的位置屬性
          this.x = event.offsetX;
          this.y = event.offsetY;
        },
        // JS阻止冒泡事件的方法
        doThis(event) {
          event.stopPropagation();
        }
      },
    })
  </script>

下面這個是頁面的效果