vue坑之宝库（持续更新）

使用fastclick 直接外部引入初始化，在手机模式下会报错Cannot read property 'style' of null；还是要npm下载后再import

npm install fastclick --save-dev

import FastClick from 'fastclick'
FastClick.attach(document.body);

fastclick.js移动端WEB开发，click,touch,tap事件浅析

created：在实例创建完成后执行的钩子
mounted：编译好的HTML挂载到页面完成后执行的事件钩子
它们的共同点是仅在Vue初始化时执行一次。
Vue中可以直接调用JS的方法。但如果要调用 Vue中的 methods 中定义的方法就会绕一点，需要使用 this.$options.methods.MethodName();
css里面的背景图片就会转成base64，html中的img图片就没转
vue props传Array/Object类型值，子组件报错解决办法

  default:function(){
        return [];//或者是return {}
    }

vue awesome swiper异步加载数据出现的bug问题
加载数据之后再把轮播show出来
解决vue-cli项目无法用本机IP访问的问题
ip改为0.0.0.0就能用自己ip访问了


vue中父组件传值给子组件，父组件值改变，子组件不能重新渲染
https://blog.csdn.net/qq_39692513/article/details/80791458

Vue父组件向子组件传递一个动态的值，子组件如何保持实时更新实时更新？
https://blog.csdn.net/zhouweixue_vivi/article/details/78550738
没用
    watch: {
            broadcastData: {　　　　
                handler(newValue, oldValue) {　　　　　　
                    for(let i = 0; i < newValue.length; i++) {　　　　　　　　
                        if(oldValue[i] != newValue[i]) {　　　　　　　　　　
                            console.log(newValue)　　　　　　　　
                        }　　　　　　
                    }　　　　
                },
        　　　　deep: true　　
            }
        },


Vue 父组件ajax异步更新数据，子组件props获取不到
https://blog.csdn.net/d295968572/article/details/80810349
用长度来判断组件是否显示
暂时先用这个方法，再来研究

再就是vue父组件点击触发子组件事件（https://blog.csdn.net/xiaozhuyirena/article/details/75126177）

通过  ref="child" this.$refs.child.upDate(data) 将数据传过去再加载子组件列表
感觉这个更方便额 不用props 父组件都不用再加个变量了

点击按钮路由跳转，有时出现Loading chunk 6 failed. 再点一下才跳转
据说是运营商的劫持问题
在Vue中详细介绍$attrs属性
主要是要解决多层组件的传值，感觉可以就用vuex呗
this.route的区别

1. this.$router：

   表示全局路由器对象，项目中通过router路由参数注入路由之后，在任何一个页面都可以通过此方法获取到路由器对象，并调用其push(), go()等方法；

2. this.$route:

   表示当前正在用于跳转的路由器对象，可以调用其name、path、query、params等方法；

同一个component两个页面切换时并不会触发vue的created

我创建和编辑的页面使用的是同一个component,  
默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子，  
官方说你可以通过watch $route的变化来做处理，但其实说真的还是蛮麻烦的。  
后来发现其实可以简单的在 router-view上加上一个唯一的key，
来保证路由切换时都会重新渲染触发钩子了。这样简单的多了。



computed: {
   key() {
       return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
   }
}

作者：花裤衩
链接：https://juejin.im/post/59097cd7a22b9d0065fb61d2
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

组件报错 did you register the component correctly?...

不是啥不能用大写，就是输入组件名turnplateEntry后直接按table生成标签的时候都变成小写了turnplateentry，，蛋疼

过渡效果



包住要过渡效果的代码或是组件

在common.css里面加上样式，所有地方都能用
.fade-enter-active,
.fade-leave-active {
   transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
   opacity: 0;
}

多个click事件 @click="a();b()"，不能写多个@click
公共方法

Vue.prototype.aaa = function(){
    
};

可以用一个commonjs来放，然后统一挂载
//公共方法，调用方法，this.$comjs.xxx
import comJs from '@/utils/common'
Vue.prototype.$comjs = comJs;

19.监听store中的数据变化

vuex中的state在组件中如何监听？

用computed计算属性与watch

computed: {
   getGameNo() {
       return this.$store.getters.popLogin.gameNo
   }
},
watch: {
   getGameNo(val) {
       this.myGameNo = val;
   }
},

this.$route.query.token 会获取到url上所有的token，两个的话就会以逗号分隔token1，token2；导致在请求的时候，传入的token参数，会变成

token[0]: 35385ac93a8d4fadbe5e671d0a2dcf6d
token[1]: 35385ac93a8d4fadbe5e671d0a2dcf6d

导致接口返回出错；

http.params('token')则获取的是第一个token；
出现两个token的原因是qq等第三方登录后，返回的链接会在后面加上token，再在这个页面用第三方登录的话就又在后面加上了token
解决办法：第三方登录时传入的url过滤掉token

组件里面有请求，如果v-if写在组件内，则组件没显示也会请求；v-if写在父级内，则只有组价显示的时候再请求，也就是v-if写在组件内，组件未显示也会加载，并且每次组件隐藏后的显示都会触发created等
linux 区分大小写，import的时候要注意大小写
事件修饰符

.stop
.prevent
.capture
.self
.once
.passive



...

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

动态设置元素高度，用:style,有计算的话，不能写在data里面，要写在computed






data() {
    return {
        showLevel: true,
        level: 9,
        progress:'50%'
        
    }
},
computed: {
    levelNowStyle() {
        return {
            'height': this.level + .9 - 1 + 'rem'
        }
    }
},

25.js加载本地图片再设置到img上，为了在获取不到用户图片的时候显示本地的默认图片
Vue.js中的图片引用路径

方法一
import defaultAvatar from '@/assets/images/defaultAvatar.png'
data() {
    return {
        defaultAvatar:defaultAvatar

    }
}

或是加判断


有没有更简便的方法？

方法二
放到static里面引入，assets里面的会被构建，static里面的则是原封不动放过去
data里面 imgUrl ： '../../static/logo.png'

或是加判断

vue 插件与组件的区别。插件还要用vue.use来注册

简单来说，插件就是指对Vue的功能的增强或补充。
比如说，让你在每个单页面的组件里，都可以调用某个方法，或者共享使用某个变量，或者在某个方法之前执行一段代码等
你也可以写一个插件，在Vue原型上扩展方法，要实现这个需求绝对没法写成组件。

如我要写一个每个页面都可能出现的弹窗，使用组件还是插件。
现在是组件，要在app.vue中加上login这个标签，要不就用插件的方式试试，再理解，插件也是要加上标签呀
插件通常会为 Vue 添加全局功能。官网有这句话

Vue style里面使用@import引入外部css, 作用域是全局的解决方案,未测试
在vue文件style中引入less不能用@符号作为路径要用../