【Vue学习笔记】问题及解决方法记录

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存储来代替。

4、router-link中如果绑定了跳转路径:to,就不能添加click事件,不会执行。

- 解决办法:不用router-link直接使用a标签[email protected]事件,并在点击事件中添加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代替。

原文地址:https://www.cnblogs.com/qiuyueding/p/8656376.html

时间: 2024-11-08 11:51:52

【Vue学习笔记】问题及解决方法记录的相关文章

vue学习笔记4--实例和方法

github地址:https://github.com/lily1010/vue_learn/tree/master/lesson03 一 实例 每个 Vue 实例都会代理其 data 对象里所有的属性,改变data,vue实例同时改变,当然改变vue实例,data也同时改变,即   vue实例<=>data <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

vue学习笔记之属性和方法

每个Vue都会代理其data对象里所有的属性:只有这些被代理的属性是响应的.如果在实例创建之后添加新的属性到实例上,它不会触发视图更新.例子: 1 <script type="text/javascript"> 2 var data = { a:1 }; 3 var vm = new Vue({ 4 data:data 5 }) 6 vm.a = 2; 7 console.log(data.a); //2 8 console.log(vm.a === data.a); //

Vue学习笔记进阶篇——列表过渡及其他

本文为转载,原文:Vue学习笔记进阶篇--列表过渡及其他本文将介绍Vue中的列表过渡,动态过渡, 以及可复用过渡是实现. 列表过渡 目前为止,关于过渡我们已经讲到: 单个节点 同一时间渲染多个节点中的一个 那么怎么同时渲染整个列表,比如使用 v-for ?在这种场景中,使用 <transition-group>组件.在我们深入例子之前,先了解关于这个组件的几个特点: 不同于 <transition>, 它会以一个真实元素呈现:默认为一个<span>.你也可以通过 tag

Vue学习笔记进阶篇——多元素及多组件过渡

本文为转载,原文:Vue学习笔记进阶篇--多元素及多组件过渡 多元素的过渡 对于原生标签可以使用 v-if/v-else.但是有一点需要注意: 当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们,否则 Vue 为了效率只会替换相同标签内部的内容.即使在技术上没有必要,给在 <transition> 组件中的多个元素设置 key 是一个更好的实践. 示例: <transition> <button v-if="isEditing

Vue学习笔记入门篇——组件的使用

本文为转载,原文:Vue学习笔记入门篇--组件的使用 组件定义 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件使用 注册 注册一个全局组件,你可以使用 Vue.component(tagName, options).组件在注册之后,便可以在父实例的模块中以自定义元素 的形式使用.

Vue学习笔记入门篇——组件的内容分发(slot)

本文为转载,原文:Vue学习笔记入门篇--组件的内容分发(slot) 介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ messa

Vue学习笔记进阶篇——Render函数

本文为转载,原文:Vue学习笔记进阶篇--Render函数 基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器. <h1> <a name="hello-world" href="#hello-world"> Hello world! </a> </h1>

《Python基础教程(第二版)》学习笔记 -&gt; 第九章 魔法方法、属性和迭代器

准备工作 >>> class NewStyle(object): more_code_here >>> class OldStyle: more_code_here 在这两个类中,NewStyle是新式的类,OldStyle是旧式的类,如果文件以__metaclass__ = type 开始,那么两个类都是新式类. 构造方法 构造方法,当一个对象被创建后,会立即调用构造方法.Python中创建一个构造方法,只要把init方法的名字从简单的init修改成__init__

MySQL学习笔记-操作数据表中的记录

MySQL学习笔记-操作数据表中的记录 1.插入记录 INSERT INSERT [INTO] tbl_name [(col_name,...)] {VAULES|VALUE} ({expr|DEFAULT},...),(...),... 例,插入单条记录: mysql> USE testDatabase changed mysql> CREATE TABLE users(    -> id SMALLINT UNSIGNED AUTO_INCREMENT PRIMARY KEY,   

树莓派学习笔记——Python SQLite插入温度记录

0 前言 本文使用python向SQLite数据库中插入树莓派温度数据,SQLite数据库中包含一张只包含三个字段的记录表--参数名称,时间和温度值.本文重点解释Python操作SQlite的具体方法,由于网上资料众多,重复部分不再复述只做到具体情况具体分析. [相关博文] [树莓派学习笔记--索引博文]--更多博文请关注. [树莓派学习笔记--获取树莓派CPU温度] [树莓派学习笔记--定时向yeelink上传树莓派CPU温度] [树莓派学习笔记--SQLite操作简述] 1 创建数据库和空表