脚本宝典收集整理的这篇文章主要介绍了

vue全家桶填坑之路

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

近些日子上手vue全家桶,深感自己的知识水平浅薄,在摸索之中记录了我遇到的一些问题的解决方法。

场景:表单需要打开新页面修改参数返回保存数据

这个一开始我就想利用vuex的store存储到state之中就大功告成了。
然而发现事情并没有那么简单,自己原来的js写法是利用oninput事件进行记录用户输入的内容。但是兼容性并不是特别好。
几天前搜索的时候发现了一个更好的方法:
先提取store中的数据传给computed计算属性,然后再把这个值传给v-model用于表单的数据绑定,最后再为这个计算属性增加一个setter,在表单数据变化的时候对值进行commit提交,从而达到数据的实时更新的效果。
参考问答:请问vue的html标签可以用v-model来改变store中的state吗?

refs的一些应用场景

在vue之中因为vm.$el的存在就可以利用ref替代原来的dom操作了。
但是有些情况refs还是会出现问题的。
首先不要再mounted钩子之前调用,这样的话因为要获取的对象并没有挂载到实例上而导致失败。
另外还有一种情况就是,不要在响应式的渲染之中(个人的失败经历:条件渲染v-if和循环v-for)使用获取ref注册的元素或组件。
虽然在控制台之中可以看到this.$refs包含了你要获取的对象,但是你在实际调用之中会获取失败。
这也是在vue官方文档里进行了说明:

关于ref注册时间的重要说明: 因为ref本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs 也不是响应式的,因此你不应该试图用它在模版中做数据绑定。

对于这种情况我们可以有以下两种方法进行变通处理:

  1. 直接为元素添加id通过原始dom进行操作处理

  2. 通过nextTick进行渲染后的refs获取,这样就不会出现获取失败的情况。
    对于nextTick的官方说明如下

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM

总结

以上是脚本宝典为你收集整理的

vue全家桶填坑之路

全部内容,希望文章能够帮你解决

vue全家桶填坑之路

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过