从零开始学习Vue(四)| 一起学系列

109 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第4天,点击查看活动详情

  • v-on指令(事件处理)
    • 用于进行元素的事件绑定 image.png 简化书写方式 image.png
    • 事件程序代码较多时,可以在methods中设置函数,并设置为事件处理程序 image.png
    • 设置事件处理程序后,可以从参数中接收事件对象 image.png
    • 在视图中可以通过$event访问事件对象 image.png
  • v-model指令
    • 用于给<input>、<textarea>、<select>元素设置双向数据绑定
    • 输入框绑定
      • 输入框分为单行输入框input与多行输入框textarea image.png
    • 单选按钮绑定
      • 单选按钮的双向数据绑定方式如下 image.png
    • 复选框绑定
      • 复选框绑定分为单个选项与多个选项两种情况 image.png
    • 选择框绑定
      • 选择框绑定分为单选绑定和多选绑定两种情况 image.png
  • v-model指令小结
    • input输入框:绑定字符串值
    • textarea输入框:绑定字符串值
    • radio:绑定字符串值
    • checkbox:单个绑定布尔值,多个绑定数组
    • select:单个绑定字符串,多个绑定数组
  • 修饰符
    • 修饰符是以点开头的指令后缀,用于给当前指令设置特殊操作
  • 事件修饰符
    • .prevent修饰符
      • 用于阻止默认事件行为,相当于event.preventDefault(),比如a标签的默认点击跳转事件。 比如:禁止a标签默认的跳转链接,<a @click.prevent="fn" href="https://kaiwu.lagou.com">链接</a>点击后不会跳转拉勾网,而是执行fn函数;或者去掉执行fn函数,也可以禁止
  • .stop修饰符
    • 用于阻止事件传播,相当于event.stopPropagation(),比如不希望产生事件冒泡,需要使用这个方法 image.png
  • .one修饰符
    • 用于设置事件只触发一次
    • 打点持续调用.a.b.c的意思是a或b或c,不是同时按abc➹
  • 按键修饰符:按键码
    • 按键码指的是将按键的按键码作为修饰符使用以标识按键的操作方式
    • 可以使用keycode(有些浏览器不兼容)的编码方式来书写,字母也可以直接写字母本身,比如@keyup.a="fn" 指键盘上按下a会执行函数fn
    • 特殊按键:类似于esc、enter、delete等功能按键,为了更好的兼容性,应首选内置别名(在不同设置下有不同的keycode值),直接写.esc调用 image.png
  • 系统操作符
    • 指Ctrl、Alt、Shift等按键,与普通按键不同,因为单独点击系统操作符无效,通常与其他按键组合使用
    • .ctrl修饰符
      • 使用.keycode,单独按ctrl键会有执行效果,在其后加数字或字母,达到的效果也是或的意思
      • 使用.ctrl,单独按ctrl键没有效果,在其后加数字或字母,会有组合效果
      • 使用.ctrl.exact可以实现单独点击ctrl的效果
  • 鼠标按键修饰符
    • .left修饰符
    • .right修饰符
    • .middle修饰符
  • v-model修饰符
    • .trim修饰符
      • 用于自动过滤用户输入内容首尾两端的空格
    • .lazy修饰符
      • 用于将v-model的触发方式由input事件触发更改为change事件触发(失去内容焦点时,如果新内容与旧内容不同时,再进行更新)
    • .number修饰符
      • 用于自动将用户输入的值转换为数值类型,如无法被parseFloat()转换,则返回原始内容

本期的内容就到这里啦!让我们明天一起继续学习Vue.js吧!