4.1.4　v-on

v-on指令用于监听DOM事件，当触发时运行一些JavaScript代码。v-on指令的表达式可以是一般的JavaScript代码，也可以是一个方法的名字或者方法调用语句。

在使用v-on指令对事件进行绑定时，需要在v-on指令后面接上事件名称，例如click、mousedown、mouseup等事件。

【例4.4】v-on指令（源代码\ch04\4.4.html）。

    <div id="app">
       <p>
           <!--监听click事件，使用JavaScript语句-->
           <button v-on:click="number-=10">-10</button>
           <span>{{number}}</span>
           <button v-on:click="number+=10">+10</button>
       </p>
       <p>
           <!--监听click事件，绑定方法-->
           <button v-on:click="say()">采购商品</button>
       </p>
    </div>
    <!--引入vue文件-->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
       //创建一个应用程序实例
       const vm= Vue.createApp({
           //该函数返回数据对象
           data(){
             return{
                number:1000
              }
           },
           methods:{
               say:function(){
                   alert("今日采购的商品已经全部准备完毕！")
               }
           }
           //在指定的DOM元素上装载应用程序实例的根组件
        }).mount('#app');
    </script>

在谷歌浏览器中运行程序，单击“+10”按钮或“-10”按钮，即可实现数字的递增和递减；单击“采购商品”按钮，触发click事件，调用say()函数，页面效果如图4-7所示。

在Vue应用中许多事件处理逻辑会很复杂，所以直接把JavaScript代码写在v-on指令中是不可行的，此时就可以使用v-on接收一个方法，把复杂的逻辑放到这个方法中。

提示： 使用v-on指令接收的方法名称也可以传递参数，只需要在methods中定义方法时说明这个形参，即可在方法中获取到。 404UYqiJ3qbschpY60a6FWByZoiSaz0ZXEFwRPBeHR+R/0JCwqa4ZF0cbtiZ10D3