vue事件修飾符(once:prev:stop)
stop修飾符 效果如下：
當你鼠標在這個div里的時候，x與y的值；會隨着鼠標的變化而變化。但是當鼠標放在stopMoving的時候，x與y的值是不會變化的；因為采用了阻止冒泡事件；或者也可以采用我注釋了的那個方法。代碼如下：
1 <template>
2 <div id="app">
3 <div class="stopMoving" v-on:mousemove="upadataXY">
4 {{x}},{{y}} 5 <!-- <span v-on:mousemove="stopMoving">
6 stopMoving 7 <span/>-->
8
9 <!-- 採用阻止冒泡事件的方法 -->
10 <span v-on:mousemove.stop>stopMoving</span>
11 </div>
12 </div>
13 </template>
14
15 <script>
16 export default { 17 name: "app", 18 data() { 19 return { 20 age: 30, 21 x: 0, 22 y: 0
23 }; 24 }, 25 methods: { 26 upadataXY: function(event) { 27 console.log(event); 28 this.x = event.offsetX; 29 this.y = event.offsetY; 30 }, 31 stopMoving: function(event) { 32 event.stopPorpagation(); 33 } 34 } 35 }; 36 </script>
37
38 <style>
39 #app { 40 text-align: center; 41 color: #2c3e50; 42 margin-top: 60px; 43 } 44
45 .stopMoving { 46 width: 300px; 47 height: 100px; 48 border: 1px solid red; 49 text-align: center; 50 padding-top:80px; 51 } 52 </style>
prevent修飾符 效果如下：
這是一個a鏈接，默認的請款下會跳轉頁面；但是當你采用prevent的時候，頁面彈出一個框之后，就不會再跳轉頁面。
代碼如下：
1 <!-- 采用prevent阻止默認的跳轉事件 --> 2 <a v-on:click.prevent="alert()" href="https://www.baidu.com">the new Page</a> 3 4 5 // 在methods里面寫入這個方法 6 alert:function(){ 7 alert('啥？你說素素很美？'); 8 }
可以把.prevent去掉看看效果
