09事件绑定v-on:xxx或@xxx

事件绑定v-on:xxx或@xxx

    事件的基本使用:
        1.使用v-on :xxx或@xxx绑定事件，其中xx是事件名;
        2.事件的回调需要配置在methods对象中，最终会在vm上;
        3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;
        4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;
        5.@click="demo”和@click="demo($event)”效果一致，但后者可以传参;
        6.method最好写在vue的methods中，虽然可以写在data中，但是会给vue增添额外的负担，只有data中才会数据劫持，而methods中不会，method本身就是一个写一遍就可以到处用的不需要每次都重新的读取。

实例

<div id="view">
    <!-- 普通写法 v-on -->
    <button v-on:click="showinfo1">欢迎来到{{name}}1(不传参)</button>
    <!-- 简写 @ -->
    <button @click="showinfo2($event,100)">欢迎来到{{name}}2(传参)</button>
</div>
<script>
    Vue.config.productionTip=false;

    const vm = new Vue({ // ViewModel
        data: {
            name:'beijing University'
        },
        methods: {
            showinfo1(event){  // 默认携带点击属性event
                console.log('@this',vm===this,'@event',event,this)    // this是vue实例对象，最好将方法写成普通函数。不要写成箭头函数。
                console.log(event.target.innerText,)
                alert('欢迎同学！')
            },
            showinfo2(event,number){
                console.log('@event.target.innerText',event.target.innerText,'@number',number)     
                alert('欢迎同学！!')
            }
        },
    });
    vm.$mount('#view');

</script>