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