v-model 和 开发组件的模式
上节课讲的东西做一个补充,上节课对于watch有很多的案例,其实就是在data里面有很多的案例
这里有对于深拷贝 和 浅拷贝之间的补充
如果是deep 的话会进行一个深度的监听
赋值的话都是对于内存的引用
改变info 的时候保存的也是一个内存地址
在文档中进行了一个引用的赋值,这里有说明这样的一个东西
数组监听的问题
更加优秀的使用解法
组件之间的相互传递
01 掌握侦听器的三个知识补充,三个小的知识点的补充
在哪里封装成一个组件,一般情况下会在子组件中处理数组
在这里的话会进行一个知识的补充
对象的引用和补充(浅拷贝和深拷贝)
// 对象是引用类型(在C语言中称为指针)
const info = {name:'why',age:18};
会在堆内存中存放空间
一旦在内存中创建这样的一个空间
就会有一个地址(十六进制0x10001)
在内存中是这样的一个表示
通过操作内存将里面的内容进行改变
这里name 的值就会发生改变
在内存中就是这样的一个过程
对于上面的对象进行一个拷贝的操作
会将里面的属性拷贝到 新的对象
Object.assign({},info) 来进行深度的拷贝
这个方法有一个返回值,深拷贝后的值
深拷贝会创建一个新的对象,将原先对象中的属性拷贝一份到新的对象中
两个内存地址是不相同的
如果这里写上一个console.log(obj) 里面的内容, 内存中的地址也会发生改变
这里也是对于内存地址里面的值发生改变
做拷贝的时候只是对于第一层做了拷贝,但是这里修改的话,会影响到内存地址里面的
值,我们需要把info里面的kobe改成james,这里的name应该是不会发生改变的
其实这个是对于对象的深拷贝
这里使用JSON.stringify() 进行一个转换,(转换成一个字符串的形式)
再使用JSON.parse()的方式还原,这样就会在内存中创建一个新的内存空间
它们两个之间就没有任何关系了
就说明我们对当前的这个对象做了一个深度的拷贝
可以采用原生的方式进行一个深拷贝
这里就可以通过lodash 来进行一个深度的拷贝
lodash 里面有很多好用的库
这里是做了一个浅拷贝
_.cloneDeep()
不管是外层的对象还是内层的对象都是一份新的对象,而不是同一个对象
---- 引用,对象的浅拷贝 和 对象的深度拷贝
lodash 是一层一层的做了一个拷贝
v-model的基本使用
表单提交是开发中非常常见的功能,也是和用户交互的重要手段
比如用户在登录,注册的时候需要进行账号的提交
不如用户在检索,创建,更新信息的时候,需要提交一些数据
用户在进行检索的时候需要创建一些关键字
v-model指令可以在表单input,textarea 以及 select元素上创建双向绑定的数据
它会根据控件类型自动选取正确的方法来更新元素
但是v-model本质上不过是语法糖
当我们的input 发生改变的时候,这里的message也会发生改变
可以写上一个@input事件
获取event.target.value
就会让我们这里的东西保持一样了
这里实现这样的一个东西的时候是分了两步去完成的
一个是数据的绑定,一个是通过input事件来进行model同步的更新
这里Vue给我们提供了一种数据双向绑定的指令
将数据进行绑定
v-model="数据"
就可以实现一个双向的绑定,其实就是语法糖的格式而已
这里只是给写了一个表达式而已,其他跟我们原理写的是一模一样的
这里的template 会被Vue 编译成VNode -> 生成VNode虚拟DOM
-> 浏览器的DOM(真实DOM)
事实上的v-model更加的复杂
可以自己创建自己的指令
在这里vue做了一个判断,当监听到会执行这样的一个参数
这里是vue文档中做的一个事情,这里只需要做一个了解就可以了
涉及到模板的一个指令
v-model 更加深层的一个原理
radio
使用radio选择性别
checkbox
select
需要绑定一个基本的html的值
这里有两个选择
绑定相同的值 gender数据 value值
select 里面有multiple 进行多选的操作,到时候就是数组类型了
select中的size是select 展开的高度
对于其他表单的绑定,一个是单选框,一个是多选框,绑定的v-model是一样的
但是value的值是不一样的
label 属性是为了增加用户的体验
讲完之后,保存一个视频
掌握v-model 用来绑定其他的表单
中间这里的baskteball 进行绑定,会在里面进行查看
后面会讲proxy 和 响应式相关的内容
如果这里有一个默认值的话,哪一个value值是orange,谁就会被选中
radio checkbox select option 的内容
使用axios进行网络请求的封装
每一个组件会监听自己的,其它的组件是不需要监听的
用来学习Vue的源码,组件变成真正的dom的过程
后面讲到浏览器的事件循环的时候会讲到,javascript编译的过程,再讲到js高级的时候会用到这些东西
在课堂中会有很多的细节
在真实的开发中,我们都是从后端来获取数据,通过v-for 进行一个遍历,也就是说这里的value的值都是进行一个动态绑定的
使用v-bind 绑定的就是值绑定
v-model也是可以跟着一个修饰符的
v-model 的修饰符
在这里发生改变的时候会进行一个修改
当输入框输入的时候会触发@input
就会立马触发这个事件
当我们进行提交的时候
当敲回车的时候触发这样的一个事件
v-model.lazy 这个是指令的一个修饰符
如果在v-model 后面加上lazy修饰符的话就会将input事件 重新变成 change事件
只有在提交(sumbit) 或者是 敲击回车的时候会进行触发
这里可以使用 typeof 来查看数据的类型
这里使用showType这样的一个东西
如果在这里输入东西了,会自动转变成string类型
只要默认情况下都会赋值成string类型的值
我们这里输入一个数字绑定到分数里面,判断一下是什么
逻辑判断中的隐式转换
javascript 会自动将string 类型的值 转换成数字类型的值进行判断
a,b,c 是转化不了的,逻辑判断时,可以转换的情况下会将string 类型的值转换成
nunmber类型的值
在input 输入的时候我们想要获取到一个number类型的值
这里可以使用了 parseInt() 方法,只会取到number类型的值
number的修饰符是将里面string类型的值转换成number类型的值
trim的修饰符
这里还是写上一个hello world
来使用showResult
在开发中避免用户在两边误输入一些空格,就会把两边的空格删除
v-model 在组件上面使用的时候会有一定的差异的
