前言
用Vue开发一个网页并不难,但是也经常会遇到一些问题,其实大部分的问题都在文档中有所提及,再不然我们通过谷歌也能成功搜索到问题的答案,为了帮助小伙伴们提前踩坑,在遇到问题的时候,心里大概有个谱知道该如何去解决问题。这篇文章是将自己知道的一些小技巧,结合查阅资料整理成的一篇文章,如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。
个人博客了解一下:
文章内容总结:
- 组件style的scoped
- Vue 数组/对象更新 视图不更新
- vue filters 过滤器的使用
- 列表渲染相关
- 深度watch与watch立即触发回调
- 这些情况下不要使用箭头函数
- 路由懒加载写法
- 路由的项目启动页和404页面
- Vue调试神器:vue-devtools
组件style的scoped:
问题:在组件中用js动态创建的dom,添加样式不生效。
场景:
复制代码
结果:
// test生效 testAdd 不生效.test[data-v-1b971ada]{ // 注意data-v-1b971ada background:blue; height:100px; width:100px;}复制代码
原因:
当 <style>
标签有 属性时,它的 CSS 只作用于当前组件中的元素。
它会为组件中所有的标签和class样式添加一个scoped
标识,就像上面结果中的data-v-1b971ada
。
所以原因就很清楚了:因为动态添加的dom没有scoped
添加的标识,没有跟testAdd
的样式匹配起来,导致样式失效。