vue专题

好用的vue富文本编辑器记录

vue-quill-editor https://github.com/surmon-china/vue-quill-editor https://www.npmjs.com/package/vue-quill-editor https://blog.csdn.net/nickroprak/article/details/86645519(自定义图片上传) *默认上传图片为base64编吗

vuex重点笔记

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 这个状态自管理应用包含以下几个部分: state,驱动应用的数据源;view,以声明方式将 state 映射到视图;actions,响应在 view 上的用户输入导致的状态变化。 但是,当我们的应用遇到多个组件共享状态时,单向数据流的简

vue 电脑端调摄像头拍照,canvas转base64,base64转图片文件并上传到服务器

VUE(用了iview):  <template><div id='cameraUpload'><Form ref='member' :label-width='120' :model='member' :rules='memberRule' style='width: 600px'><FormItem label='照片' prop='photo'><div v-if="member.phot

Vue数组改变,视图不更新解决方案

列表渲染 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9 this.$forceUpdate() // 强制刷新 Vue.set(Array,index,

vue.config.js 配置proxy代理axios请求无效问题解决方案

使用proxy代理请求地址,可以帮助隐藏http请求地址,并可解决跨域请求的问题 方案一: vue.config.js配置(精简版)(不要配置其他多余的选项,只要proxy) devServer: {port: 8088,proxy:"http://192.168.111.101:8081"// 下方配置无效,已屏蔽/* proxy: {'/api': {target: "http://19

Ant Design Vue 相关介绍

Ant Design Vue有三个版本: v1(基于vue2.x):https://www.antdv.com/docs/vue/introduce-cn/ v2(基于vue3.x):https://2x.antdv.com/docs/vue/introduce-cn/ v3(基于vue3.x):https://next.antdv.com/docs/vue/introduce-cn/

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>

bimface开发实战-vue版

效果 演示地址 框架 bimface + vue3.0 代码地址 gitee地址 使用 yarn install yarn serve

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: 被绑定元素所在模板完成一次