Vue basis of a small mouse clicks and stop bubbling

Use 1.once modifier (once modifier is to click on the event can only be executed once).
2, prevent bubbling event, stop using JS and Vue modifiers stop 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>

> The following are the results page