事件处理基础

事件的基本使用

            1. 使用v-on:xxx或 @xxx 绑定事件，其中xx为事件名
            1. 事件的回调需要配置在methods对象中，最终会出添加到vm对象上

3. methods配置的函数，不要使用==箭头函数==！否则this的就不是vm了
4. methods配置的函数，都是被vue所管理的函数，this的指向是vm或 组件实例对象
5. @click=”demo” 和@click=”demo($event)”效果一样，但后者可以传

<!-- 
        事件的基本使用
                1.使用v-on:xxx或 @xxx 绑定事件，其中xx为事件名
                2. 事件的回调需要配置在methods对象中，最终会出添加到vm对象上
                3. methods配置的函数，不要使用==箭头函数==！否则this的就不是vm了
				4. methods配置的函数，都是被vue所管理的函数，this的指向是vm或 组件实例对象
				5。 @click="demo" 和@click="demo($event)"效果一样，但后者可以传参
               -->
               <!-- 添加一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- <button v-on:click="showInfo">点我提示信息</button>         -->
<!-- 简写 -->
         <button @click="showInfo1">点我提示信息1(不传参)</button>
         <!-- 传递参数  ,如果想保留event，使用关键词 $event -->
         <button @click="showInfo2($event,66)">点我提示信息2(传递参数)</button>
    </div>
    <script>
        const vm= new Vue({
        el:'#root',
        data:{
        name:'尚硅谷'
        },
        // 事件要配置在methods 对象中
        methods:{
            showInfo(event){
                // alert("同学你好")
                console.log(this);//此处的this就是指vue实例
                console.log(event.target.innerText);
            },
            showInfo1(event){
                alert("同学你好")
            },
            showInfo2(evnet,number){
                console.log(number);
                console.log(event);
            }
        }
        })
        console.log(vm);
    </script>