事件绑定@

在uni中事件绑定和vue中是一样的，通过**v-on**进行事件的绑定，也可以简写为**@**

<button @click="tapHandle">点击</button>

事件函数定义在methods中

methods:{
    tapHandle(){
        console.log('点击完成')
    }
}

事件传参

默认如果没有传递参数，事件函数第一个形参为事件对象

//template
<button @click="tapHandle">点击这里</button>
//script
methods:{
    tapHandle (e) {
        console.log(e)
    }
}

如果给事件函数传递参数了，则对应的事件函数形参接收的则是传递过来的数据

<template>
    <view class="content">
        <view class="box2" hover-class="box2-active" >
            <view class="box" hover-class="box-active" hover-stop-propagation>
                this is a box
            </view>
        </view>
        <view class="box" hover-class="box-active">
            this is a box
        </view>
        <view class="">
            this is a box1
        </view>
        <button type="default">按钮</button>
        <button type="primary" disabled="">按钮</button>
        <button type="warn" loading=""></button>
        <image src="https://img0.baidu.com/it/u=2636535523,1482743544&fm=26&fmt=auto" mode="aspectFill"></image>
        <image src="https://img0.baidu.com/it/u=2636535523,1482743544&fm=26&fmt=auto" mode="aspectFit"></image>
        <view v-for="(item,index) in arr" :key='item.id'>
            序号：{{item.id}},名字：{{item.name}},年龄：{{item.age}}
        </view>
        <button type="primary" v-on:click="clickHandle(20,$event)">按钮</button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                title: 'Hello',
                arr:[
                    {
                        name:'name1',
                        age:'18',
                        id:1
                    },
                    {
                        name:'name2',
                        age:'22',
                        id:2
                    },
                    {
                        name:'name3',
                        age:'17',
                        id:3
                    }
                ]
            }
        },
        onLoad() {
        },
        methods: {
            clickHandle(e){
                console.log("点击完成",num,e)
            }
        }
    }
</script>
<style>
    .box{
        height: 100rpx;
        width: 100rpx;
        background: #0000FF;
    }
    .box-active{
        background:#ff5500;
    }
    .box2{
        height: 200rpx;
        width: 200rpx;
        background-color: red;
    }
    .box2-active{
        background-color: blue;
    }
</style>