前端小白学习Vue.js心得分享

一，事件修饰符

事件修饰符有很多种类，在我们Vue.js官网跟我们列出来了很多修饰符，再加上我自己在网上搜的一些修饰符，我在这里全列出来供大家参考：
1.stop：调用event.stopPropagation() 停止事件发生
2.prevent：调用event.preventDefault()阻止默认事件发生
3.capture：添加事件侦听器时使用capture模式
4.self：只当事件是从侦听器绑定的元素本身触发时才触发回调
5.{keyCode | keyAlias}：只当事件是从特定键触发时才触发回调
6.native：监听组件根元素的原生事件
7.once：只触发一次回调
8.left：只当点击鼠标左键时触发
9.right：只当点击鼠标右键时触发
10.middle：只当点击鼠标中键时触发
11.passive：以{passive: true}模式添加侦听器

注：上面这些修饰符也有我对其自己理解的意思，并不代表官方认可，仅供参考

那么现在我们来一起交流一下什么是事件修饰符，在我们进入正题之前，我们先写一个鼠标事件(mousemove)那么代码我们还是紧跟着上一篇文章写下来，我们先创建一个div容器，然后我们在给一些简单的样式

          涨一岁
          减一岁
          
 我今年{{age}}
    
{{x}},{{y}}

#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上面希望有一个事件发生，说简单点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()
}
}
})

          涨一岁
          减一岁
          
 我今年{{age}}
    

                   {{x}},{{y}}
      在这停顿
    

上面是我们完整的代码，当我们进入到网页时，我们会看到x和y后面会有“在这停顿”鼠标移动到上面的时候我们会发现x和y的值就不会变化，我们在移开这个区域他又会开始变化，既然我们是事件修饰符，那我们就可以不需要这个stopmoving方法了，我们直接用事件修饰符就可以了，因为他已经帮我们包装好这个方法了，我们值需要将这个代码改成这个代码就行了，他们两个效果是一样的。

这是我和大家一起分享我自己所学到的一些Vue.js的基础知识，希望看到这篇文章的各位前辈多多关照，小生有哪些错误的地方希望能够指出来，也希望其他和我一样的小白能够有所帮助。