别名vue3 vite vue
Vue3 watch 监听函数
1、watch函数（既要指明监视的属性，也要指明监视的回调） 坑： 1）监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效） 2）监视reactive定义的响应式数据中某个属性时：deep配置有效 setup(){ let sum = ref( ......
vue 实现锚点点位
<template> <div class="container"> <!-- <el-row> <el-col :span="3"> <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @clos ......
vue3路由跳转params传参接收不到
这样路由可以跳转过去，但接收到了params是一个空对象。 解决方法 由于之前的params传参在页面刷新之后，参数会丢失，所以vue将这种方法移除了。 vue推荐的路由跳转传参方法： 1.使用query传递参数 2.使用vuex、pinia对参数进行存储 3.使用 History API 方式传递 ......
vue3 ant-Design-vue提交按钮放在表单外提交，自定义提交按钮
<template> <a-form ref="urlEditRef" :model="urlEditInfo" name="urlEdit_rule" layout="vertical"> <a-form-item label="跳转链接" name="longUrl" :rules="[{ re ......
vue+element-ui实现el-tab标签的动态面包屑
以下内容仅供学习使用 前言： 下面是最终实现的效果图 首先在router.js里面配置meta:{title：‘xxxx’} 封装一个el-tab面包屑的子组件 通过v-for指令和tags数组中的数据进行渲染 <template> <div> <el-tag :key="index" v-for= ......
Vue监听器~~~~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi ......
Vue3中修改父组件传递到子组件中的值
Vue3中修改父组件传递到子组件中的值1.大家都知道，vue是具有单向数据流的传递特性。当你在子组件中修改父组件传递过来的数据的时候，控制台就会报出错误，说不让你对父组件传递的值进行修改。2.那么，尤大大为了解决这个问题，在vue3的时候给我们提供了一个新的思路:v-model来实现父传子，并且子也 ......
vue中使用nprogress优化导航条和请求数据的时候进行加载中显示
以下内容仅供学习使用 先进行安装 npm install --save nprogress 或者 yarn add nprogress 在你封装的request.js中使用 import NProgress from 'nprogress' import 'nprogress/nprogress.c ......
一文搞定：前端如何选择Angular、React和Vue三大主流框架
在前端开发领域，目前最流行的三个框架是Angular、React和Vue.js。这些框架非常高效，并且它们各自具有一系列的优缺点。 在AI辅助编程工具**CodeGeeX的后台中，也看到有大量的前端开发者使用这三个框架，并且Vue的使用率在CodeGeeX**的后台中，持续走高。接下来我们针对Ang ......
vue.js 监听器~~~
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid ......
java vue获取当月第一天和最后一天，当前周一和周日
1，vue前端，通过moment获取当月第一天和最后一天，当前周一和周日 let currDate = moment(new Date(),"YYYY-MM-DD"); var firstDay= moment(currDate.startOf("month").valueOf()).format( ......
vue - 通过JS屏蔽自带右键菜单
//通过JS屏蔽自带右键菜单 document.oncontextmenu = function (e) { return false; } ......
vue: 路由报错后的处理方式（通常用在打包发布后的报错）
用户在发包前进入了页面（也就是请求到了 index.html ），并且在 index.html 中可以得知将来要请求的异步组件的名字叫 a.js ，当服务器这时候发包，并且清空掉了 a.js 这个资源，改名叫 a1.js 。发包之后用户点击 a.js 对应的组件时，浏览器拿着先前在 index.ht ......
vue3 - 引入自定义插件的组件的具体写法
1.背景 我的这一篇随笔详细讲解组件怎么制作与引入使用【vue3 - 在单独的项目制作自定义组件插件，支持vite【前提不要使用webpack专属语法】，并引入插件 -心得 - 岑惜 - 博客园 (cnblogs.com)】 但在局部引入组件时，eslint红色警告 引用名言：“又不是不能用==” ......
layui和vue.js和jq一起使用调用vue方法及变量
<div class="layui-row layui-col-space15" id="app"></div> 定义vueApp: let vueApp require(['vue'],function(Vue) { vueApp=new Vue({ el: "#app", data: { whe ......
Vue OnlyOffice 在线文档
#1、在线文档引用 由后台人员搭建服务，引用api #2、封装组件 <!-- * @Descripttion: 在线编辑插件 * @version: 0.0.1 * @Author: PengShuai * @Date: 2022-12-23 15:43:07 * @LastEditors: Pen ......
vue3中proxy关键词
在 Vue3 中，proxy 是一种新的 JavaScript 特性，用于创建一个代理对象，对代理对象的访问会通过 get 和 set 等方法拦截， 从而可以对代理对象进行一些自定义的处理逻辑。在 Vue3 中，我们可以使用 reactive 函数将一个普通对象转换成响应式对象， 而这个响应式对象就 ......
【原理揭秘】Vite 是怎么兼容老旧浏览器的？你以为仅仅依靠 Babel？
作者：京东科技 孙凯 一、前言 对前端开发者来说，Vite 应该不算陌生了，它是一款基于 nobundle 和 bundleless 思想诞生的前端开发与构建工具，官网对它的概括和期待只有一句话：“下一代的前端工具链”。 Vite 最早的版本由尤雨溪发布于3年前，经历了3年多的发展，Vite 也已逐 ......
Vue2依赖收集原理
我们只会在 Observer 类 和 defineReactive 函数中实例化 dep。在 getter 方法中依赖收集，在 setter 方法中派发更新通知 ......
vite import插件
# 安装组件 pnpm install -D unplugin-vue-components unplugin-auto-import # 修改配置文件 // vite.config.ts import { defineConfig } from 'vite' import AutoImport f ......
Vite解决@问题
# 安装组件 pnpm install @types/node // vite.config.ts import path from "path"; export default defineConfig({ plugins: [ ... ], resolve: { alias: { "@": pa ......
vue3挂载全局方法
在vue3中可以通过app.config.globalProperties来挂载全局方法。 main.js const app = createApp(App) // 定义全局方法 const myGlobalMethod = () => { console.log('This is a globa ......
使用vue实现方法、计算属性、侦听器完成的简易计算器
第一步：创建一个新的web项目（Jisuanqi），引入js文件 第二步：搭好基本框架，为后面写代码打好基础 （这里更改一个小错误：把class="app" 改为id="app"） 第三步：编写输入框 效果图展示如下： 第四步：添加“计算”按钮 第五步：编写实例化 最后完整代码展示 1 <!DOCT ......
Vue3.0
1.setup 1.理解：Vue3.0中一个新的配置项，值为一个函数 2.setup是所有CompositionAPI的表演的舞台 3.组件用所用到的：数据 方法等等，均要配置在setup中 4.setup函数的两种返回值 1.若返回一个对象，则对象中的属性，方法在模板中均可以直接使用（重点关注 ......
基于VUE3开发的CAD图可视化平台代码开源了
前言 唯杰地图VJMAP 为CAD图或自定义地图格式WebGIS可视化显示开发提供的一站式解决方案，支持的格式如常用的AutoCAD的DWG格式文件、GeoJSON等常用GIS文件格式，它使用 WebGL矢量图块和自定义样式呈现交互式地图, 提供了全新的大数据可视化可视化功能。 唯杰地图可视化平台旨 ......
vue使用方法，侦听器，计算属性三种方式实现简易计算器
今天我们用vue中方法，计算属性，还有监听器来完成一个简易的小型计算器 一. 代码实现效果 二.代码实现 1.创建一个web项目，导入本地js文件实例化vue对象并挂载DOM节点 2.方法实现计算器 框架分析： 1.创建输入框用来输入数据，创建按钮计算结果 2.v-model属性使用,利用v-mod ......
Vue修改默认端口号
在vue项目中找到vue.config.js，如果没有该文件，可以在根目录中创建一个。然后，在该文件中添加以下代码： module.exports = { devServer: { port: 8888, // 修改为你想要的端口号 }, }; 然后重启vue程序即可。 ......
Vue三种方法实现简易计算器。
计算器实现： 方法1：使用v-model进行双向绑定。 方法2：使用computed计算属性。 方法3：使用watch侦听属性。 1.定义自定义方法getResult，该方法用来计算表达式的值。 `` <head> <meta charset="utf-8"> <title></title> <sc ......