博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
你或许不知道Vue的这些小技巧
阅读量:6035 次
发布时间:2019-06-20

本文共 773 字,大约阅读时间需要 2 分钟。

hot3.png

前言

用Vue开发一个网页并不难,但是也经常会遇到一些问题,其实大部分的问题都在文档中有所提及,再不然我们通过谷歌也能成功搜索到问题的答案,为了帮助小伙伴们提前踩坑,在遇到问题的时候,心里大概有个谱知道该如何去解决问题。这篇文章是将自己知道的一些小技巧,结合查阅资料整理成的一篇文章,如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。

个人博客了解一下:

文章内容总结:

  1. 组件style的scoped
  2. Vue 数组/对象更新 视图不更新
  3. vue filters 过滤器的使用
  4. 列表渲染相关
  5. 深度watch与watch立即触发回调
  6. 这些情况下不要使用箭头函数
  7. 路由懒加载写法
  8. 路由的项目启动页和404页面
  9. 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的样式匹配起来,导致样式失效。

转载于:https://my.oschina.net/u/3611008/blog/1845261

你可能感兴趣的文章
SharePoint 2010 上下左右求和
查看>>
J_Knight_ iOS 高级面试题 实战题解答以及一些扩展性链接
查看>>
使用php mongodb扩展时比较需要注意的事项
查看>>
AMQP的安装
查看>>
C语言小知识,摘自o'reilly著C程序设计新思维,人民邮电出版社
查看>>
深入详解SQL中的Null
查看>>
《转》完美解决微信video视频隐藏控件和内联播放问题
查看>>
AngularJs工具方法
查看>>
Django的模板系统
查看>>
jQuery自动触发事件
查看>>
跑步书籍推荐 --- 跑步指南
查看>>
1199 Problem B: 大小关系
查看>>
Elasticsearch 优化
查看>>
20145237《Java程序设计》第一周学习总结
查看>>
关于写东西
查看>>
bzoj1565【NOI2009】植物大战僵尸(最小割)
查看>>
iphone-common-codes-ccteam源代码 CCDelete.h
查看>>
详解java定时任务
查看>>
Servlet 读取web.xml文件中的配置参数连接数据库
查看>>
For each循环中使用remove方法。
查看>>