1. (vue2.x以上,1.x没有问题)vue和jq一起使用的冲突:在使用了v-bind: class的元素上,当vue和jq都需要增改class时,用jq加的属性可能无效。

原因:当数据的布尔值改变后(比如某个class需要加上),由于vue是在本次事件轮结束后更新DOM或改变属性,而jq的addClass是同步的,所以jq加上的类名会被vue覆盖。

解决方案:将jq的addClass写在Vue的nextTick里

2. 局部的components和路由的component分开放,路由的放在视图view文件夹里

3. v-show 只是在绑定值为false时加上display:none 在true时移出,而不会加上display:block 所以如果单独在css里写了display:none 即使这个元素v-show为true也是显示不出来的

4.vue做侧栏导航,用锚点实现,点击时切换active样式,当active = index直接写在模板的@click中时,导致锚点出bug,换成this.active = index 或者换成在method里写就没问题。(???不明原因)

5. 当路由切换时,vue组件及对应的数据会被就地销毁,*注意:如果vm的data里引用的是一个对象,而这个对象定义在vue的option对象外,将会形成闭包,将这个数据对象缓存起来,即使切换到别的页面,当再切换回来时,vue再次加载组件,还可以引用之前的数据对象(保留之前的所有状态)

eg.

//闭包中的data,即使vue实例被销毁它也不会消失

var data = {.....}

//vue option对象

export default {

  data() {

  return {

    data: data

    }

  }

}

一般来说,这样是弊大于利,虽然利于保存一些状态,但增加了污染的可能性。尤其是当页面中复用了好几个组件时,data将是共享状态的,容易出问题。

vue的坑的更多相关文章

  1. Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...

  2. Vue 爬坑之路(九)—— 用正确的姿势封装组件

    迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...

  3. vue踩坑记

    vue踩坑记 易错点 语法好难啊qwq 不要把'data'写成'date' 在v-html/v-bind中使用vue变量时不需要加变量名 在非vue事件中使用vue中变量时需要加变量名 正确 < ...

  4. Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...

  5. Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目

    Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vu ...

  6. Vue入坑教程(二)——项目结构详情介绍

    之前已经介绍了关于Vue的脚手架vue-cli的安装,以及一些文件目录介绍.具体可以查看<vue 入坑教程(一)--搭建vue-cli脚手架> 下面简单说一下具体的文件介绍 (一) pac ...

  7. vue踩坑之旅 -- computed watch

    vue踩坑之旅 -- computed watch 经常在使用vue初始化组件时,会报一些莫名其妙的错误,或者,数据明明有数据,确还是拿不到,这是多么痛苦而又令人忍不住抓耳挠腮,捶胸顿足啊 技术点 v ...

  8. Vue入坑第一篇

    写在前面的话:文章是个人学习过程中的总结,为方便以后回头在学习.文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. 一.前言 本篇作为vue入门的一 ...

  9. Vue入坑日记: day - 01

    前言 最近做了一些小项目,小组里写前端的确实有点拉胯,于是自己动手写前端,因为大一学过web前端基础,所以对HTML,CSS还有印象,就直接对JS下手了,学了两天把JS大致搞明白了,顺便对JQuery ...

  10. 『vue踩坑日常』 在index.html中引入静态文件不生效

    Vue日常踩坑日常 -- 在index.html中引入静态文件不生效问题 本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted ...

随机推荐

  1. 原生js实现ajax用于简单的签到或登录

    <script> function createStandardXHR() {     try {         return new window.XMLHttpRequest(); ...

  2. ASP.NET MVC中有四种过滤器类型

    在ASP.NET MVC中有四种过滤器类型

  3. Java基础语法 第1节 Java语言发展和JDK安装

    一.Java发展历程 1995年5月23日,Java语言诞生: 1996年1月,第一个JDK-JDK1.0诞生: 1996年4月,10个最主要的操作系统供应商申明将在其产品中嵌入Java技术: 199 ...

  4. leftJoin鏈錶查詢

    //待使用券碼 $code_record_no = DB::table('fook_platform_order as a') ->select('o.code','o.apportion_bi ...

  5. 推荐四款 Bug 管理系统,最适合你的才是最好的!

    转载自:https://www.jianshu.com/p/e7d3121eaaec   在这个移动互联网的时代,每天都会涌入大量新的 App,想要留住你的用户,必须时刻保持产品创新与系统的稳定.对于 ...

  6. Sql语句的优化摘要

    1.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索引而进行全表扫描. 2.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉 ...

  7. java面试题002

    1.判断下列代码的运行情况 public class TestExtends { public static void main(String[] args) { Father obj = new S ...

  8. skype在线状态代码详解

    前不久微软宣布了MSN并入skype的消息,这么一来面向海外客户的同学除了选择客服系统之外,在页面上添加一个skype聊天按钮也是很不错的噢,它添加方便.功能强大.而且可以判断出客户是否安装了skyp ...

  9. SPI Flash Memory 芯片手册阅读

    SPI Flash Memory 芯片手册阅读 信息来源

  10. java小程序(课堂作业03)

    使用类的静态字段和构造函数,我们可以跟踪某个类所创建对象的个数.请写一个类,在任何时候都可以向它查询“你已经创建了多少个对象?”. 思路:因为静态初始化块只运行一次,是一个很好的记录次数的方法,定义一 ...