一榨惠，事件修飾符
事件修飾符有很多種類甚脉，在我們Vue.js官網跟我們列出來了很多修飾符滚澜，再加上我自己在網上搜的一些修飾符蓉媳，我在這里全列出來供大家參考：
1.stop：調用event.stopPropagation() 停止事件發(fā)生
2.prevent：調用event.preventDefault()阻止默認事件發(fā)生
3.capture：添加事件偵聽器時使用capture模式
4.self：只當事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調
5.{keyCode | keyAlias}：只當事件是從特定鍵觸發(fā)時才觸發(fā)回調
6.native：監(jiān)聽組件根元素的原生事件
7.once：只觸發(fā)一次回調
8.left：只當點擊鼠標左鍵時觸發(fā)
9.right：只當點擊鼠標右鍵時觸發(fā)
10.middle：只當點擊鼠標中鍵時觸發(fā)
11.passive：以{passive: true}模式添加偵聽器
注：上面這些修飾符也有我對其自己理解的意思，并不代表官方認可空民，僅供參考
那么現(xiàn)在我們來一起交流一下什么是事件修飾符刃唐，在我們進入正題之前，我們先寫一個鼠標事件(mousemove)那么代碼我們還是緊跟著上一篇文章寫下來界轩，我們先創(chuàng)建一個div容器画饥，然后我們在給一些簡單的樣式
<body>
<div id="app-vue">
<button v-on:click="add(1)">漲一歲</button>
<button v-on:click="bdd(10)">減一歲</button>
<p> 我今年{{age}}</p>
<div id="xy" v-on:mousemove="updateXY">{{x}},{{y}}</div>
</div>
</body>
#xy{
width: 500px;
padding: 200 px 20 px;
text-align: center;
border: 1px solid black;
height: 500px;
}
new Vue({
el:"#app-vue",
data:{
age:22,
x:0,
y:0
},
methods:{
add:function(inc){
this.age+=inc;
},
bdd:function(dec){
this.age-=dec;
},
updateXY:function(event){
//console.log(event);
this.x = event.offsetX;
this.y = event.offsetY;
}
}
})
上面的代碼就是我們的鼠標事件那么上面的代碼怎么解釋呢，v-on:mousemove="updateXY"這個代碼就是我們的鼠標移動事件浊猾，我們想要的結果就是抖甘，當我們鼠標移動到div這個容器里面的時候，我們會看到容器里面的 X Y會隨著我們鼠標的移動而改變他們的值葫慎，既然我們綁定了這個鼠標事件衔彻，我們就要給他一個對應的值和方法，我們在data里面設置了x=0 y=0 也就是默認值偷办，那么在我們方法里面就要獲取我們鼠標移動到div容器的值艰额，并且傳輸給我們的x 和 y
那么我們首先獲取這個值console.log(event)我們在console里面可以看到，當我們鼠標移動到div容器里面的時候椒涯，會有很多數值柄沮，我們隨便點開一個會看到有
offsetX和offsetY這兩個屬性，這兩個屬性后面的數字就是我們想要的x和y的值，那么我們就要把這個值賦予給x和ythis.x = event.offsetX this.y = event.offsetY這兩個代碼就是給x和y賦值的方法祖搓。
這時我們再回到頁面中我們鼠標移動到div容器里面的時候我們會看到x和y的值會隨著我們鼠標的移動而變化狱意，這篇文章我們講的是事件修飾符，那么我們剛剛說過棕硫，x和y的值會隨著我們鼠標的移動而改變，當我們鼠標移動到某個地方的時候他的值不在改變怎么辦呢袒啼，我們在JS里面有說過阻止冒泡事件哈扮，那么我們在div里面給他一個span的標簽，我們鼠標移動到span上面希望有一個事件發(fā)生蚓再，說簡單點x和y值停止運算滑肉，那我們也要給span標簽一個v-on:mousemove=" "這個方法，我們取名為“stopmoving”摘仅，名字取號了我們就要寫對應的方法靶庙，我們要想阻止這個冒泡事件我們需要拿到event這個對象，我們就要event.stopPropagation(),這樣的話我們就可以阻止這個冒泡事件了娃属。
new Vue({
el:"#app-vue",
data:{
age:22,
x:0,
y:0
},
methods:{
add:function(inc){
this.age+=inc;
},
bdd:function(dec){
this.age-=dec;
},
updateXY:function(event){
//console.log(event);
this.x = event.offsetX;
this.y = event.offsetY;
},
stopmoving:function(event){
event.stopPropagation()
}
}
})
<body>
<div id="app-vue">
<button v-on:click="add(1)">漲一歲</button>
<button v-on:click="bdd(10)">減一歲</button>
<p> 我今年{{age}}</p>
<div id="xy" v-on:mousemove="updateXY">
{{x}},{{y}}
<span v-on:mousemove="stopmoving">在這停頓</span>
</div>
</div>
</body>
上面是我們完整的代碼六荒，當我們進入到網頁時，我們會看到x和y后面會有“在這停頓”鼠標移動到上面的時候我們會發(fā)現(xiàn)x和y的值就不會變化矾端，我們在移開這個區(qū)域他又會開始變化掏击，既然我們是事件修飾符，那我們就可以不需要這個stopmoving方法了秩铆，我們直接用事件修飾符就可以了砚亭，因為他已經幫我們包裝好這個方法了，我們值需要將<span v-on:mousemove="stopmoving">這個代碼改成<span v-on:mousemove.stop=" ">這個代碼就行了殴玛，他們兩個效果是一樣的捅膘。
這是我和大家一起分享我自己所學到的一些Vue.js的基礎知識，希望看到這篇文章的各位前輩多多關照滚粟，小生有哪些錯誤的地方希望能夠指出來寻仗，也希望其他和我一樣的小白能夠有所幫助。
