vue专题
vue3显示element-plus所有icon
效果 代码 <template><div style="display: flex;flex-wrap: wrap"><component :is="name" style="width: 2rem; margin-left: 2rem" v-for="(name,index) in icons" :index="index" :key="index"></component></div>
vue3.0 v-model 的使用
前言 组件功能：把 el-switch 的值 false/true, 动态绑定输出为 0, 1 组件代码 封装el-switch组件，当el-switch的值为false,输出值为0；当el-switch的值为true,输出值为1； <template><el-switch v-model="switchValue" @change="changeEvent"></el-switch
Vue学习笔记：拦截器
原文地址 Vue可以对http request和http response添加全局拦截，最典型的例子就是在请求头里添加token，和监测是否登录，如果没有登录则跳转到登录页面。 main.js中添加拦截器的代码： 1. request 拦截器 //request 拦截器，在请求头中加tokenaxios.interceptors.request.use(config => {if (lo
vue cli4之Eslint初使用
一.介绍 ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似，除了少数的例外： ESLint 使用 Espree 解析 JavaScript。ESLint 使用 AST 去分析代码中的模式ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加
vue router路由解析
一、前言 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。 二、安装 1.安装包 npm install vue-router 2.项目引用 在cli4脚手架目录router下index.js中引用 import Vue from 'vue'import VueRouter from 'vue-rou
vue多语言插件vue-i18n
安装vue-i18n npm install vue-i18n -S 使用 1.在main.js中引入vue-i18n import VueI18n from 'vue-i18n'Vue.use(VueI18n) 2.vue-i18n初始化 const i18n = new VueI18n({locale: 'cn', // 默认语言messages}) 3.vue-i
Vue.js之Socket.IO 使用
一.前言 在很多需求业务中，都需要浏览器和服务器实时通信来实现功能，比如：扫码登录(扫码后，手机确认登录，PC网页完成登录并跳转)、订单语言提醒等，这些都是建立在两端实时通信的基础上的。对前端而言，来实现浏览器和服务器实时通信，最好的选择就是Socket.IO库，能够快速的实现两端实时通信功能。 1、什么是 Socket.IO? Socket.IO是一个WebSocket库，可以在浏览器和服
Vue之组件间的数据通信
一、父组件与子组件传值 1.pros 通过 Prop 父组件向子组件传递数据。props是单向绑定的，即只能父组件向子组件传递，不能反向，是 Vue 的设计理念之单向数据流。 2.$emit 官方说法是触发当前实例上的事件。附加参数都会传给监听器回调。$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。
vue3 使用WebAssembly 实战
在Vue 3中使用WebAssembly（WASM）的一个基本示例包括以下几个步骤： 1. 准备WebAssembly模块 首先，你需要一个WebAssembly模块。假设你已经有了一个编译好的.wasm文件，比如名为example.wasm。 2. 加载WebAssembly模块 在Vue 3组件中，你可以在setup函数中使用async函数来异步加载并实例化WebAssembly模块。
Vue原理学习:vdom 和 diff算法(基于snabbdom)
vdom 和 diff 背景 基于组件化，数据驱动视图。只需关心数据，无需关系 DOM ，好事儿。 但是，JS 运行非常快，DOM 操作却非常慢，如何让“数据驱动视图”能快速响应？ 引入 vdom 用 vnode 表示真实 DOM 结构 <div id="div1" class="container"><p>vdom</p><ul style="font-size: 20px">
import.meta.env.VITE_SUB_SYSTEM_ID和process.env.VUE_APP_SUB_SYSTEM_ID的差别是
import.meta.env.VITE_SUB_SYSTEM_ID和process.env.VUE_APP_SUB_SYSTEM_ID的差别是 import.meta.env.VITE_SUB_SYSTEM_ID 和 process.env.VUE_APP_SUB_SYSTEM_ID 代表两种不同的环境变量访问方式，主要区别在于它们所适用的构建工具和运行环境： import.meta.en
什么是Vue.js? Vue.js简介
什么是Vue.js? Vue.js简介 Vue.js是一种用于构建用户界面的前端框架。它是目前非常流行的JavaScript框架之一，被广泛应用于单页应用和响应式网页开发。 Vue.js具有以下特点和优势： 轻量级： Vue.js的文件体积很小，加载速度快，不会造成页面负担。 双向数据绑定： Vue.js采用了数据驱动的方式，能够自动追踪数据的变化，并实时更新页面。 组件化开发：
关于template标签用法总结(含vue中的用法总结)
文章目录 一、html5中的template标签二、template标签操作的属性和方法三、vue中的template1、template标签在vue实例绑定的元素内部2、vue实例中的template属性 一、html5中的template标签 html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为templ
vue的生命周期及钩子函数
每个vue实例被创建时都会经历一系列初始化过程，例如：设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这些过程中会运行一些vue生命周期中的钩子函数，这些函数为用户提供在创建vue实例及创建完成后期不同阶段添加自己代码的机会。 钩子函数中的this指向当前vue实例。 vue实例生成及后期的钩子函数如下： beforeCreate createdbefor
vue中的computed、watch(immediate、deep)区别
文章目录 vue中的computedvue中的watchvue实例computed和watch比较watch中的immediate、deep属性 vue中的computed 注意：vue实例中data中的属性名不能和methods、computed中的属性名重名。 computed是vue实例中的计算属性，存在缓存机制，只有它所依赖的属性值发生变化才会重新计算，否则默认走缓存
vue框架学习--表单校验
在使用 Element UI（一个常见的 Vue UI 组件库），要给 添加表单验证，Element UI 的表单验证通常通过 Form 和 FormItem 组件以及它们的 rules 属性来实现。下面是一个例子，展示如何给联系人字段添加表单验证： 首先， Vue 组件中有一个 Form 组件，定义验证规则： <template> <el-form :model="formData" :r
ssm132医院住院综合服务管理系统设计与开发+vue
医院住院综合服务管理系统的设计与实现 摘 要 互联网发展至今，无论是其理论还是技术都已经成熟，而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播，搭配信息管理工具可以很好地为人们提供服务。针对医院住院信息管理混乱，出错率高，信息安全性差，劳动强度大，费时费力等问题，采用医院住院综合服务管理系统可以有效管理，使信息管理能够更加科学和规范。 医院住院综合服务管理系统在Eclipse环境
vue读取excel表格内容
vue读取excel文件内容 1. 安装第三方工具 xlsx npm install xlsx 2. 在vue组件中引入xlsx import * as xlsx from 'xlsx' 3. 使用xlsx读取excel文件 html部分 <el-upload action="#" :auto-upload="false" :on-change="handleFi
Vue.directive注册(全局与局部)自定义指令使用详解与实战
指令定义函数提供了几个钩子函数（可选）： bind: 只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作。inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值。componentUpdated: 被绑定元素所在模板完成一次
如何组织 Vue 项目
介绍 在启动 Vue 项目时，思考项目结构至关重要。主要考虑因素是预期项目的规模。在本篇博文中，我将探讨适用于不同规模 Vue 项目的各种结构。这个考虑与康威定律相吻合： “设计系统的组织受限于产生这些组织沟通结构的设计。” - 梅尔·康威 基本上，康威定律暗示了您的 Vue 应用程序的架构将固有地反映出您的组织架构，从而影响您应该如何规划项目的结构。 一些常规规则 在我们开始介绍
基于Vue和uni-app的增强型单选ccRadioView组件开发
标题：基于Vue和uni-app的增强单选组件ccRadioView的设计与实现 摘要：本文将详细介绍如何使用Vue和uni-app构建一个简单、好用且通用的单选框组件ccRadioView。该组件提供了单选列表的功能，并支持反向传值，方便开发者快速实现单选事件的处理。 一、引言 在前端开发中，单选组件是一种常见的需求。单选框（Radio）允许用户从一组选项中选择一个。然而，原生的单选框样式
Vue和Django前后端实现跨域
1.为什么要解决跨域： 前端与后端分处不同的域名，因为客户端访问不同源的服务端时会遭到浏览器的同源策略的拦截，所以我们需要配置CORS，处理的方式有很多，先来说下自己学习到的。 2.前端处理跨域： 前端项目是通过vite来创建的，需要在vue.config.js中配置，server部分是新增的跨域配置，如下： import { defineConfig
Vue的学习 —— ＜路由与网络请求＞
目录 前言 正文 一、初识路由 二、初识Vue Router 1、安装Vue Router 2、Vue Router基本使用 三、路由重定向 四、嵌套路由 前言 在之前的学习中了解到单页Web应用通常只有一个HTML页面，所有的组件展示和切换都在这个页面上完成。虽然我们可以通过动态组件实现组件的切换，但当用户刷新页面或通过URL重新访问时，这些切换状态却无法被保留。为了解决
vue加密传输，后端获取进行解密。
文章目录 概要Vue前端加密后端进行解密小结 概要 vue界面加密传输，后端获取进行解密，适用于登录时密码加密传输。 Vue前端加密 1.安装jsencrypt包： npm install jsencrypt 安装完成后package.json会有jsencrypt依赖 2.引入jsencrypt.js到文件夹中： import JSEncrypt from '
vue打包优化之dns解析优化（dns预解析）
一、优化原理 1.简单描述dns解析是什么 用户输入域名==>查询本地有没有记录==>本地没有记录则发起请求询问ip地址 2.为什么需要优化 dns解析是一个耗时操作，在浏览器解析Html时如果遇见了需要解析的域名会导致阻塞。 3.优化思路 将html中的链接提前到<head>中使用<link rel="dns-prefetch">预先解析可能用到的域名 二、代码实现 需要安装的包