计算机网络/计算机科学与应用/系统/运维/开发

v-on基本使用和语法糖

一、v-on基本形式

<!-- 完整形式 -->

<button v-on:click="increment">+</button>

<!-- 语法糖 -->

<button @click="decrement">-</button>


实例:数字相加

<div id="app">
    <h2>{{counter}}</h2>
    <button v-on:click="increment">+</button>
    <button  @click="increment">-</button>
</div>
<script>
      const app = new Vue({
           el:'#app',
           data:{
              counter:0
           },
           methods:{
              increment(){
                        this.counter++
              },
                    decrement(){
                        this.counter--
             }
          }
        })
    </script>


二、v-on事件调用


#事件调用没有参数

<button @click="btnClick()">点击我1</button>
<button @click="btnClick">点击我2</button>


#在事件定义中 写函数时省略 小括号  但是方法本身是需要一个参数的 

<button @click="btn2Click(123)">点击我3</button>

#在事件定义时,写函数时省略了小括号,但是方法本身需要一个参数,这时候,vue会默认将浏览器生成的event事件对象作为参数传入到方法 

<button @click="btn2Click">点击我3</button>


#在方法定义时,需要event对象,同时又需要其他参数 

#在调用方法时,如何手动的获取到浏览器参数的event对象,$event

<button @click="btn3Click(123,$event)">按钮3</button>


实例:

<div id="app">
<!-- 事件调用没有参数 -->
<button @click="btnClick()">点击我1</button>
<button @click="btnClick">点击我2</button>

<!-- 在事件定义中 写函数时省略 小括号  但是方法本身是需要一个参数的 -->
<!-- <button @click="btn2Click(123)">点击我3</button> -->
<!-- 在事件定义时,写函数时省略了小括号,但是方法本身需要一个参数,这时候,vue会默认将浏览器生成的event事件对象作为参数传入到方法 -->
<button @click="btn2Click">点击我3</button>

<!-- 在方法定义时,需要event对象,同时又需要其他参数 -->
<!-- 在调用方法时,如何手动的获取到浏览器参数的event对象,$event -->
<button @click="btn3Click(123,$event)">按钮3</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                            message:"你好啊"
            },
                        methods:{
                            btnClick(){
                                alert(1);
                            },
                            btn2Click(event){
                                alert(event);
                            },
                            btn3Click(abc,event){
                                console.log('++++',abc,event);
                            }
                        }
        })
    </script>

人生在世,不如意事十之八九;人生的滋味,哪怕是酸甜或苦辣,也要靠自己去品。人活一口气:气质看一个人的过去,气度看一个人的未来

评论

^