经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 Vue.js

Vue集成阿里云做滑块验证的实践

目录前言集成阿里云验证前端需要什么引入阿里云验证封装一个验证组件使用组件思考 前言 滑块验证是比较常见的人机鉴别手段,但是自己做一时半会还真搞不出来,想想这玩意还挺难琢磨,怎么识别是否是人机呢?本文介绍Vue+阿里云验证做出这个小功能。 集成阿里云验证 前端需要什么 appkey...[2022/1/19]

利用vue组件实现图片的拖拽和缩放功能

目录前言如图所示:方法如下:总结 前言 vue实现一个组件其实很简单但是要写出一个好的可复用的组件那就需要多学习和钻研一下,一个好的组件必须有其必不可少的有优点:一是能提高应用开发效率、测试性、复用性等;二是组件应该是高内聚、低耦合的;三是组件应遵循单向数据流的原则。 在实现我的图片的拖拽组...[2022/1/18]

关于Vue 自定义指令实现元素拖动的详细代码

昨天在做的一个功能时,同时弹出多个框展示多个表格数据。 这些弹出框可以自由拖动。单独的拖动好实现,给元素绑定 mousedowm 事件。 这里就想到了 Vue 里面自定义指令来实现。 一、自定义指令 在使用自定义指令之前,先对自定义指令有一定的了解。从以下几个方面着手: 1、自定...[2022/1/18]

详解Vue项目的打包方式(生成dist文件)

目录一、相关配置情况一(使用的工具是 vue-cil)情况二(使用的工具是 webpack) 二、打包  一、相关配置 情况一(使用的工具是 vue-cil)         如果是用 vue...[2022/1/18]

Vue提供的三种调试方式你知道吗

目录一、在 VS Code 中配置调试二、debugger语句三、Vue Devtools总结 一、在 VS Code 中配置调试 使用 Vue CLI 2搭建项目时: 更新 config/index.js 内的 devtool property: devtool: ''source-m...[2022/1/18]

Vue开发实践指南之应用入口

Vue开发实践指南之应用入口

目录前言创建应用添加 Loading 效果开始创建应用多页面改造总结 前言 Vue 开发实践为本人的最佳实践,非业内最佳,仅用于提供给各位做参考,这是系列文,但发布时间和内容不固定。 通常情况下一个 前端工程 只会导出 一个 前端单页应用,而 main.js 就是这个应用的入口文件。 创...[2022/1/17]

vue?请求拦截器的配置方法详解

按如下步骤进行 1.request.js内容:http request请求拦截器和http response服务器响应拦截器配置 2.http.js内容:请求数据方式封装 3.utils.js内容:获取token,判断token是否存在 4.store文件: vuex 仓库配置...[2022/1/3]

详解Vue项目的打包方式

目录一、相关配置情况一(使用的工具是 vue-cil)情况二(使用的工具是 webpack) 二、打包 总结 一、相关配置 情况一(使用的工具是 vue-cil) 如果是用 vue-cli 创建的项目,则项目目录中没有 config 文件夹,所以我们需要自建一个配置文件;...[2022/1/3]

一篇文章告诉你如何实现Vue前端分页和后端分页

目录1:前端手写分页(数据量小的情况下)2:后端分页,前端只需要关注传递的page和pageSize 总结 1:前端手写分页(数据量小的情况下) 前端需要使用slice截取: tableData((page-1)pageSize,pagepageSize) 2:后端分页,前端只需...[2021/12/31]

前端vue+express实现文件的上传下载示例

前端vue+express实现文件的上传下载示例

新建server.js yarn init -y yarn add expre nodemon -D var expre = require("expre "); const fs = require("fs"); var path = require("path"); cons...[2021/12/31]

vue拖拽添加的简单实现

本文主要介绍了vue拖拽添加的简单实现,具体如下: 效果图 并没有判断是否重复,没有删除旧数据 数据体 <MyShuttle :dataOrigin=''[ { Name:"数据001", ...[2021/12/31]

vue中keep-alive多级路由缓存问题

目录1.问题描述 2.原因分析 3.解决思路 4.处理过程 1.问题描述 对账中心当便捷导航菜单最后两个是同一模块且是三级及以上菜单时,正常切换两个便捷页签时是可以正常缓存的,但删除最后一个页签时,此时另一个页签页面此时已经不缓存了。 2.原因分析 keep-alive默认支...[2021/12/31]

Vue3如何理解ref&nbsp;toRef和toRefs的区别

目录一、基础 1.ref 2.toRef3.toRefs4.最佳的使用方式二、深入 1.为什么需要ref2.ref为什么需要.value3.为什么需要toRef和toRefs Vue3中新增了几种创建响应式数据的方法,其各自的作用当然也不尽相同,每一种方法都有其自己的应用场景,今天我们来聊聊什么是r...[2021/12/31]

Vue实现页面的局部刷新(router-view页面刷新)

利用Vue里面的provide+inject组合 首先需要修改App.vue。 <template> <!-- 公司管理 --> <div cla ="companyManage"> <router-view ...[2021/12/31]

vue?codemirror实现在线代码编译器效果

vue?codemirror实现在线代码编译器效果

前言 如果我们想在Web端实现在线代码编译的效果,那么需要使用组件vue-codemirror,他是将CodeMirror进行了再次封装 支持代码高亮 62种主题颜色,例如monokai等等 支持json, sql, javascript,c ,xml, htm...[2021/12/31]

vue&nbsp;中使用&nbsp;bimface详情

目录1. 安装 vue 脚手架 2. 创建项目 3. 引入 bimface 文件 3.1 运行项目 3.2 引入 bimface 文件 4. 实现页面渲染 4.1 修改 html 4.2 修改 CSS 4.3 修改 JS 整个过程分为如下几个步骤: 1、安装 vue 脚手架 ...[2021/12/31]

Vue2&nbsp;cube-ui时间选择器详解

目录前言一、需求及效果需求效果二、代码实现index.vue(html)datemethods测试效果三、资料参考inputTimePicker(时间选择器)详细在官网地址: 总结 前言 vue2 整合 cube-ui 时间选择器(供有点点基础的看) 一、需求及效果 需求 我们要在...[2021/12/20]

详解vue+nodejs获取多个表数据的方法

目录效果前端实现后端实现总结 读取两个表的数据 将用户及图像联系在一起 效果 前端实现 修改关联的时候,前端向后端传入array[number],后端存为字符串 这时在前端获取数据时,需要循环处理为数字数组 <template> ...[2021/12/20]

详解Vue-cli来构建Vue项目的步骤

首先需要安装Vue-cli: npm install -g vue-cli 全局先安装Vue-cli,安装好了Vue-cli。就可以使用它来构建项目 vue init webpack vw-layout 进入到刚创建的vw-layout: ...[2021/12/20]

Vue开发常用方法详解

Vue开发常用方法详解

目录$nextTick()$forceUpdate()$set().sync——2.3.0+ 新增(Vue 3.x中已被v-model替换,不再支持)总结 $nextTick() this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 D...[2021/12/20]

vue3组件通信的方式总结及实例用法

vue3组件通信方式为以下几种 props $emit $expose / ref $attrs v-model provide / inject Vuex mitt props &l...[2021/12/15]

Vue生命周期中的八个钩子函数相机

目录1、beforeCreate和created函数2、beforeMount和mounted函数3、beforeUpdate和updated函数4、beforeDestroy和destroyed函数总结 1、beforeCreate和created函数 beforeCreate和create...[2021/12/15]

vuex的核心概念和基本使用详解

目录介绍开始安装 ①直接下载方式 ②CND方式③NPM方式④Yarn方式NPM方式安装的使用方式 store概念及使用概念:定义使用mutations概念及使用概念:使用:定义使用action概念及使用概念:定义使用getters概念及使用概念:定义使用总结 介绍 Vuex是实现组件全局状态(...[2021/12/15]

详解vue保存自动格式化换行

网上找了好多方法改着也没用,后面从一个大佬上看到的,就摘下来了,字体的话还是原来系统自带的看着舒服,就自己添加上去了,需要改动的可自行修改,在右上角文件--首选项--设置--搜索setting---在setting.json编辑,把其他的注释掉,换上下面的代码块就可以了,字体大小和行高可自行修改 ...[2021/12/15]

详解Vue3的响应式原理解析

目录Vue2响应式原理回顾Vue3响应式原理剖析嵌套对象响应式避免重复代理总结 Vue2响应式原理回顾 1.对象响应化:遍历每个key,定义getter、setter 2.数组响应化:覆盖数组原型方法,额外增加通知逻辑 const originalProto = Array...[2021/12/15]

vue?px转rem配置详解

vue?px转rem配置详解

目录方法一一、配置与安装步骤: 方法二方法三总结 方法一 一、配置与安装步骤: 1、在 Vue 项目的 src 文件夹下创建一个 config 文件夹: 2、在 config 文件夹中创建 rem.js: 3、将以下代码复制到 rem.js 中: ...[2021/12/9]

详解vue&nbsp;element&nbsp;plus多语言切换

目录前言如何实现多语言切换 ?1、安装包vue-i18n2、在src目录下新建如图:3、 在main.js中4、在vue文件中使用如何动态切换语言并更改elementUI语言 ?1、利用vuex,在mutations中写一个方法更改element语言2、使用更改完elementUI组件视图不更新?1...[2021/12/9]

在Vue页面中如何更优雅地引入图片详解

在Vue页面中如何更优雅地引入图片详解

目录错误示范通过computed当图片不变的时候直接引入通过c 变量切换图片通过c 绘制总结 在我们写vue项目中肯定会用到各种图片,那么如何更好的使用图片资源呢。这里我讲一下我常用的方法。 错误示范 也许你的代码里常常会这样写 <template> <...[2021/12/9]

利用Vue3封装一个弹框组件简单吗

目录总结放前面:???? 前言:????公共????????全局????????弹框??????????结语: 总结放前面: Tipes: 封装弹框组件使用了Teleport,避免了组件嵌套可能导致的定位层级的隐患,还使用了defineProps,defineEmits,插槽增加了组件的拓展性。...[2021/12/9]

一篇文章教你简单使用Vue的watch侦听器

目录侦听器watch?格式设置侦听器:总结 侦听器watch? 函数名就是要侦听的元素的名字 传入的参数第一个是变化后的新值newval,第二个是变化前的旧值oldval? 格式 方法格式的侦听器 无法在刚进入页面时自动触发,只有在侦听到变化才会触...[2021/12/8]

Vue中的匿名插槽与具名插槽详解

Vue中的匿名插槽与具名插槽详解

目录1.匿名插槽2.具名插槽总结 slot又名插槽,是Vue的内容分发机制,组件内部的模板引擎使用slot元素作为承载分发内容的出口。 插槽slot是子组件的一个模板标签元素,而这一个标签元素是否显示,以及怎么显示是由父组件决定的。 slot又分三类,默认插槽,具名插槽和作用域插槽。(这里...[2021/12/8]

深入了解Vue使用vue-qr生成二维码的方法

目录npm下载步骤(1)导入(2)vue-qr参数 示例总结 “二维码”的英文是“QR Code”,“QR”是“Quick Response”的缩写,反映出这种二维码具有“超高速识读”的特点。“Quick Response Code”也就是“快速响应码”。 npm下载 npm in...[2021/12/8]

Vue基础之MVVM,模板语法和数据绑定

目录1. Vue概述Vue官网MVVM架构模式Vue简介2. 初识Vue3. 模板语法 1、插值语法:2、指令语法:4. 数据绑定5. el与data的两种写法1、el有2种写法new2、data有2种写法3、一个重要的原则:总结 1. Vue概述 Vue官网 英文官网: https: v...[2021/12/8]

vue获取token实现token登录的示例代码

使用token做登录验证的思路大致如下: 1、在第一次登录的时候前端调用后端的接口,把用户名和密码传给后端。 2、后端收到请求,验证用户名和密码,验证成功后,返回给前端一个token值。 3、前端收到后端传给的token值,将token存储在本地 loaclStorage和vuex中。...[2021/11/29]

vue&nbsp;如何使用vue-cropper裁剪图片你知道吗

目录一、安装:二、使用:三、内置方法:四、使用:总结 官网: https: github.com/xyxiao001/vue-cropper 一、安装: npm install vue-cropper 或者 yarn add vue-cropper...[2021/11/24]

详解Vue的监听属性

目录Vue监听属性什么是监听属性?监听属性和计算属性的区别?监听属性的使用深度监听立即调用总结 Vue监听属性 什么是监听属性? 所谓监听就是对内置对象的状态或者属性变化进行监听并且做出反应的响应,监听属性,意思就是可以监视其他数据的变化。 监听属性和计算属性的区别? 计算属性是依赖...[2021/11/24]

浅谈Vue中插槽slot的使用方法

如何定义和使用: 在组件的template中使用slot标签定义,slot标签中间可以定义默认显示值,如果slot标签没有声明name属性值,在使用插槽时将默认从第一个插槽依次往下放置,为了方便使用,一般都会都插槽slot指定一个name属性值,当要使用该插槽时,只需要在要使用的标签内添加...[2021/11/24]

Vue监听属性图文实例详解

Vue监听属性图文实例详解

目录?什么是监听属性?监听属性和计算属性的区别?监听属性的使用深度监听立即调用写在最后 ?什么是监听属性? ??所谓监听就是对内置对象的状态或者属性变化进行监听并且做出反应的响应,监听属性,意思就是可以监视其他数据的变化。 监听属性和计算属性的区别? 计算属性是依赖的值改变后重新计算结果...[2021/11/24]

Vue中ref的用法及演示

目录 ref 定义:被用来给元素或子组件注册引用信息。引用信息会被注册在父组件上的$refs对象上。 如果是在普通的dom元素上使用,引用指向的就是dom元素; 如果用在子组件上,引用指向的就是组件实例。 举例: 组件1: <templat...[2021/11/24]

Vue中props用法介绍

?前言: 在Vue中通过props,可以将原本孤立的组件串联起来,也就是可以子组件可以接收父组件传递过来的data,比如子组件想要引用父组件的数据,那么在props里面声明一个变量,这个变量就可以引用父元素的数据。 实例演示: 子组件: <template&g...[2021/11/24]

vue中v-for指令完成列表渲染

目录1、列表遍历2、Vue中key的作用3、列表过滤 本文就Vue中列表渲染做个简单总结和使用演示: 列表渲染是用v-for指令根据绑定一组元素的选项来完成的,渲染格式可以自定义。 1、列表遍历 最基本的使用案例1: <!DOCTYPE html> &...[2021/11/24]

vue网络请求方案原生网络请求和js网络请求库

一、?原生网络请求 1. XMLHttpRequest(w3c标准)? ? 没有promise时的产物 当时的万物皆回调,太麻烦 2. Fetch? ? html5提供的对象,基于promise 因为promise的存在,为了简化网络请求。 使用 Fetch - Web...[2021/11/23]

Vue&nbsp;Element-ui实现树形控件节点添加图标详解

目录1.效果图2.树形表格绑定数据加标签3.所有代码其他实现总结 1.效果图 2.树形表格绑定数据加标签 想要在树形控件的树节点加上图片或者element-ui的图标,可以在树形表格绑定数据中加上标签icon children: [ { ...[2021/11/23]

解决父子组件通信的三种Vue插槽

目录前言环境准备Category组件App组件一、默认插槽二、具名插槽三、作用域插槽总结 前言 插槽可以说是 Vue 中非常重要的一部分吧,在我学习和练习的过程中,当组件搭配着插槽一起使用的时候,会发挥的更好一些。更多时候也会更加方便。 今天介绍Vue中三种插槽吧:默认插槽、具名插槽、作用...[2021/11/23]

手把手教你搭建vue3.0项目架构

目录前言:一、用 vue-cli 创建项目二、安装路由三、完善目录结构,创建配置文件vue.config.js四、安装ant-design-vue,安装le 、安装dayjs五、安装vuex、axios六、vue3的一些新语法七、总结 前言: GitHub上我开源了vue-cli、vue-cli...[2021/11/22]

Vue实现简易记事本功能

本文实例为大家分享了Vue实现简易记事本功能的具体代码,供大家参考,具体内容如下 预览图: 功能如下: (1)输入任务并按下回车键,可将任务添加至任务列表(不可输入重复任务) (2)点击删除,可删除对应任务 (3)点击清空,所有任务都会被删除 (4)左下角同步显...[2021/11/22]

用vue实现注册页效果?vue实现短信验证码登录

本文实例为大家分享了vue实现注册页效果 的具体代码,供大家参考,具体内容如下 一、实现效果图 ?? 二、实现代码 1、实现头部 <template> <div cla ="box"> <div cla ="box1"> ...[2021/11/22]

vue实现手机验证码登录

本文实例为大家分享了vue实现手机验证码登录的具体代码,供大家参考,具体内容如下 验证码 <template> <div> <el-main> <el-form :model="ruleForm" :rules...[2021/11/22]

vue实现记事本小功能

本文实例为大家分享了vue实现记事本小功能的具体代码,供大家参考,具体内容如下 直接上代码: <!DOCTYPE html> <html lang="en"> <script src="https: cdn.jsdelivr.net/npm/v...[2021/11/22]

vue插值表达式和v-text指令的区别

目录1.使用插件表达式2.在插件表达式中使用v-cloak解决闪烁问题3.插件表达式 {{me age}} 语法只能在标签内容中使用 {{}}这种语法叫做插值表达式,在插值表达式中可以写任何合法的js表达式 1.使用插件表达式 使用插件表达式,存在内容闪烁问题,但是v-text没有闪...[2021/11/22]

373
2
记录数:661 页数:1/1412345678910下一页尾页
加载更多
 友情链接: NPS