事件的基本用法

1. 使用v-on:xxx 或@xxx 绑定事件，其中xxx是事件名
2. 事件的回调需要配置在methods对象中，最终会在vm上
3. methods中配置的函数，不要用箭头函数，否则this就不是vm了
4. methods中配置的函数，都是被vue所管理的函数。this的指向是vm或组件实例对象：
5. @click="demo"和click=“demo($event)” 效果一致，但后者可以传参;

    <div id="root">
        <h1>欢迎来到{{name}}学习</h1>
        <!-- <button v-on:click="showInfo">点我提示信息</button>-->
        <button @click="showInfo1">点我提示信息(不传参)</button>
        <button @click="showInfo2($event,66)">点我提示信息(传参)</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip =false 
        
        new Vue({
            el:'#root', 
            data:{ 
                name:'赛特勒'
            },
            methods:{
                 showInfo1(event){
                    //alert('朋友你好')
                    //console.log(event.target.innerText)
                    //console.log(this) //此处的this是vm
                    alert('朋友你好!')
                },
                showInfo2(event,number){
                    //alert('朋友你好')
                    console.log(number)
                    console.log(event,event.target.innerText)
                    //console.log(this) //此处的this是vm
                   
                    alert('朋友你好!!')
                }
            }
        })

    </script>

事件修饰符

1. prevent 阻止默认事件（常用）
2. stop 阻止事件冒泡(常用)
3. once: 事件只触发一次（常用）
4. capture: 使用事件的捕获模式
5. Self: 只有event.target是当前操作的元素是才触发事件：
6. passive: 事件的默认行为立即执行。无需等待事件回调执行完毕;

修饰符可以连续写，比如可以这样用： @click.prevent.stop=“showInfo”>

<div id="root">
        <h1>欢迎来到{{name}}学习</h1>
        <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
        <!--阻止事件冒泡（常用）-->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>
             <!--事件只触发一次-->
        <button @click.once="showInfo">点我提示信息</button>
          <!--使用事件的捕获模式-->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>

        <!--self-->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">点我提示信息</button>
        </div>
        <!--事件的默认行为立即执行，无须等待事件回调执行完毕：-->
        <ul @wheel="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data: {
                name: '赛特勒'
            },
            methods: {
                showInfo(e) {
                    //e.stopPropagation() 阻止冒泡
                    console.log(e.target)
                    //alert('朋友你好!')
                },
                showMsg(msg) {
                    console.log(msg)
                },
                demo(e) {
                    console.log('@')
                },


            }
        })

    </script>

键盘事件

键盘上的每一个按键都有自己的名称和编码，例如：Enter(13).而Vue还对一些常用的按键起了别名方便使用。

1. Vue中常用的按键别名：
   回车 =>enter
   删除 =>delete (捕获“删除”和“退格”键)
   退出 =>esc
   空格 =>space
   换行 =>tab
   上=>up
   下=>down
   左=>left
   右=>right
2. Vue未提供别名的按键，可以使用按键原始的key值取绑定，但注意要转为kebab-case（短横线命名）
3. 系统修饰键（用法特殊）：ctrl,alt,shift,meta
   (1)配合keyup使用；按下修饰键的同事，再按下其他键，随后释放其他键，事件才被触发
   (2)配合keydown使用：正常触发事件。
4. 也可以使用keyCode去指定具体的按键（不推荐）
5. Vue.config.keyCodes自定义键名=键码，可以去定制按键别名

    <div id="root">
        <h1>欢迎来到.{{name}}学习</h1><!--插值语法-->
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">

        
    </div>
    <script type="text/javascript">
        Vue.config.productionTip =false //阻止生产环境的提示信息
        //创建Vue实列
        const x=new Vue({
            el:'#root', 
            data:{ 
                name:'david'

            },
            methods:{
                showInfo(e){
                    console.log(e.target.value)
                }
            }
        });

    </script>