• 【Vue学习笔记】(1)问题及解决方法记录


    1、父组件传递 props 到子组件过程中,报错或者没有值。
    参考链接:http://www.jb51.net/article/117447.htm

    2、vue工程项目中style设置background-image路径问题:
    使用

    <li v-for="img in imgs" :key="img.id" class="" :style="'background-image:url('+  img +')'"></li>
    imgs:[
          require('./../assets/banner_top2.png'),
          require('./../assets/banner_top3.png'),
          require('./../assets/banner_top4.png')
        ]

    3、刷新页面,vuex中全局变量state不能保存原有的数据,需要在给vuex中state赋值的同时,通过localStorage存储来代替。因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。

    4、router-link中如果绑定了跳转路径:to,就不能添加click事件,不会执行。
    - 解决办法:不用router-link直接使用a标签+@click事件,并在点击事件中添加this.$router.push来进行路由的跳转

    5、子页面需要绑定后台数据到视图,获取数据函数传入参数需要从父级页面得到时。
    - 解决方法:在父页面获取到数据后,保存在vuex中,在子页面的computed中获取得到数据即可。(页面刷新问题可看4)

    6、父组件传递props异步数据到子组件,先获取数据,再加载子组件,用v-if绑定子组件,初始设置为false,然后再mounted钩子函数最后将值改为true,加载子组件。或者使用watch监听子组件加载。

    7、子组件中用Echarts画图,图表数据从后台获取:

    - 用上述方法,即使在父页面提前获取数据,仍然报错;仍然无法保证页面绘制图表时,数据已经获取到;
    - 解决措施:在mounted钩子函数中获取数据,然后将图表绘制步骤放置到$http.get()方法的回调函数中,在正确获取到数据后再进行图表绘制,在computed中返回对应参数;

    8、在@click事件中有个默认参数but($event,this),可以获取当前点击元素进行修改。
     
    event.target.style.backgroundColor = 'red'.

    9、页面刷新,vuex保存的数据消失的问题,除了将上级传入数据放到localStorage,或者用props传递参数。

    10、 一般项目中,一个相对独立的模块如果引入vue用的话,
    - 如果是单独的一个router-cli建立的工程,除了用url引入。
    - 如果是直接在项目中嵌入,就在模块入口用新建vue实例,CDN方法引入vue。

    11、 一个vue项目,vuex进行模块化管理,即除了根 store 以外,还通过 module 将各组件的 store 分开管理。或者每一个组件建立新的vuex文件存储。
     
    12、页面刷新,若模板更新过多,出现很强烈的过度效果,可能是使用v-if的原因,可以用v-show代替。

     
  • 相关阅读:
    数据库的优化
    phpcms网站搬家 至 服务器 完整并且详细过程
    phpcms网页替换验证码功能 及 搜索功能
    用phpcms切换中英文网页的方法(不用解析二级域名)、phpcms完成pc和手机端切换(同一域名)
    php判断手机段登录,以及phpcms手机PC双模板调用
    搭建php环境
    TP引用样式表和js文件及验证码
    TP父类及模板继承
    TP增删改
    单例模式
  • 原文地址:https://www.cnblogs.com/qiuyueding/p/8656376.html
Copyright © 2020-2023  润新知