当前位置: 首页 > Web前端 > HTML5

优秀的程序员分享一些Vue的小技巧

时间:2023-04-05 21:16:37 HTML5

  .test{  background:blue;  height:100px;  width:100px;  }  .testAdd{  background:red;  height:100px;  width:100px;  }  优秀的程序员分享一些Vue的小技巧。前言:用Vue开发网页并不难,但是经常会遇到一些问题。其实大部分问题都在文档中提到过,不然我们也可以通过Google成功搜索到问题的答案。为了帮助小伙伴们提前踩坑,遇到问题的时候,心里大概有个谱,知道怎么解决问题。这篇文章就是把我知道的一些小技巧分享给大家,希望大家看完这篇文章后有所收获。  文章内容概要:  组件样式scoped  Vue数组/对象更新视图不??更新  vue过滤器使用  列表渲染涉及  深度观察和观察立即触发回调  这些情况,不要使用箭头函数  路由懒加载的写法  路由项目启动页和404页面  Vue调试神器:vue-devtools  componentstylescoped:  problem:组件中用js动态创建的dom,添加的样式不生效。  场景:        .test{  background:blue;  height:100px;  width:100px;  }  .testAdd{  background:red;  height:100px;  width:100px;  }    Result:  //测试生效testAdd不生效  

  .test[data-v-1b971ada]{//注意data-v-1b971ada  background:blue;  height:100px;  width:100px;  }  原因:  当