Vue的学习之旅-part3

前几篇博客: Vue的学习之旅-part1
前几篇博客: Vue的学习之旅-part2

博主 DTcode7 带您 溺亖在知识的海洋里,嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客 🐒
《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》
《photoshop相关博客》
😚 吾辈才疏学浅,摹写之作,恐有瑕疵。望诸君海涵赐教。望轻喷,嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益,纵其简陋未及渊博,亦足以略尽绵薄之力。倘若尚存阙漏,敬请不吝斧正,俾便精进!

书接上回,接着说vue中自带的指令,part2中讲到v-model的双向绑定,那这里接着从v-model的修饰符开始吧~

vue的自带指令

v-model的修饰符 一般用于input输入框中

v-model.lazy

输入框失去焦点、按下回车才触发数据的双向同步操作
在这里插入图片描述

v-model.number

一般情况下,v-model绑定的数据都会以string类型进行赋值存储,当我们想要让保存的数据为number数值类型时,用这个就行。 如果用 type=“number” 这只是限制input输入框的输入类型为数字,但是绑定到data中还是将数字转化为string类型进行存储了。
但是用v-model.number进行双向绑定,那么输入的内容都将被转换成number类型存储。
在这里插入图片描述
不用v-model.number修饰符进行双向绑定,那么存储的数据类型通过typeof 变量名
展示的是:string类型
在这里插入图片描述
用v-model.number修饰符进行双向绑定:在这里插入图片描述

v-model.trim

清除输入内容中左右两边的多余空格(内容中间的空格呢?)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

v-slot 作用域插槽

在这里插入图片描述

在这里插入图片描述

具名插槽

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

插槽-组件数据传递

组件中的数据,只会在组件中,只有组件内可以获取到
使用这个组件的时候,外部是不能得到这个组件内的的数据的
例题:在这里插入图片描述
在这里插入图片描述
但是,这是行不通的,因为只有 组件中才可以访问 item
想要解决这个问题:
在这里插入图片描述
绑定在 元素上的 属性 被称为插槽 prop。现在在父级作用域(调用组件的地方)中,我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字
在这里插入图片描述
在这里插入图片描述

注意点1:

在这里插入图片描述
在这里插入图片描述

注意点2:

在这里插入图片描述
在这里插入图片描述

v-on: 绑定触发事件

如:点击click 键盘输入keyup 鼠标移入hover等
绑定的事件传参与否
当所要触发的函数没有参数需要传入的时候,可以不写() 直接写方法名称
当所要触发的函数有参数需要传入的时候:
在这里插入图片描述
在这里插入图片描述
这里虽然形参我们叫abc,但实际上是event,默认名字就叫event
在这里插入图片描述
event对象是游览器自己生成的对象,就是在我们鼠标移动、点击等操作时游览器会自动生成event对象。 event.target.value就是当前目标的值
当所要触发的函数有参数需要传入的时候,同时也要传入event对象:
在这里插入图片描述
这里直接用$event.target.value就能直接获取到目标的值
在这里插入图片描述
在这里插入图片描述
注意:传参时,数字可以不用’ ’包裹,但是字符串如果不用’ ’包裹,则会被vue理解为data中的变量!在这里插入图片描述

v-on监听事件的修饰符

在这里插入图片描述

冒泡: 通过.stop阻止

在这里插入图片描述

阻止默认行为 通过.prevent修饰符阻止

在这里插入图片描述
在这里插入图片描述

键盘点击事件@keyup

通过.keyCode修饰符或者 .keyAlias修饰符 获取指定按键

注意: .keyCode==》是叫你写成.13 (表示enter键) .keyAlias===》是叫你写成.enter(表示enter键)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

好了好了,写太多看不完,换一篇继续:
Vue的学习之旅-part4

相关推荐

  1. 记录新人web3

    2024-04-09 11:02:02       38 阅读
  2. 《我编程学习启程》

    2024-04-09 11:02:02       25 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-09 11:02:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-09 11:02:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-09 11:02:02       87 阅读
  4. Python语言-面向对象

    2024-04-09 11:02:02       96 阅读

热门阅读

  1. 起飞前的准备:轻松搭建VSCode与Python开发环境

    2024-04-09 11:02:02       36 阅读
  2. qt-4.8

    2024-04-09 11:02:02       41 阅读
  3. SpringBoot使用Websocket控制评测机

    2024-04-09 11:02:02       44 阅读
  4. 好用的前端框架及插件!!!

    2024-04-09 11:02:02       37 阅读
  5. MySQL-8. mysql索引

    2024-04-09 11:02:02       36 阅读
  6. Factory模式是什么呀

    2024-04-09 11:02:02       35 阅读
  7. qt day2

    qt day2

    2024-04-09 11:02:02      38 阅读