20240118

vscode快捷键,网上居然会找不到?找到的还是错的,我瞎按按出来了。

回到上次编辑代码处 alt 方向键左           右也可以,作用相反

搜索功能的坑

实际上,搜索功能要传给后台的参数,一般和我们通过接口请求后台数据的参数是一致的,只有一些是进行了一点转换,所以我们定义的请求数据的变量,可以直接通过v-model这个指令直接和搜索的input进行绑定,然后我在记忆el-select,el-option的时候,我在想为啥这些要用各种各样的属性,比如el-select用v-model来绑定请求接口参数的某个数据,这里与input相同,v-model是最终存储到这里面的值,比如v-model="params.status",那么如果这个在select上面,意思就是把option选定的值存储到params.status这个变量里面。也就是v-model,我们把他理解为最终存储的容器就好,至于怎么选择,怎么映射,这个是option的操作,也就是说这些操作和v-model无关,我们只需要知道按照规则,哪种数据才会被存储到v-model里面即可。

然后就是option的规则,这个东西没有直接绑定数据,而是通过v-for来进行遍历,遍历后将每一条数据的label和value进行使用,这里我在想为什么这里是value,记得el-form使用数据是通过:model,el-table使用数据是通过:data,然后那些控件是通过prop来使用数据的(这里对于"使用数据"的描述和定义不准确)也就是说现在有两种可能性,一种是从最外层元素,如form,table中绑定数据是通过prop,另一种可能性则是涉及到和后台交互后取到的数据,才是通过prop。无论哪一种

经过我这段时间的理解,我觉得其实prop就是和model进行关联的,仅此而已,而为什么elementUI官网说后台的数据会通过prop来显示,因为官网要求我们将后台数据和model进行关联。所以才有了prop显示后台的数据。

目前都可以和option通过value来使用数据进行区分。

所以prop和value能够区分的原因是prop和model相关联,而:model,:datav还有value也好,label也好,v-model这种指令也好,这些的数据基本上都直接和我们定义到组件的data中的相关联,有的则是通过v-for来关联,所以这些多半都会带上点比如params.username之类的。(解释的不够好。)

后续我会继续观察elementUI对于各种属性的用法,从而通过我自己的视角来看看创作者是怎么想的。

目前的结论

v-model  是用来存储结果值的

label  是用来展示文字的

:model  是form的

这里其实还可以加一个,:rules,免得老是忘记,这个用来做表单校验的。

:data  是table的

然后我最近对于elementUI中哪些属性取值是对象,哪些属性取值是数组的一点小感悟,以后会根据我遇到的情况来进行修改。

:model是对象,:data是数组,:rules是对象

观察这上面这仨,可以发现,取值是对象,往往是因为其不如数组那样,全是相同规律的,比如rules,:rules会存在一个字段有多个规则的情形,如果设计成下面这种,起名为数组1

[{

xx:[{},{}],

yy:[{}]

}]

这样的形式,可以发现外层的数组是完全不需要的,

如果设计成下面这个起名为数组2

[{

x:[{},{}]

},

{

y:[{}]

}],这样的形式,好像写起来比下面的麻烦些,目前见识少,没见过这种写法,但是不代表不存在。

下面这种起名为对象1

{

x:[{},{}],

y:[{}]

}

目前我唯一能让我自己记住的理解就是数组更倾向于包裹相同规则的比如下面这个起名为数组3

[{label:xx,value:yy},{label:aa,value:bb}]

,感觉更多见到是包裹这样的对象而不是上面数组1和2那种对象。因为上面数组1和2那种对象有不重名的属性x和y,而label和value这种会一直重名的属性,且是有规律的,感觉用数组包裹起来更合理也合适。如果写成下面这种起名为对象3

{x:{label:xx,value:yy},y:{label:aa,value:bb}}这样的感觉不如写成数组3。

总结一下

感觉数组和对象更合理的写法如下:

[{label:xx,value:yy},{label:aa,value:bb}]和

{x:[{},{}],y:[{}]}

反正这是我目前总结来的心得,多观察多理解吧,以后遇到某些数据,希望能条件反射的在脑子里就把数据的结构给处理好了,包括以后遇到一些他人定义的方法,希望能够反应过来数据的样子应该是啥样的。

ps:如果大家有个人的看法,请指教,或者说沟通。

  • 9
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值