vue-个人杂记第2页

Vue-路由-编程式导航

1.path路径跳转传参1.1query传参方式一：//不传参this.$router.push('路由路径')//如：//this.$router.push('/search')//传参this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')方式二：//不传参this.$router.push({path:'路由路径'})//如：//this.$router.pus

盖盖衍上·2024-01-15 09:00

Vue-路由-声明式导航

1.导航链接vue-router提供了一个全局组件router-link(取代a标签)能跳转，配置to属性指定路径(必须)。本质还是a标签，to无需#能高亮，默认就会提供高亮类名，可以直接设置高亮样式如：发现音乐我的音乐朋友2.高亮的两个类名我们发现router-link自动给当前导航添加了两个高亮类名router-link-active：模糊匹配(用的多)to=“/my”可以匹配/my/my/a

盖盖衍上·2024-01-15 09:27

[Vue.js] 捕捉用户键盘输入事件

Vue-我的学习varvm=newVue({el:"#app",methods:{logSpace:function(){console.log("捕捉到用户输入SPACE!");}}})

大写K·2024-01-15 00:31

vue-入门篇

1.目标了解什么是VUE2.vue基础2.1概述官网：https://cn.vuejs.org/Vue.js是一套构建用户界面的渐进式框架。Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue生态系统支持的库结合使用时，Vue也完全能够为复杂的单页应用程序提供驱动。(SPA单页面应用，所有的显示都在一个页面当

我是菜鸟ddd·2024-01-14 13:47

系统性学习vue-组件及脚手架

书接上文Vue组件及脚手架初始化脚手架说明步骤分析脚手架结构render函数修改默认配置ref属性props配置mixin混入/混合定义混合局部混合全局混合插件scoped样式安装less-loader浏览器的本地存储webStoragelocalStroage本地存储sessionStorage会话存储组件自定义事件绑定解绑组件绑定原生事件全局事件总线GlobalEventBus安装绑定事件接收

aqiu~·2024-01-13 10:50

Vue-插槽（Slots）

1.介绍在Vue.js中，插槽是一种强大的功能，它允许你创建可重用的模板，并在使用该模板的多个地方插入自定义内容。插槽为你提供了一种方式，可以在父组件中定义一些“插槽”，然后在子组件中使用这些插槽，插入自己的内容。2.插槽的分类2.1默认插槽（DefaultSlots）这是最常见的插槽类型。如果你在一个组件模板中定义一个slot素，那么这个元素将被视为默认插槽的内容。使用场景：只需要传入一个结构案

盖盖衍上·2024-01-13 08:57

Vue-根据角色获取菜单动态添加路由

文章目录前提提要需求分析具体实现配置静态路由路由权限判断登录添加动态路由修复刷新路由丢失问题结语如果大家写过后台管理系统的项目，那么动态路由一定是绕不开的，如果想偷懒的话，就把所有路由一开始都配置好，然后只根据后端返回的菜单列表渲染就好菜单就好了，但是这样的隐患就是我在地址栏输入的地址的时候，也会进入这个页面，不偷懒的方法就是本文要介绍的，真动态路由了，当然不会仅仅只是介绍使用数据怎么换成动态路由

劫辞·2024-01-13 01:42

vue-在table组件的render中添加事件

exportdefault{data(){columns:[{title:'操作',align:'center',dataIndex:'action',customRender:(text,record,index)=>{constdelete=()=>{this.handleDel(record.id);//调用method里面的方法}letcontent=();constobj={childr

Vivian_0430·2024-01-11 23:44

vue-键盘事件

键盘事件1.Vue中常用的按键别名：回车=>enter删除=>delete(捕获“删除”和“退格”键)退出=>esc空格=>space换行=>tab(特殊，必须配合keydown去使用)上=>up下=>down左=>left右=>right2.Vue未提供别名的按键，可以使用按键原始的key值（名称）去绑定，但注意要驼峰要转为kebab-case（短横线命名）3.系统修饰键（用法特殊）：ctrl、

坏萝卜·2024-01-10 21:58

vue-父子组件生命周期的执行顺序

问题：为啥父子组件生命周期的执行顺序是这样的？答案：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted解释:在Vue中，父子组件的生命周期顺序是有规律的，原因如下：beforeCreate：父组件的beforeCreate钩子首先被触发。在这个时候，Vue实

じòぴé南冸じょうげん·2024-01-10 14:53

前端国际化之痛点(一)：让人头疼的词条Key

以Vue-i18n为例，大体如下：Vue-

stonefisher·2024-01-09 19:05

Vue-依赖注入（provide-inject）

文章目录provide-inject的作用如何使用provide-inject如何实现响应式方法一、父级组件为子级组件提供的数据为对象方法二、传递一个参数用方法返回provide-inject的作用通常情况下，父组件向孙组件传递数据，可以采用父子props层层传递，也可以使用bus和Vuex直接交互。在Vue2.2.0之后，Vue还提供了provide/inject选项这对选项允许一个祖先组件向其

H5_ljy·2024-01-09 09:07

Vue-父组件向子组件传递数据的约束

一。子组件接收的content必须是Number属性二。子组件接收的content必须是Number或String属性Props特性，映射，父组件传，子组件接。下面是非Props特性，实际生产中很少用

丁先生_b64b·2024-01-09 07:01

什么是Vue-响应式数据

Vue的响应式数据是指当数据发生变化时，相关的视图会自动更新。在Vue中，我们可以通过data选项来定义响应式的数据。当创建Vue实例时，Vue会遍历data选项中的所有属性，将它们转换成getter/setter，这样当属性被访问或者修改时，Vue能够监听到变化并进行响应。这也被称为依赖追踪。当某个响应式数据被修改时，所有依赖于该数据的地方都会被通知到，从而更新相应的视图。通过使用Vue的响应式

&ACE&·2024-01-06 00:22

vue-打包

打包的作用说明：vue脚手架只是开发过程中，协助开发的工具，当真正开发完了=>脚手架不参与上线打包的作用：1）将多个文件压缩合并成一个文件2）语法降级3）lesssassts语法解析打包后，可以生成，浏览器能够直接运行的网页=>就是需要上线的源码打包的命令和配置说明：vue脚手架工具已经提供了打包命令，直接使用即可命令：yarnbuild结果：在项目的根目录会自动创建一个文件夹'dist'，dis

小沐°·2024-01-05 21:17

Vue-报错No “exports“ main defined in xx

vue报错：No"exports"maindefinedinF:\wjh\vue#Practice\EasyQuestionnaire-web-master\EasyQuestionnaire-web-master\node_modules\@babel\helper-compilation-targets\package.json1.在文件中找到该路径的package.json文件，2.按照提示

@年年·2024-01-05 13:36

VUE-利用OSS BrowserJS-SDK实现阿里OSS前端上传

项目中遇到利用阿里OSS上传文件，线上很多示例用到了各种SDK，却没有看到OSSBrowserJS-SDK相关示例，鉴于脑子不好使，记一下。封装upload相关组件使用npm安装SDK的开发包npminstallali-oss在组件中实例化SDK并使用上述四个参数可通过调用后台接口获取，若前端直接封装，容易暴露。前往（控制台-对象存储OSS-基本设置）配置CORS（详见官方文档）method

dingtong6455·2024-01-05 10:57

vue-动态高亮效果

个人练习，仅供参考实现如下效果：点击某块，某块变成其他颜色。具体实现代码：上边：动态高亮效果{{n}}{{n1}}exportdefault{data(){return{navarr:["首页","推荐","分类","我的"],current:"首页",navarr1:["首页","推荐","分类","我的"],current1:"首页",};},methods:{},created:{},};.

LxyingINGing·2024-01-05 09:21

Vue-监听事件、移除事件（节流处理）

业务：header（fixed定位）在顶部时是transparent的，当scroll触发，添加背景色；再次移动到顶端还是transparent的。depository：TYXX下面这一段代码，在组件卸载后destroyed会执行，但是scroll还是会继续触发。created(){window.addEventListener("scroll",this.throttle());},destro

MINO吖·2024-01-03 22:05

Vue-图表resize事件

有时候我们会遇到这样的场景，一个组件中有几个图表，在浏览器resize的时候我们希望图表也进行resize，因此我们会在父容器组件中写：mounted() { setTimeout(() => window.onresize = () => { this.$refs.chart1.chartWrapperDom.resize() this.$refs.chart2.chartWrap

MINO吖·2024-01-03 22:35

Vue-响应式数据

一、ref创建基本类型的响应式数据vue3可以使用ref、reactive去定义响应式数数据。知识点汇总使用ref需要先引入ref，import{ref}from'vue'在模板template中使用了添加ref的响应式数据，变量的后面不用添加.value所有js代码里面，去操作res包裹的东西，必须要加上.value使用ref包裹的变量，都变成了对象，其中不带下划线的value是提供我们自己使用

夏天的冬雪·2024-01-03 15:39

内容分发与自定义事件

学习完整课程请移步互联网Java全栈工程师本节视频【视频】Vue渐进式JavaScript框架-Vue-布局篇-内容分发与自定事件【视频】Vue渐进式JavaScript框架-Vue-入门总结Vue中的内容分发在

撸帝·2024-01-02 07:49

vue-时间控件以及时间控件校验

:model数据区域:rules规则校验1.同时出现两个日期选择列表2.每次出现一个日期选择列表检验规则required必须录入trigger什么时候校验endDate1:[{required:true,message:"请选择保单止期起期",trigger:["change","blur"]}],endDate2:[{required:true,message:"请选择保单止期止期",trigg

悔建阿里杰克马·2024-01-01 22:55

开发人员有用的Vue.js动画库

vue-collapse-transition8、v-animate-css9、vue2-transitions10、vue-lottie11、vue-fake3d-image-effect12、particles-bg-vue13、vue

半生过往·2023-12-31 21:48

vite 创建vue3项目（vue-router、vuex、scss、环境变量、selint、stylelint、normalize.css）

三.设置路径别名@四.vuex五.SCSS六.环境变量七.eslint八.stylelint九.normalize.css一.创建基础vue项目npminitvite----templatevue选择vue

该用户已成仙·2023-12-31 06:30

VUE-获取本地局域网IP地址

constos=require('os');//提供本地的相关信息//获取本地ipfunctiongetNetWorkIp(){//打开hostletneedHost='';try{letnetwork=os.networkInterfaces();for(constdevinnetwork){letiface=network[dev];for(leti=0;i

梦翼横空·2023-12-28 22:34

引入sortablejs插件实现表格列拖拽功能的封装

1参考其他文章Vue+ElementUI实现动态调整表格列显示隐藏&显示顺序2具体实现2.1将列拖拽功能封装到通用表格动态列组件里关于表格动态列组件的具体代码，可以看我的另一篇博客：Vue-基于ElementUI

Xxxxxl17·2023-12-27 08:17

【vue-超出内容时 el-tooltip 提示框才显示，没有超出不显示】

使用disabled属性控制el-tooltip的content显示与隐藏{{item.label}}定义isShowTooltip变量控制disabled，经过onMouseOver鼠标悬停事件改变isShowTooltip值constisShowTooltip=ref(true)//noteel-tooltip超出内容时提示框才显示，没有超出不显示constonMouseOver=i=>{co

110susie·2023-12-26 03:17

前端vue-改造el-table，表头，表格（边框，背景色）

项目需求，表格只有最外面有边框，里面无分割线，且表头和表身的颜色不同CSS代码如下/*表格内背景颜色*/.tableMap::v-deep.el-tableth{//background-color:transparent!important;background-color:rgba(137,42,42,0.5);border:none!important;//表格字体颜色color:#ffff

大嘴史努比·2023-12-22 11:01

vue-内网，离线使用百度地图（地图瓦片图下载静态资源展示定位）

前言最近发现很多小伙伴都在问内网怎么使用百度地图，或者是断网情况下能使用百度地图吗后面经过一番研究，主要难点是，正常情况下我们是访问公网百度图片，数据，才能使用内网时访问不了百度地图资源时就会使用不了，如果我们能把我们需要数据下载到本地，自己访问自己，那这个问题就可以解决我们可以使用地图下载器下载我们需要的瓦片图数据，使用serve运行起来，这样内网和断网就可以使用了遗憾的是只能基本展示，定位。不

-風过无痕·2023-12-22 08:12

Vue-前端学习随笔-SPA首屏加载速度慢的怎么解决？

导读SPA也叫单页面应用（single-pageapplication），这可能是很多小伙伴在进行开发时经常使用的页面开发模型，它其实就是在单个页面容器内进行页面组件跳转，实现页面切换。可以比喻成你手里有一个杯子，这个杯子上午装牛奶，下午装咖啡，晚上装啤酒，很明显，杯子里的东西在不断的变换，可是杯子始终是那一个，这其实就是一种对于单页面应用的直观理解。有了这样的理解之后肯定就会有小伙伴疑惑：那有没

泾柳123·2023-12-21 15:20

Vue-前端学习随笔-对于Vue生命周期的理解

导读相信大家在刚刚学习完Vue的一些基础语法结构，以及框架特点后，心中会有诸多的疑惑。例如：“我应该在什么时候进行页面初始化数据的请求？又应该在何时进行DOM操作？Vue所说的数据双向绑定是如何实现的，又是在什么时候实现的？、Vue的视图的更新是如何并又是在什么时候实现的？”这些问题在我初识Vue时是很混乱的，但是我相信大家通过对生命周期的学习，与对钩子函数的深入了解，这些问题都会慢慢化解的！正文

泾柳123·2023-12-21 15:17

Vue-动态组件和插槽

一、动态组件动态组件指的是动态切换组件的显示与隐藏。如何实现动态组件渲染vue提供了一个内置的组件，专门用来实现动态组件的渲染。使用方法：当我们使用默认这种写法时，我们会发现，如果在right进行了操作，再切换到left，再次切换到right时，right上的操作不会缓存下来我们就通过以下方式，解决这一问题：使用keep-alive保持状态keep-alive默认缓存所有组件，我们可以通过incl

crystal_iwwish·2023-12-21 10:26

vue-路由导航高亮

1、什么是高亮----网页中通过样式设置，让一系列元素中的某个元素突出显示2、路由导航高亮①默认高亮vueRouter提供了一个高亮class名称：.router-link-active,可以让导航链接自动实现样式差异ullia{text-decoration:none;margin:5px;}ullia.router-link-active{color:blue;font-weight:bold

Serendipiy_yyj·2023-12-20 17:52

vue-路由的实现

1、编写页面导航，编辑App.vue，添加导航链接登录注册首页2、页面中组件视图展示位置：编辑入口文件App.vue...3、编写路由映射规则，创建路由模块：src/router/index.js/***路由模块*///1、导入模块importVuefrom"vue"importVueRouterfrom"vue-router"//2、注册模块Vue.use(VueRouter)//3、定义映射规

Serendipiy_yyj·2023-12-20 17:22

Vue-图片懒加载

实现图片懒加载可以使用vue-lazyload插件npm链接：vue-lazyload-npm(npmjs.com)使用方法：1.安装[email protected]//如果是vue2就需要安装1.3.3版本2.引入vue-lazyload并使用可以在使用该插件的时候传入一个配置对象，其中就可以配置loading配置项，其为图片还

永久旅途·2023-12-20 13:26

Vue-移动端双指放大或缩小功能实现

data(){return{displacement:{scale:1}}},mounted(){//this.$nextTick()将回调延迟到下次DOM更新循环之后执行letthat=this;this.$nextTick(()=>{//获取放大或缩小的区域DOMletmatrix_box=document.querySelector(".build_matrix_box");letslide

成都彭于晏的橙子·2023-12-20 10:00

Vue-插槽

什么是插槽？插槽就是子组件中的提供给父组件使用的一个占位符，用表示，父组件可以在这个占位符中填充任何模板代码，如HTML、组件等，填充的内容会替换子组件的标签。如下代码：1.在子组件中放一个占位符image在父组件中给这个占位符填充内容：image展示的效果image现在来看看，如果子组件中没有放插槽，同样的父组件中在子组件中填充内容，会是啥样的：1.子组件代码无插槽：image2.父组件照常填充

wanminglei·2023-12-20 10:09

Vue-第七天

智慧商城项目：1.创建项目选项：2.调整：主要是增加两个文件夹，删除倒是没什么3.组件库（vant-ui）：点击进入官网:Vant2-MobileUIComponentsbuiltonVue4.导入：全部导入：按需导入：在babel.config.js中导入配置后要重启项目，否则项目不会将配置文件扫进去拆分：将导入代码封装成一个文件，进行拆分5.适配处理（postcss）：以前都是快速上手，但是这

CMBSNBB·2023-12-20 03:30

Vue-利用v-model和.sync进行父子通信

1、v-model通常子组件更新某个变量并需要告知父组件时，需要子组件$emit触发事件，然后父组件$on监听该事件再去改变值。但熟悉v-model的双向数据绑定原理后，我们可以巧妙地运用这一原理去实现父子组件之间动态传值：父组件通过v-model绑定一个变量传给子组件；子组件通过props['value']接收；子组件通过this.$emit('input',n)去改变父组件中v-model绑定

小矮马·2023-12-19 15:47

Vue-高德地图-立体多边形绘制

前言在前端开发中，地图展示是常见的需求之一。而高德地图作为国内知名的地图服务商，其提供的API功能丰富，使用也相对简单。本篇文章将介绍如何在Vue2中使用@amap/amap-jsapi-loader安装高德地图并展示地图。准备工作首先需要在高德开放平台注册账号，并创建一个应用获取相应的应用key。安装@amap/amap-jsapi-loader。npminstall@amap/amap-jsa

不羁的程序员~·2023-12-18 22:33

VUE-脚手架搭建

文章目录一、概述二、前提准备1.安装node-js2.npm镜像设置3.安装vs-code三、脚手架搭建1.Vue-2搭建1.Vue-3搭建一、概述官网：http://cn.vuejs.org/vue有两个大版本，分别是vue-2和vue-3，目前新项目的话用vue-3的会比较多vue-2官方文档：https://v2.cn.vuejs.org/v2/guide/installation.html

多加点辣也没关系·2023-12-16 12:45

vue-使用可选链操作符编译报错问题

一.先看报错可选链操作符是ES2020中推出的新语法,允许我们不需要校验当前属性的类型去尝试访问子属性。letstr=a?.b?.c;在vue项目用可选链操作符语法时会出现编译报错的情况，如最上面的报错(图片)，这时需要安装babel依赖@babel/plugin-proposal-optional-chaining,并添加babel.config.js中。在babel.config.js中添加:

尚梦·2023-12-15 08:38

vue-表单验证问题

vueel-form添加v-if之后，表单校验不生效问题问题描述el-form校验对象通过v-if控制，点击提交，表单未对其添加校验，没有填写数据必填校验就通过了原因使用v-if：elementui在对form表单中带有prop属性的子组件进行校验规则绑定时，是在vue声明周期mounted完成的。而v-if用来切换的元素是会被销毁的，导致了v-if内的表单项，由于在mounted时期没有进行渲染

weixin_42322441·2023-12-06 20:53

若依vue-新建目录及菜单

前面我们把标题和logo换成了自己系统的标题和logo了接下来就是要建立自己需要的菜单和页面新建目录解析在拉下来的代码跑起来后有一个系统菜单--菜单管理(如图)在这个菜单的这个页面内有对应的操作功能修改功能这个功能可以修改写好了的菜单数据例如:名称/排序/路由地址/状态如果是系统自带的菜单如果不需要就可以把菜单的状态切换到'停用'如果是自己新增的菜单这个功能可以修改排序调整菜单在左侧的位置删除功能

爱健身的小刘同学·2023-12-06 10:56

vue-设置元素高度与屏幕高度相等

exportdefault{data(){return{screenHeight:""};},mounted(){this.screenHeight=window.innerHeight}}

小沐°·2023-12-06 04:22

vue-去除页面自带的margin空白

在项目列表中找到index.html文件（vue2项目的在public文件夹中），添加如下代码body{margin:0}

小沐°·2023-12-06 04:52

vue2-省市县三级联动选择框

Json数据：https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json如何访问本地文件参考：vue-访问本地json文件

小沐°·2023-12-06 04:20

Vue-模板语法

模板语法Vue.js使用了基于HTML的模版语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。Vue模板因而从实际上不同于基于字符串的模板。Vue.js的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统。结合响应系统，在应用状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。一、插入值1、文本数据绑定最常见的形式就是使用“Mustache”语

mxjsxz·2023-12-06 01:42

Vue-安装及安装相应插件

安装Vue安装nodejs，地址：https://nodejs.org/en下载后直接安装。安装后重新打开命令行工具，输入node-vPSC:\Users\zcl36>node-vv20.10.02.安装vue包npminstall-g@vue/cli安装之后，你就可以在命令行中访问vue命令。你可以通过简单运行vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。你还可以用这

雨夜赶路人·2023-12-06 01:06

推荐频道

vue-个人杂记