vue指令v-on和事件修饰符的使用

vue指令v-on：
可以搭配事件使用，后面跟上事件处理函数，如：
点击事件：v-on:click="clickFunction"
鼠标移动事件：v-on:mousemove="getPosition"

v-on:事件=事件处理函数(形参, $event)

两个参数可选
当没有传入形参时，默认有一个事件参数event，不用手动传

v-on:的缩写：@，v-on:click可以缩写成：@click

事件修饰符：
如：
阻止冒泡：.stop
取消默认事件：.prevent
匹配回车触发：.enter
匹配空格触发：.space等等
事件修饰符可以串联使用，如.stop.prevent，功能叠加

小demo：
涉及：
1.vue实参形参的传递与使用 / data字段的获取和使用
2.阻止冒泡的使用：不触发父级鼠标移动事件，不再获取鼠标坐标
3.取消默认事件：点击a标签不跳转

<div id="app">
    <button v-on:click="clickCount(10,$event)">点击此处button>
    <p>{
    {count}}p>
    <p v-on:mousemove="getPosition">输出鼠标位置：{
    {x}}/{
    {y}}
        <span v-on:mousemove.stop>不输出鼠标位置span>
    p>
    <a v-on:click.prevent href="https://www.baidu.com">百度一下a>
div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    new Vue({
      
        el:"#app",
        data:{
      
            count:0,
            x:0,
            y:0
        },
        methods:{
      
            clickCount:function(step, e){
      
                this.count += step;
                console.log(e);
            },
            getPosition:function(e){
      
                this.x = e.clientX;
                this.y = e.clientY;
                
            },
            // stop:function(e){
      
            //     e.stopPropagation()
            // }
        }
    })
script>

效果：
1.点击button，第一个p标签的数字以10为步数累加，并输出事件e
2.在#app范围内，鼠标移动的坐标均显示在第二个p标签里，除span区域
3.点击a标签，不跳转

小demo2：
涉及：
1.简单的点击事件绑定
2.p标签的显示内容随输入框而改变
3.仅回车后，文本框的内容才改变p标签的内容(.enter的使用)

<div id="app">
    <button v-on:click="btnClick">点击button>
    <p>{
    {value}}p>
    <p><input type="text" v-on:input="inputMethod" ref="input1">{
    {value1}}p>
    <p><input type="text" v-on:keyUp.enter="inputMethod" ref="input2">{
    {value2}}p>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    new Vue({
      
        el:"#app",
        data:{
      
            value:"",
            value1:"",
            value2:""
        },
        methods:{
      
            btnClick: function(){
      
                this.value = '点击按钮显示'
            },
            inputMethod: function(e){
      
                this.value1 = this.$refs.input1.value;
                this.value2 = this.$refs.input2.value;
            }
        }
    })
script>

效果：
1.点击按钮，输出文字
2.在第一个文本框输入内容，每改变一次，文本框右侧就会相应改变
3.在第二个文本框输入内容，仅回车后，文本框右侧才会做出改变

好文链接一，关于事件修饰符
好文链接二，关于$event的相关使用
好文链接三，关于获取input框内的内容