Vue知识点总结(4)——v-on（超级详细）

v-on指令的作用其实就是绑定事件。
事件是JavaScript的灵魂，事件驱动着JavaScript程序的执行。
vue为我们提供了v-on指令用于绑定事件。

<button v-on:click="add">加分</button>
<button @click="reduce">减分</button>

这是两种基本的语法格式。
其中的add和reduce必须在vue实例中的methods中提前声明好。
vue语法具有很强的灵活性，其实我们可以将事件写成动态的。

<button v-on:[event]="add">加分</button>
<button @[event]="reduce">减分</button>

event的值我们需要在data中声明好。
除了正常的事件触发机制，vue也为我们提供了很多的事件修饰符，应用于各种业务场景。

• .stop - 阻止冒泡
• .prevent - 阻止默认事件
• .capture - 阻止捕获
• .self - 只监听触发该元素的事件
• .once - 只触发一次
• .left - 左键事件
• .right - 右键事件
• .middle - 中间滚轮事件
  下面为大家提供一个小案例学习v-on的用法。
  一个简单的计数程序

    <div id="app">
        本场得分：{{count}} <br/>
        <button v-on:click="add">加分</button>
        <button @click="reduce">减分</button>
        <br/>
        <input type="text" v-on:keyup.enter="enterAdd" v-model="test" />
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                count:0,
                test:'',
                event:'click'
            },
            methods: {
                add(){
                    this.count++;
                },
                reduce(){
                    if(this.count == 0){
                        alert("得分不能小于0");
                    }else{
                        this.count--;
                    }
                },
                enterAdd(){
                    if(this.count + parseInt(this.test) < 0){
                        alert('得分不能小于0');
                    }else{
                        this.count = this.count + parseInt(this.test);
                    }
                        this.test = '';
                }
            }
        });
    </script>

可以通过按钮的点击事件触发分数的改变，也可以通过下方的input输入事件改变分数。

技术积累都是通过一点一点的代码量堆起来的，多多敲代码，要在具体的业务场景中懂得如何运用自己学到的知识。

有微信小程序课设、毕设需求联系个人QQ：505417246

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料