vue问题记录

已于 2022-10-09 12:03:53 修改
阅读量403 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
于 2022-09-16 14:09:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36981190/article/details/126884059
版权
本文记录了Vue.js开发中遇到的问题，包括组件标题和跳转处理、Vuex数据丢失的解决方案、返回上一页的方法、Element UI Loading加载、页面缩略图生成、数组映射操作、参数传递、方法调用顺序、标题设置、组件样式冲突、可编辑表格实现以及表格排序、固定表头等技巧。同时也涉及到了jQuery的siblings()、position: sticky等CSS属性的使用。
摘要由CSDN通过智能技术生成

vue问题记录

1、组件header给各个页面的标题和不同的点击跳转

在这里插入图片描述
解决办法：菜单事件来触发，然后给标题和请前往后面的跳转路由赋值用的,to用变量来表示，数据用全局的变量来保存时，点击页面刷新会丢失数据，所以就用本地存储来保存数据，本地存储不能一下子存储多个变量，如果存储对象的话需要转成字符串。

2、vuex保存的数据，在页面刷新后就丢失了的解决方案

暂时解决方法：就是用本地保存保存在本地，以后可以好好研究下

3、vue返回上一页(后退)的几种方法与区别

可以参考该链接

4、加载中elementui 中Loading 加载

5、vue把这个页面整体的缩略图弄出来放在弹框里显示并进行拖拽和移动布局。

6、array.map((item,index) => {})的用法

7、页面的传参和接受参数

this. r o u t e r . p u s h 传参数和 t h i s . router.push传参数和this. rou

最低0.47元/天 解锁文章
雨中世界
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 获取元素下的所有div_vue获取dom元素高度的方法
weixin_39559277的博客
12-19 1770
获取高度：要在钩子mounted里面dom结构生成后去获取dom的高度，宽度，修改样式等操作！！！mounted() {let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //浏览器高度let topH = this.$refs.topInfo.offs...
Vue -- vue问题记录
Emily
12-24 211
1.路径：config/index.js，proxyTable里的参数"changeOrigin" 在proxyTable中有个参数是changeOrigin，如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了，当然这只适用于开发环境。 2.Vue.config.productionTip = false 开发环境下，Vue 会提供很多警告来帮你...
vue的组件通信，父子/子孙组件传参和方法调用
Change!
02-02 5399
vue父子传参，父子组件通信，子孙组件通信，
vue 孙子组件获取祖先组件数据
Bruce小鬼
11-14 1802
Provide/Inject非常简单，就像vue页面中使用的data对象一样，但是他与data也是有区别的。下面来介绍下他怎么使用，以及使用时遇到的问题。// 在provide定义一个name数据 provide() {return {return {info : "1号" , } } ,console . log("子组件获取祖先组件数据" , this . name) } } } < / script >
vue 祖孙组件通信， 祖组件获取孙组件数据
qing12313359的专栏
05-10 2452
祖组件： <select-itemselectFiled="tyreTreadWidth":width="70"v-on:selected="selectedTreadWidth":defaultVal="tyreTreadWidth"></select-item> 父组件： <c-select:items="lstItems":width="width"v-on="$listeners":selectVal="defaultVal">&lt...
vue踩坑记录之数组定义和赋值问题
12-29
问题场景：vue页面初始化展示请求后台返回的数据失败，没有报错 有效日期> type=daterange range-separator=至 start-placeholder=开始日期 end-placeholder=结束日期> data(){ return{ effective
Vue路由跳转问题记录详解
12-09
最近项目上需要用Vue用来做app，在Vue中使用路由时遇到下面的问题。 路由设置如下： { path:'/tab', component:Tab, children:[{ path:'layoutList', name:'LayoutList', component:LayoutList },{ path:'...
Vue 实现输入框新增搜索历史记录功能
10-16
在本文中，我们将深入探讨如何在Vue框架中实现一个搜索输入框功能，此功能将能够记录用户的搜索历史，并能够将这些历史记录显示给用户，同时提供清除历史记录的选项。为达成此功能，我们将采用一个名为good-storage...
Vue学习记录全家桶
11-03
Vue渐进式 优点 易用 灵活 高效 。 包含router，Vuex， vue-cli，element-ui
vue获取子组件元素
weixin_42349568的博客
02-02 7796
一，vue的this.children和this.children和this.children和this.parent this.$children中存放的是当前vue页面的所有子组件的数组集合。 每一个子组件中的数据和函数都可以被访问到。 例如： 子组件： <template> <div> <h3>这是子组件的内容</h3> <button @click="change">按钮触发事件</button
vue3 和vue2 使用ref操作dom、以及数组循环中的ref操作dom
weixin_43273755的博客
05-14 5658
vue3 在v-for中操作dom最佳实践 <template> <div class="rain"> <div v-for="(item, index) in 8" :key="index" :ref="el => rain[index] = el" :data-set=" 'data' + index" /> <div ref='single'></div> &lt
Vue的ref，父节点，获取子节点数据的一个手段
weixin_30908707的博客
09-07 1977
Vue 语法当中有一个 ref的参数，现在就就介绍一下使用方式，它的目的就是父节点，获取子节点数据的一个手段 首先我们这里有一个父节点father.vue，在这里我们定义了一个子节点child.vue，并且由父节点定义一个ref为childDatas，父节点需要获取子节点的值，就可以直接通过this.$refs.childDatas里面获取，换句话说，这个childDatas其实就是等于c...
vue --- > ref属性获取dom元素和子组件的方法
栗子好好吃的博客
09-04 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
vue的孙组件获取祖组件数据的方法
甜甜圆圆圈圈的博客
03-24 3288
项目中遇到一个问题，使用第三方插件的组件库会导致自己封装的组件库无法通过this.$parent.data获取父组件的数据（严格意义上讲这个父组件应该是祖级组件） 在无意尝试中发现使用在孙组件里使用this.$parent.$parent.data即可获取到祖级数据。 <template> <div id='detail'> <!-- 第三方框架封装的组件 ...
vue 获取元素下的所有div_在vue中获取dom元素内容的方法
weixin_39664995的博客
12-19 3863
这篇文章主要为大家详细介绍了在vue中获取dom元素内容的方法，具有一定的参考价值，可以用来参考一下。感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！在vue中可以通过给标签加ref属性，就可以在js中利用ref去引用它，从而操作该dom元素，以下是个例子，可以当做参考代码如下：DEMOexport default {data () {return {}},mounted () {th...
vue 获取元素下的所有div_Vue.js 如何获取子组件中的任意元素
weixin_39843698的博客
12-19 2153
如图，动态添加节点为一行文字和对应的input，input原本是隐藏的，点击文字之后显示input。之后我想让input获得焦点(focus)，但不知该如何恰当的获取这个input(不使用DOM操作)。代码如下：(html文件)Vue.component('test',{props:['item'],template:`{{item.text1}}`,methods:{show(event,ite...
Vue 如何获取到子组件中的元素
u011200562的博客
12-15 3093
场景：我们在组件A 中引入子组件B，B组件中又引入C组件。这是我们想要直接在A组件中，调用C组件的方法，这样怎么办呐？ 解决方案：B组件ref='B',c组件ref='C'. 我们在A组件中直接使用this.$refs.B.refs.C就可以获取到C组件的方法和属性 ...
Vue.js+find方法根据数据的一个值来查找到这个数据的全部值
热门推荐
xm_w_xm的博客
07-24 2万+
js中的find()方法 IE 11 及更早版本不支持 find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。 find() 方法为数组中的每个元素都调用一次函数执行： 当数组中的元素在测试条件时返回true时, find() 返回符合条件的元素，之后的值不会再调用执行函数。 如果没有符合条件的元素返回 undefined 注意:find() 对于空数组，函数是不会...
Element UI -- vue使用
weixin_43091563的博客
06-10 196
文章目录布局Container 布局容器Icon 图标 布局 Container 布局容器 <el-container>：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。 <el-header>：顶栏容器。 <el-aside>：侧边栏容器。 <el-main>：主要区域容器。 <el-footer>：底栏容器。 Icon 图标 提供了一套常用的图标集合 <i class="el-icon-delete"&
vue中记录日志到文件
最新发布
05-31
在Vue中记录日志到文件，可以通过使用Node.js的文件系统模块(fs)来实现。具体实现步骤如下： 1. 安装fs模块：在Vue项目根目录下打开终端，执行以下命令安装fs模块。 ``` npm install fs --save ``` 2. 在Vue项目中创建一个日志文件：在Vue项目的根目录下创建一个logs文件夹，并在该文件夹下创建一个名为“app.log”的日志文件。 3. 在Vue组件中引入fs模块：在需要记录日志的Vue组件中引入fs模块。 ```javascript const fs = require('fs'); ``` 4. 定义一个记录日志的方法：在Vue组件中定义一个方法，用于记录日志信息。在该方法中，使用fs.appendFile方法将日志信息追加写入到日志文件中。其中，第一个参数是日志文件的路径和文件名，第二个参数是要追加写入的日志信息，第三个参数是回调函数，用于处理写入完成后的操作。 ```javascript methods: { log(message) { const logMessage = `${new Date().toLocaleString()} - ${message}\n`; fs.appendFile('logs/app.log', logMessage, function(err) { if (err) { console.log(err); } else { console.log('日志记录成功！'); } }); } } ``` 5. 在需要记录日志的地方调用该方法：在需要记录日志的地方，调用上述定义的记录日志的方法，将需要记录的日志信息作为参数传递进去即可。 ```javascript this.log('这是一条日志信息'); ``` 这样就可以将日志信息记录到名为“app.log”的日志文件中了。需要注意的是，如果日志文件不存在，fs.appendFile方法会自动创建该文件。另外，需要确保日志文件所在的目录存在且有写入权限。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值