vue学习笔记（三）模版语法2

1.事件处理

<button v-on:click=“ShouInfo”>点我提示，</button>

new vue({
    el:’#root’
    data:{
    }
    methods:{
        ShowInfo(){
            Alert(‘内容‘）
        }
    }
})

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

2.事件修饰符

格式：@click.xxxxx
Xxxxx可为：
Prevent——阻止跳转
stop———-阻止事件冒泡
once———事件只触发一次（按钮只能点击一次）
capture—-使用事件的捕获模式（由外向内，例如，两个div相嵌套，1中嵌套2，捕获模式下点击2，输出顺序为1-2）
self———-只有enent，target是当前操作的元素时，才触发事件（阻止冒泡）
passive—-事件的默认行为立即执行，无需等待事件回调完毕
补充：scoller——滚动条产生滚动（其他方式产生滚动不计次数）
wheel——-滚动轮产生滚动（其他方式产生滚动不计次数）

3.键盘事件

@keydown——鼠标点下即触发事件
@keyup———-鼠标点下再升起触发事件

总结：
（1）vue中长按的按键别名：
格式举例：keydown.enter——按下回车键即触发事件
Keyup.enter———-按下并松开回车键即触发事件

     delete——捕获“删除”和“退格”键
     esc———-推出
     space——空格
     tab———-换行（tab将光标切走，与keydown配合使用）
     down——-下
     up————上
     left———-左
     right——-右

注意：多个单词组成的键名需全部小写，单词间用-连接。

（2）系统修饰键（用法特殊）：ctrl，alt，shift，meta（徽标键）——配合keyup使用，按下修饰键的同时，再按下其他键。

（3）也可以使用keycode去指定具体的按键（不推荐）
（4）vue.config.keycodes.自定义键名=键码，可以去定制按键别名，修饰符可以连着写。