前端 终端 实战vue

Vue学习二:指令补充、computed计算属性、watch侦听器、案例:水果购物车

一、指令修饰符 通过"."指明一些指令后缀,不同后缀封装了不同的处理操作 → 简化代码①按键修饰符@keyup.enter → 键盘回车监听②v-model修饰符v-model.trim →去除首尾空格v-model.number →转数字③事件修饰符@事件名.stop →阻止冒泡@事件名.prev ......
侦听器 指令 购物车 computed 属性

Module parse failed: Unexpected token (7:27) File was processed with these loaders: * ./node_modules/vue-loader/dist/templateLoader.js * ./node_modules/vue-loader/dist/index.js 问题的解决

问题描述 由于自身用的是vue3的版本,所以原来的element组件只是适用于vue2,而vue3就是即便按照教程的步骤进行更改,还是依然报错,所以, 我们在使用组件的时候,就需要直接使用element-plus组件; 然而,在我引入新的组件之后,就出现了这样的错误: 满屏的红色呀! 问题解决 经过 ......
node_modules vue-loader modules loader dist

vue-cli

1.安装node.js 下载链接:Node.js百度网盘链接 提取码:6666 安好后使用 cnpm -v查看版本是否成功 成功后直接安装vue脚手架 cnpm install -g vue-cli 安装webpack(打包) cnpm install webpack -g 2.创建项目 2.1 使 ......
vue-cli vue cli

ant design of vue 表格 默认,跨页勾选,翻页选择记忆勾选,数据回显勾选

需求 在使用ant design of vue 的table表格时需要让之前已选择的数据显示勾选状态,还要支持跨页勾选 思路 需要指定row-key绑定的值必须唯一 ant-design-vue的表格对于跨页勾选支持的非常友好,只要设置绑定一下rowKey就可以了,我这里绑定的是workerId 代 ......
表格 记忆 数据 design ant

快速初始化Vue3项目终端工具 x-init

https://github.com/zjy4fun/x-init 安装工具 npm install -g x-init 快速创建一个项目,只需`x projectName`即可快速创建项目,支持国内加速👀 x demo ......
终端 工具 项目 x-init Vue3

vue项目安装依赖

目录🥇如果是别人的项目(标注:别人移除了modules文件夹)🥇如果是自己的项目或者自己要另外下载依赖🥈安装生产依赖🥈安装开发依赖🥈安装特定版本🥇卸载依赖 🥇如果是别人的项目(标注:别人移除了modules文件夹) # 可以执行下面这条命令下载依赖 npm install # 或者输入 ......
项目 vue

vue中使用xlsx插件前端读取解析excel文件

问题描述 工作中一般都是后端去解析excel数据,前端使用上传组件去将excel组件丢给后端,后端使用一些插件去解析excel(比如hutool工具类) 不过有些情况下,前端也需要去做一些excel的解析,比如产品经理说,在上传excel文件之前,要做一个excel的图表化预览审核查看啥的,没问题的 ......
前端 插件 文件 excel xlsx

js 大屏屏幕适配方案,同样适用Vue

vue项目写在 index.html文件下 以1920*1080为基准的屏幕做适配,在网上找的方案在全屏于非全屏时,效果会有一点点差距,所以对代码进行了改进。 如果网页不是全屏则需要加上任务栏高度、工具栏高度进行计算缩进。 我的项目是数据大屏项目一般都是全屏看,所以非全屏时会存在滚动条,并不是bug ......
大屏 屏幕 方案 Vue js

Vue、element图片上传回显

需求:使用element的上传组件,上传图片,回显图片(可无实际上传:不调后台接口) ......
element 图片 Vue

如何在Vue3中配置国际化语言i18n

1. 安装 vue-i18n npm i vue-i18n -S 2. 创建一个i8n的配置文件 如:i18nConfig.js // 配置 vue-i18n 实现国际化语言设置 import { createI19n } from 'vue-i18n' import zh_cn from '../ ......
语言 国际 Vue3 i18n Vue

最简单的前端分页---思路就是监听分页变化,然后slice数据源

element版本的 背景 有些页面显示数据量不大,或者后端分页比较复杂;不考虑性能情况下前端分页不失为比较好的选择。 实现 技术点:VUE + Element (el-table , el-pagination) DEMO <template> <div class="app-container" ......
数据源 前端 思路 就是 数据

关于vue的 scoped

前沿 关于在vite中使用 less | sass npm install less -D npm install sass -D 在style标签注明: <style lang="less"></style> <style lang="scss"></style> scoped scoped实现组 ......
scoped vue

创建vue3的项目和目录结构讲解

本节目标 了解Vue3 项目的结构 学习Vue3 项目的基本开发知识 Vue3 和 Vue2的开发区别 全局安装vue-cli npm i -g @vue/cli vue create vue3-json-schema-form 自定义vue3 配置 自定义配置: 选择 [自定义] ,通过方向键上下 ......
结构 目录 项目 vue3 vue

vue可以使用this.$set()来进行强制更新,进而解决问题

可以使用this.$set()来进行强制更新,进而解决问题 对象操作: 三个参数:this.$set("改变的对象","改变的对象属性","值") 数组操作: 三个参数:this.$set("数组","下标","值") ......
问题 this vue set

【Python爬虫实战】爬虫封你ip就不会了?ip代理池安排上

前言 在进行网络爬取时,使用代理是经常遇到的问题。由于某些网站的限制,我们可能会被封禁或者频繁访问时会遇到访问速度变慢等问题。因此,我们需要使用代理池来避免这些问题。本文将为大家介绍如何使用IP代理池进行爬虫,并带有代码和案例。 1. 什么是IP代理池 IP代理池是一种能够动态获取大量代理IP地址的 ......
爬虫 实战 Python

前端生成二进制文件并下载

// 生成十六进制数据 const hexData = '7E02000000010000000aB77E'; // 这里是示例的十六进制数据 // 将十六进制数据转换为字节数组 const data = hexToBytes(hexData); // 创建 Blob 对象 const blob = ......
二进制 前端 文件

Vue3+Axios网络请求封装(转)

转自:原文链接:https://blog.csdn.net/weixin_43295498/article/details/130939488 代码说明 代码主要分为以下几个部分: import导入模块。在这个代码段中,我们导入了axios和element-plus两个模块,并对其进行了解构。 定义 ......
Axios 网络 Vue3 Vue

vue3 表头显示小图标

<!-- 排班信息 --> <el-table v-resize:44 :data="tableData" class="table" border style='margin: 10px 0px' highlight-current-row element-loading-text="数据正在加载 ......
表头 图标 vue3 vue

【源码】Vue.js 官方脚手架 create-vue 是怎么实现的?

最近系统学习了vue.js 的官方脚手架create-vue的源码,深入分析了里面的技术实现细节,本文是我整理的源码学习文章。 ......
脚手架 create-vue 源码 官方 create

纯前端也可以访问文件系统!

https://www.cnblogs.com/songyao666/p/17691691.html 前言 周末逛github的时候,发现我们只需要在github域名上加上1s他就能够打开一个vscode窗口来阅读代码,比起在github仓库中查看更加方便 然后我就想网页端vscode能不能打开我本 ......
前端 文件 系统

vue 页面导出为pdf与word

vue 页面导出为pdf与word 一.导出为word 基于 docxtemplater 来导出word文档的方法 1.安装引用依赖 // 安装 docxtemplater npm install docxtemplater pizzip --save // 安装 jszip-utils npm i ......
页面 word vue pdf

前端科普系列-Web:一路前行一路忘川

前端科普系列-Web:一路前行一路忘川 无名之辈 一个有代码洁癖的前端小开发,热爱生活,追求极致 ​关注他 118 人赞同了该文章 摘要 本系列文章旨在帮助学习者了解前端,主要覆盖前端的基础知识,但不深入讲解,定位为大而全并非细而精,适合非前端开发的同学对前端有一个系统的认识,能更好的与前端开发协作 ......
前端 科普 Web

前端科普系列-Node.js:换个角度看世界

前端科普系列-Node.js:换个角度看世界 无名之辈 一个有代码洁癖的前端小开发,热爱生活,追求极致 ​关注他 55 人赞同了该文章 摘要 本系列文章旨在帮助学习者了解前端,主要覆盖前端的基础知识,但不深入讲解,定位为大而全并非细而精,适合非前端开发的同学对前端有一个系统的认识,能更好的与前端开发 ......
前端 科普 看世界 角度 Node

使用Github Action在Github Pages上部署vue页面

Github Action部分: name: NodeJS on: push: branches: [ "master" ] # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages permissions: ......
Github 页面 Action Pages vue

前端科普系列-ESlint:守住优雅的护城河

前端科普系列-ESlint:守住优雅的护城河 无名之辈 一个有代码洁癖的前端小开发,热爱生活,追求极致 ​关注他 47 人赞同了该文章 摘要 本系列文章旨在帮助学习者了解前端,主要覆盖前端的基础知识,但不深入讲解,定位为大而全并非细而精,适合非前端开发的同学对前端有一个系统的认识,能更好的与前端开发 ......
护城 护城河 前端 科普 ESlint

前端科普系列-Babel:把 ES6 送上天的通天塔

前端科普系列-Babel:把 ES6 送上天的通天塔 无名之辈 一个有代码洁癖的前端小开发,热爱生活,追求极致 ​关注他 108 人赞同了该文章 摘要 本系列文章旨在帮助学习者了解前端,主要覆盖前端的基础知识,但不深入讲解,定位为大而全并非细而精,适合非前端开发的同学对前端有一个系统的认识,能更好的 ......
通天塔 前端 科普 Babel ES6

前端科普系列-CommonJS:不是前端却革命了前端

前端科普系列-CommonJS:不是前端却革命了前端 无名之辈 一个有代码洁癖的前端小开发,热爱生活,追求极致 ​关注他 498 人赞同了该文章 摘要 本系列文章旨在帮助学习者了解前端,主要覆盖前端的基础知识,但不深入讲解,定位为大而全并非细而精,适合非前端开发的同学对前端有一个系统的认识,能更好的 ......
前端 科普 CommonJS

Vue2x的自定义指令

在某些情况下,我们需要对底层DOM进行操作,而内置的指令不能满足需求,就需要自定义指令。一个自定义指令由一个包含类似组件的生命周期的钩子的对象来定义,钩子函数会接收到指令所绑定的元素作为参数。 定义指令 常用两种方式进行自定义指令,一种是全局定义,另一种在当前组件中定义 // 局部定义 export ......
指令 Vue2x Vue2 Vue 2x

Edge浏览器没有让我失望! 今天终于可以在win10中模拟IE内核进行前端测试了,以后就用它了!

🚀 个人主页 极客小俊 ✍🏻 作者简介:web开发者、设计师、技术分享博主 🐋 希望大家多多支持一下, 我们一起进步!😄 🏅 如果文章对你有帮助的话,欢迎评论 💬点赞👍🏻 收藏 📂加关注 前言 😝 ietest现在是不是不好用了? Edge浏览器仿真是不是不见了? 如图 如果我们 ......
前端 内核 浏览器 Edge win

【校招VIP】前端计算机网络之webSocket相关

考点介绍 WebSocket 是一种网络通信协议,很多高级功能都需要它。初次接触 WebSocket 的人,都会问同样的问题:我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处? 答案很简单,因为 HTTP 协议有一个缺陷:通信只能由客户端发起。 答案详情解析和文章内容可点击下方 ......
前端 计算机网络 webSocket VIP