![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
vue相关的面试题、遇到的问题等
厨樱
所有文章均为解决实际工作中的问题后的记录,若有同样的办法未解决问题,请先查看问题原因是否相同,欢迎讨论。
展开
-
【js】JavaScript 对象的连续解构赋值
语法中,可以对对象进行解构赋值。另外,如果想给解构出的。转载 2024-03-28 21:57:35 · 137 阅读 · 0 评论 -
vue 项目报错 SyntaxError: Unterminated template
第二个红框内的script闭合标签提前将第一个script标签闭合导致。将一个script双标签作为字符串放在data函数中导致。所以需要将第二个红框的script闭合标签加上反斜杠。转载 2023-11-13 14:19:52 · 245 阅读 · 0 评论 -
vue-cli方式创建vue3工程
创建Vue3版本的工程,要求vue-cli最低版本4.5.0。原创 2023-10-30 15:43:59 · 104 阅读 · 0 评论 -
【vue】简洁优雅的火花线、趋势线
在github发现个好看易用的vue趋势线组件,特此记录。原创 2023-08-15 10:14:34 · 1232 阅读 · 0 评论 -
【vue】ES6+ 可选链操作符
在ES5上面的代码中,obj 是一个对象,在获取 obj 对象的属性 a 时,属性 a 没有被定义所以返回 undefined,第 3 行获取 obj 对象 a 下的 b,由于 obj 上没有 a 属性,再获取 a 上的 b 属性就会报错。一般这样的情况,在程序中需要做前置验证,大部分情况会借助&&来完成。上面的代码中第 2 行首先会判断obj.a的值,如果不为空则继续执行obj.a.b否则返回undefined。转载 2023-05-17 19:00:02 · 512 阅读 · 0 评论 -
Props中default用法及踩坑记录
简单的说就是在 props-default里面无法引用到 data的数据,所以修改的时候要把data数据复制到default处。同时也要注意用一个工厂函数去返回数组或者对象。用data中的变量,为props赋默认值,尝试多种方法都失败。父组件未向子组件传参数arrList的情况下,一直获取不到default的值。(注意事项已在注释中说明)原创 2023-04-12 17:46:19 · 1548 阅读 · 0 评论 -
import require加载时机不同
总结:import命令是编译阶段执行的,在代码运行之前,因此意味着被导入的模块会先运行,而导入模块的文件会后执行。require() 在运行代码时加载依赖项。转载 2023-04-03 18:44:02 · 152 阅读 · 0 评论 -
【vue】npm 切换淘宝镜像几种方式
npm 淘宝镜像 cnpm转载 2022-12-11 16:38:34 · 6500 阅读 · 3 评论 -
【vue】唯一id生成器nanoid
生成唯一id nanoid原创 2022-11-13 17:17:45 · 1087 阅读 · 0 评论 -
【vue】Vue中的数据代理
vue 数据代理 原码转载 2022-11-02 22:06:09 · 145 阅读 · 0 评论 -
【vue】v-model的修饰符
vue v-model 修饰符转载 2022-11-02 21:27:54 · 1063 阅读 · 0 评论 -
【vue】Vue中使用原生js创建元素样式不生效解决办法
vue js 动态创建对象 样式不生效转载 2022-11-02 09:38:36 · 1451 阅读 · 0 评论 -
es6中的模块化
es6 模块化 export improt转载 2022-10-25 14:15:48 · 222 阅读 · 0 评论 -
【vue】VueDraggable 子元素input选中文字会出现拖动
vuedraggable render jsx input选中文字 拖动转载 2022-07-28 17:10:21 · 1616 阅读 · 5 评论 -
【Vue】路由中引入组件Component的三种方式
vue 路由转载 2022-06-14 17:57:36 · 6394 阅读 · 0 评论 -
【vue】vue环境搭建过程中遇到的问题记录(持续记录)
vue 环境 问题记录原创 2022-06-12 20:24:03 · 120 阅读 · 0 评论 -
【vue】 截获 Ctrl+S 组合键以及自动保存(提交)功能的实现
默认情况下,Chrome 中按下 Ctrl+S 组合键会进入“保存网页”界面,并不会与网页中的具体内容做交互。最近在做一个前端基于 Vue 的在线文档,希望网页中按下 Ctrl+S 组合件就能触发提交动作,将前端数据的改动存储到后端数据库中。并且不管用户是否操作,每隔特定时间也会自动提交文档的当前内容到后端,实现自动保存的功能。示例代码如下:<template> <button @click="save('button')">保存</button>&转载 2022-04-26 09:42:58 · 1767 阅读 · 0 评论 -
【vue】vue-draggable自定义控制哪些元素取消拖拽
遇到的问题:在开发功能时,有很多个可以拖拽的元素,但是某些元素,需要取消拖拽功能,先打开弹框,输入数据,然后根据数据,再生成元素,需要在onMove方法中,根据元素判断,若需要取消拖拽功能,则return false即可,其他return true。之后在弹框点击确定按钮的事件中,再直接添加拖拽的元素。具体代码如下:<draggable class="components-draggable" :list="item.l原创 2022-04-20 16:47:09 · 2145 阅读 · 0 评论 -
【vue】父组件和子组件生命周期钩子函数执行顺序
踩坑记录:要传给子组件的变量this.id,由于在父组件的mounted中赋值,导致子组件获取到的值一直为空!需要在父组件的beforeMount中进行赋值,才能比子组件的mounted执行早一步,子组件才能取到值。Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分:加载渲染过程:父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 bef转载 2022-04-19 14:43:50 · 1108 阅读 · 0 评论 -
【VUE】el-upload组件的on-success在jsx里不触发
以上这种写法是不生效的,但是before-upload会生效!!!正确的写法是:大佬的文章解决了我折腾很久的问题,在JSX里写on-success不触发的问题,特此记录。转载 2022-04-18 18:41:10 · 3056 阅读 · 1 评论 -
【vue】vue中手动调用render函数进行data数据更新
for (let i = 0;i<that.list.length;i++){ if(that.list[i].id === e.target.dataset.id){ that.$forceUpdate(); that.list[i].total = 0 that.list[i].isChecked === 0 ? that.list[i].isChecked = 1 : that.list[i].isChecked = 0 .转载 2022-04-12 13:51:37 · 1983 阅读 · 0 评论 -
el-tree 拖拽到目标区域并传递数据
<template> <div class="container"> <aside> <el-tree :data="data" node-key="id" default-expand-all @node-drag-start="handleDragStart" draggable :allow-drop="allowDrop" .转载 2022-04-10 12:01:07 · 1306 阅读 · 6 评论 -
const {a,b,c} = obj es6解构赋值
es6原创 2022-03-30 10:39:39 · 916 阅读 · 0 评论 -
npm: Cannot read property ‘pickAlgorithm‘ of null
错误安装某 package 时,提示报错:npm ERR! Invalid response body while trying to fetchhttps://registry.npmjs.org/inherits:Cannot read property 'pickAlgorithm' of null环境win 10 npm v7.16.0 / v7.17.0 也复现解决清理缓存后再尝试安装npm cache clear --force...转载 2022-03-03 17:05:26 · 5777 阅读 · 0 评论 -
Vue 导入文件import、路径@和.的区别
***import:html文件中,通过script标签引入js文件。而vue中,通过import xxx from xxx路径的方式导入文件,不光可以导入js文件。“xxx”指的是为导入的文件起一个名称,不是指导入的文件的名称,相当于变量名。“xxx路径”指的是文件的相对路径.例如:在路由index.js中,导入apple.vue和banana.vueimport banana from '@/components/banana'import apple from '../co转载 2022-02-23 18:59:09 · 3145 阅读 · 0 评论 -
package.json 与 package-lock.json 的区别
前言现在前端越来越流行模块化开发,安装使用node和 npm 可以方便下载管理各个依赖模块。而描述模块信息的文件就是 package.json ,那么package-lock.json 又是什么,跟 package.json 有什么关系?本文将对该问题进行探索。一、package.json{ "name": "webpack-test", "version": "1.0.0", "description": "", "main": "index.js", "scri...转载 2022-02-23 18:53:43 · 688 阅读 · 0 评论 -
vue使用@路径引入,vue.config.js配置
项目中使用引入文件有时候路径比较深,需要使用"../../../xx.js"这种类似的路劲引入,这种方式比较笨,可以使用webpack的别名alias配置来解决。首先,先确定项目中是否有path模块:如果没有path模块需要先安装pathnpm install path --save以下为vue.config.js配置const path = require("path");function resolve(dir) { return path.join(__dirn转载 2022-02-23 18:48:31 · 2100 阅读 · 0 评论 -
【vue】vue-router钩子函数实现路由守卫
何为路由守卫?路由守卫有点类似于ajax的请求拦截器,就是请求发送之前先给你拦截住做一些事情之后再去发送请求,同样这里的路由守卫意思差不多;简单理解为就是你在进路由之前,首先把你拦住,对你进行检查;这是不是有点中学门口的保安?进来之前拦住,有学生证就进,没有学生证就不让进;当然,路由守卫不仅仅只是在你进入之前拦住你,还有其他的钩子函数进行其他操作;vue-router一共给我们提供了三大类钩子函数来实现路由守卫:1、全局钩子函数(beforeEach、afterEach)2、路由独享的钩子函数(bef转载 2021-07-03 19:51:42 · 267 阅读 · 0 评论 -
【vue】Vue路由获取路由参数
vue路由设置路由参数有2种方式:1.通过query配置:<router-link :to="{ name:'login',query:{id:1} }">登录</router-link>//通过query配置的路径显示如下:.html#/login?id=12.通过params配置:<router-link :to="{ name:'register',params:{'name':'San'} }">注册</router-link>转载 2021-07-03 12:53:17 · 30610 阅读 · 0 评论 -
【vue】vue+ES6处理数组:shift、unshift、map、filter、foreach、every、some、reduce、find、findIndex等方法
map()test(){ let arr=[0,1,2,3,4]; arr.map((val, idx) => { console.log(val+','+idx); }) },each()foreach()reduce()filter()test(){ let arr=[0,1,2,3,4]; let result = arr.filter(one => one>2);原创 2020-09-24 00:10:33 · 4500 阅读 · 3 评论 -
【vue】在map循环中return返回值一直返回空
btnClick(eleRef) { let result = this.test(); this.$alert(result); }, test(){ let flag = false; let arr=[{title:0},{title:1},{title:2},{title:3},{title:4}]; arr.map(one => { if(one.title == 2){ fla.原创 2020-09-22 22:52:11 · 3051 阅读 · 0 评论 -
【vue】el-input textarea高亮显示问题
element-ui vue textarea原创 2020-07-20 22:10:40 · 4060 阅读 · 5 评论 -
【vue】用$emit与$on来进行数据传输通信
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Vue2-单一事件管理组件通信</title> <script src="vue.js"></script> <script type="text/javascript">转载 2020-07-19 15:33:10 · 300 阅读 · 0 评论 -
【vue】常见的小错误
1. {{}}和v-html插入文本的区别<div id="app"> <div v-html="message"></div> <div>{{message}}</div></div> <script>new Vue({ el: '#app', data: { message: '<h1>教程</h1>' }})输出结果如下:v-html会原创 2020-07-16 14:12:22 · 331 阅读 · 0 评论 -
【vue】el-select 获取选中节点的对象
遇到的问题在获取el-select选中的节点数据同时,还需要获取自定义加入的一些节点属性,若采用v-model绑定的参数进行获取,仅能获取到label值,获取不到属性。解决办法在获取 el-select 选中节点的节点数据时, 需要 :value=“item” item 为对象, 那么 必须 绑定 value-key=“id”<el-select value-key="id" v-model="khzb" placeholder="请选择" @change="changeT转载 2020-07-13 23:00:36 · 2690 阅读 · 0 评论 -
【vue】钩子函数和回调函数的区别
一般认为,钩子函数就是回调函数的一种,其实还是有差异的,差异地方就是:触发的时机不同。先说钩子函数:钩子(Hook)概念源于Windows的消息处理机制,通过设置钩子,应用程序对所有消息事件进行拦截,然后执行钩子函数。let btn = document.getElementById("btn");btn.onclick = () => { console.log("i'm a hook");}上面的例子,在按钮点击时候立即执行钩子函数。而看下面的例子:btn.a.转载 2020-07-12 22:55:17 · 1022 阅读 · 0 评论 -
【vue】Vue中添加$alert的messageBox消息弹出框,进行换行、空格等html渲染
出现情况:在Vue中 $alert的messageBox 无法直接通过正则表达式进行来进行换行和缩进解决方式:dangerouslyUseHTMLString 是否将 message 属性作为 HTML 片段处理 boolean — falsethis.$alert('我需要</br>换行',{dangerouslyUseHTMLString:true})...转载 2020-06-21 17:16:18 · 7861 阅读 · 2 评论 -
【vue】npm run serve和npm run dev
1 问题有些工程中,运行npm run serve可以成功运行,有些工程中,却要运行npm run dev才能成功运行。2 原因其实 npm run dev 或者是 npm run serve 等 npm run xxx 并不是一定要这么写。npm run XXX是执行配置在 package.json 中的脚本,比如:"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build",原创 2020-06-15 21:23:06 · 4759 阅读 · 0 评论 -
【vue】Vue使用watch监听路由的变化
watch除了可以监听data中数据的变化,还可以监听路由的变化。 监听$route.path属性 watch:{ '$route.path':function(newVal,oldVal){ //console.log(newVal+"---"+oldVal); if(newVal === '/login'){ console.log('欢迎进入登录页面'); } else if(newVal === '/regist.转载 2021-07-03 10:05:24 · 1559 阅读 · 0 评论 -
【vue】修改props传进来的值
众所周知,vue是单向数据流,一般我们也不会在子组件里面修改父组件传进来的值,但总有需要修改的时候。前段时间一个项目中有遇到上述情况,假设我直接传进来一个list, 当时我直接在里面改了list,但是却惊讶的发现没有报错,以前好像有遇到直接修改抛出错误的,但这次却没有,当时也没有多想,最近空闲下来又想了下,发现自己确实**了(此处省略两字_)。原因如下:因为我传进来的list是个数组,属于引用类型,修改子组件相当于把父组件也同时修改了,所以没有报错,如果是个基本类型的数据直接修改那么vue会报错。转载 2021-07-01 00:11:24 · 6169 阅读 · 0 评论