Vue的学习之旅-part1
- vue的自带指令
- v-model的修饰符 一般用于input输入框中
- v-model.number
- v-model.trim
- v-slot 作用域插槽
- 具名插槽
- 插槽-组件数据传递
- 注意点1:
- 注意点2:
- v-on: 绑定触发事件
- v-on监听事件的修饰符
- 冒泡: 通过.stop阻止
- 阻止默认行为 通过.prevent修饰符阻止
- 键盘点击事件@keyup
前几篇博客: 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