Vue
文章平均质量分 74
本专栏主要写的关于Vue的一些问题和相关的小demo,会不定期的更新相关内容的
小hu同学
hello world!
展开
-
Vue将弹窗页面作为pdf下载下来
1、新功能是在这个查看报告的弹窗中添加一个表格,表格里面可以在点击详情,查看一个弹窗(弹窗功能页面不下载到PDF),表格上的详情按钮在下载时要去掉。需求:点击某个查看报告按钮后,出现的是一个弹窗,可以浏览,滚动等操作,底部有下载PDF,将整个报告下载成PDF文件。导出为PDF方法,网上有很多 我这里就把代码贴出来 仅供参考。原创 2022-09-21 23:03:16 · 981 阅读 · 1 评论 -
Vue+Element关于数据在数组进行回显,并进行修改数组当前的数量
说一下我遇到的问题吧,我在按钮2页面,当我模糊搜索点击后,后端返回给我的值是 b,但是我绑定的是a,后端需要的也是a,这个时候我就要将b赋值给a,去修改a,然后保存将a传给后端。说明:在按钮1页面的操作是将商品购买进库,点击按钮保存,按钮2页面的操作是将刚刚采购进来的商品进行库存的变更,商品的信息不能做修改,只能修改数量。名称是,是做的模糊搜索,点击搜索出来的物资,将当前的信息回显到当前的一行,并且进行数据的修改。我这种只能算很low的解决办法吧,有更好的办法可以评论区讨论讨论。1、第一种(直接赋值)...原创 2022-08-29 22:22:02 · 1704 阅读 · 0 评论 -
v-router 路由基础
导读:由于本篇文章我是在juejin上面发了后,复制过来的,所以会有一些动态图没有动,图片有水印,排版等问题一、路由的基本概念与原理1.什么是路由路由(英文:router)就是对应关系。2.SPA 与前端路由SPA 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯一的一个页面内完成。此时,不同组件之间的切换需要通过前端路由来实现。 结论:在 SPA 项目中,不同功能之间的切换,要依赖于前端路由来完成!3.什么是前端路由概念:Hash 地址与组.原创 2022-03-20 13:16:19 · 2102 阅读 · 0 评论 -
Vue组件之间的数据共享
导读: 本篇文章会讲到Vue中重要的一个问题,就是组件与组件之间怎么进行数据共享?之前我们有说过,每个组件之间是相互独立的,可以通过导入组件以及注册组件的方式进行使用,那我们组件之间怎么传递数据呢?1、组件之间的关系在开发中 经常见到的关系分为以下几种:父子组件(父子关系)兄弟组件(兄弟关系)可以看下关系图A——B A——C 父子关系B-C 兄弟关系#mermaid-svg-H9vkRwclTBeIS6nt .label{font-family:'trebuchet ms',.原创 2021-12-27 18:53:22 · 662 阅读 · 0 评论 -
Vue生命周期详解
前面Vue入门基础(二)的时候里面有说过Vue的生命周期,说的比较浅。本篇文章会详细的讲解Vue的生命周期生命周期&生命周期函数生命周期(Life Cycle)是指一个组件从创建 -> 运行 -> 销毁的整个阶段,强调的是一个时间段。生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行。注意:生命周期强调的是时间段,生命周期函数强调的是时间点。1.1 组件生命周期函数的分类1.2 生命周期图示1.3 创建阶段1. befo.原创 2021-12-27 18:52:01 · 14212 阅读 · 0 评论 -
Vue入门基础(四)—— 动态组件&插槽&自定义指令
本篇文章主要讲述的是 动态组件&插槽&自定义指令一、动态组件1、什么是动态组件动态组件指的是动态切换组件的显示与隐藏2、如何实现动态组件渲染Vue提供了一个内置的组件,专门用来实现动态组件的渲染。示例代码如下 data(){ //1、当前要渲染的组件名称 retrn{ comName:'Left'} } <!--2. 通过is属性,动态指定要渲染的组件 --> <component :is='.原创 2021-12-27 18:50:07 · 734 阅读 · 0 评论 -
Vue入门基础(三)
经常会听到说组件化开发,那到底什么是组件呢?怎么组件化开发呢?组件与组件之间是什么关系呢?组件之间的数据共享是怎么共享呢?看下面文章来带你了解Vue组件1.1 什么是组件化开发组件化开发指的是:根据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护。1.2 Vue中的组件化开发vue 是一个支持组件化开发的前端框架。vue 中规定:组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。1.3 Vue组件的组成3部分.原创 2021-12-27 17:51:19 · 1543 阅读 · 0 评论 -
Vue入门基础(二)
本篇文章是接着上一篇文章的,可以先看下 上一篇文章4.Vue常用特性4.1 常用特性概览表单操作自定义指令计算属性过滤器侦听器生命周期4.2 表单操作1. 基于Vue的表单操作input 单行文本textarea 多行文本select 下拉多选radio 单选框checkbox 多选框1、单行文本 绑定数据 <span>姓名:</span> <span> <input type.原创 2021-12-27 17:45:23 · 1474 阅读 · 0 评论 -
在Vue中使用$refs来引用DOM
Jquery 在操作DOM上大大简化了过程Vue:MVVM在Vue 中 程序猿不需要去操作DOM,只需要把数据维护好就可以了(数据驱动视图)结论:在Vue 项目中,JQ与Vue 的理念相背离,所以不建议安装和使用Jquery假设:我们在Vue 中需要操作DOM,需要拿到页面上某个DOM元素的引用,此时怎么办?ref引用1.什么是ref引用ref 用辅助开发者在不依赖于Jquery 的情况下,获取DOM元素或组件的引用。每个Vue的组件实例上,都包含一个$refs对象,里面存储着对应.原创 2021-12-21 15:21:55 · 934 阅读 · 0 评论 -
Vue入门基础(一)
目录1. Vue基础1.1 概述2 Vue基本使用2.1 Vue.js之Hello word 细节分析3. Vue模板语法3.1 模板语法概述3.1.1 原生JS拼接字符串3.1.2 前端模板引擎3.1.3 模板语法3.2 指令(v-)3.2.1 什么是指令?3.2.2 v-cloak指令用法3.2.3 数据绑定指令(v-text/v-html/v-pre)3.2.4 数据响应式(v-once)3.3 双向数据绑定(v-model/MVVM设计思想)3.4 事件绑定1.Vue 如何处理事件?2.事件函数参数原创 2021-11-08 17:34:20 · 414 阅读 · 0 评论 -
Vue2基础——Tap栏切换案例
本篇文章需要有一丢丢的Vue基础 ,或者可以参考Vue官网,本篇文章会用到的知识点有 v-on,v-bind,v-if,v-for业务需求:点击tab 栏内容去切换相对应的显示内容比如:点击栏目一 内容区域显示栏目一 内容一可以自己先敲一下,想想该怎么实现这个业务需求呢?下面我会提供静态代码,只需要在这个基础上进行修改即可我也会在文章的最后,写一遍demoHTML静态代码<div id="app" class="vertical-tab"> <!-- 左侧.原创 2021-08-01 21:35:09 · 1835 阅读 · 2 评论 -
将Vue项目部署至服务器(一)
在开发完成后如何进行打包并部署本地服务器呢?一、首先打开你需要部署的项目我这里使用vscode软件 打开一个新的终端打开后在下面命令行进入该项目目录文件进行原创 2021-02-17 13:24:23 · 1570 阅读 · 0 评论 -
Vue中将密码进行隐藏显示并改变图标样式
效果图默认为不显示密码状态点击右边小图标后,密码为显示状态。并改变图标在次点击后返回原来的不显示状态代码<div> <div class="box"> <img :src="openeye" @click="changeType()" alt=""> </div> <input :type="pwdType" name="password" id="password" place原创 2021-01-13 21:59:31 · 944 阅读 · 0 评论 -
Vue开发中登录与注册切换
登录和注册的隐藏与显示在开发中经常会用到,在注册与登录上也会比较伤脑筋,所以这里我用一个案例来说明:1.点击主页面后弹出的一个登录弹框,默认显示是登录界面HTML代码<!--type: input的类型 text为“文本框” password为“密码框” submit为“按钮框”name: 名称id: 只有唯一的id值placeholder: 输入框中默认的文字v-model: 双向数据绑定@blur: 绑定变量名 --> <div c原创 2021-01-08 14:00:06 · 4106 阅读 · 1 评论 -
Vue项目开发中使用路由懒加载
Vue项目开发中使用懒加载一、使用路由懒加载的好处当打包项目时,JavaScript包会变的非常大,影响页面加载,要是通过把不同的路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加提供效率。二、安装相关的依赖包详细可查看路由官方文档安装依赖包文档安装依赖包完成后,需要配置到项目里面三、在babel.config.js声明该插件依赖"@babel/...原创 2020-04-12 15:40:32 · 1342 阅读 · 0 评论 -
VUE使用编程式路由跳转页面
vue开发过程中使用Router跳转页面一、问题:在项目开发过程中,我想从某个页面点击后跳转到另外的一个页面,展示相关的内容:这里我想点击添加商品,然后跳转到一个新的页面去填写关于商品的信息二、解决办法1、首先给想要点击跳转的按钮绑定一个事件@click我在这里绑定了一个goAddpage 函数 <el-button type="primary" @click="goAddp...原创 2020-04-08 12:38:27 · 1826 阅读 · 0 评论 -
VUE项目中的全局格式化时间过滤器
自定义格式化时间一、问题这是一个后台管理系统中的商品列表页,其中的时间这一项在调用接口后会发现是以毫秒来计算的,这样当然是不行的啦,要换算成我们日常使用的2020-04-07 17:13 这样的时间格式二、解决办法1、打开项目中的main.js文件注册一个全局的过滤器,名称可以自定义,我这里用的是‘dateFormat’ //对名称进行定义,提供一个function函数 ori...原创 2020-04-07 18:26:28 · 1173 阅读 · 0 评论 -
【Element-组件】 级联选择器中出现的问题
一、在开发Vue项目时,级联选择器无法正在显示问题如下:获取的数据渲染的会很长,而且并没有将全部数据渲染出来打印出来的数据显示有32条解决办法:在全局样式CSS中添加.el-cascader-panel样式强制它的高度.el-cascader-panel { height: 200px;}二、获取数据时最后一行会是空白的,无法渲染出来...原创 2020-03-28 12:38:05 · 708 阅读 · 3 评论 -
Vue+element的表单验证
Vue+element组件(form表单)表单验证大部分是用在注册或者登陆一、首先需要添加form表单1.打开element组件-引入form表单(需在VUE中提前安装element组件) <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" l...原创 2020-03-14 14:07:36 · 270 阅读 · 0 评论 -
VUE前端项目初始化
一、前端项目的初始化步骤1.安装Vue脚手架(以vue-3为例)2.通过Vue脚手架创建项目3.配置Vue路由4.配置Element-UI组件库5.配置axios库6.初始化git远程仓库7.将本地项目托管到云仓库(码云为例)二、安装vue-3通过下面的命令可以安装,使用npm安装,需要提前下载 安装Node.jsNode 版本要求Vue CLI 需要 Node.js 8.9...原创 2020-03-13 13:03:10 · 507 阅读 · 0 评论