vue

vue上通过krpano.js实现360全景图

首先贴出一些XML对应的函数,文件内容都有注释说明, 前端代码读取xml文件代码 // 初始化 window.embedpano({ xml: 0, target: 'pano', html5: 'only', mobilescale: 1.0, passQueryParameters: 'star ......
krpano vue 360 js

getRefs is undefined html vue2项目 报错

vue2项目提示 getRefs is undefined 在div上面写了,ref,还写了v-if 然后再watch中操作了 ref 导致报错。 分析: 组件因为v-if 为 false 没有注册和渲染,在操作的时候还使用了this.$refs函数就会获取不到 解决办法: v-if换成v-show ......
undefined getRefs 项目 html vue2

vue2自定义指令实现el-dropdown下拉菜单项最小宽度等于内容宽度

//在main.js添加 Vue.directive('siem-dropdown', function (el, binding, vNode) { let ul = el.querySelector("ul") let uid = vNode.componentInstance._uid; // ......
宽度 指令 el-dropdown dropdown 菜单

创建vue3项目、setup函数、ref函数、reactive函数、计算监听属性、生命周期、torefs、vue3 setup写法

创建vue3项目 # 两种方式 - vue-cli:vue脚手架 》创建vue项目 》构建vue项目--》工具链 跟之前一样 - vite :https://cn.vitejs.dev/ -npm create vue@latest 一路选择即可 # 运行vue3项目 -vue-cli跟之前一样 - ......
函数 setup 写法 vue3 vue

vue3中defineComponent 的作用详解

转自:https://www.jb51.net/article/263096.htm 这篇文章主要介绍了vue3中defineComponent 的作用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 vue3中,新增了 defineCompon ......
defineComponent 作用 vue3 vue

是用非构建工具开始使用Vue3

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< ......
工具 Vue3 Vue

创建vue3项目,setup函数,ref函数,reactive函数,计算监听属性,生命周期, torefs,vue3 setup写法

1 创建vue3项目🐑 # 两种方式 - vue-cli:vue脚手架 》创建vue项目 》构建vue项目--》工具链 跟之前一样 - vite :https://cn.vitejs.dev/ -npm create vue@latest 一路选择即可 # 运行vue3项目 -vue-cli跟之前 ......
函数 setup 写法 vue3 vue

Vue.js 中添加动态背景图片

用 style 标签在 Vue.js 中应用或数据绑定背景图像,然后在其中定义 backgroundImage URL。 它会自动从字符串中检索url,然后在浏览器网页上显示相同的数据内容 ......
背景图片 背景 动态 图片 Vue

vue-router使用、localStorage系列、vue3介绍、组合式api和配置项api

vue-router使用 以后,就是组件的切换实现页面切换的效果 》必须借助于vue-router来实现 vuex 现在知道的 -<router-view/> 》显示组件 》router/index.js中配置 -<router-link :to="about_url"> 》做 页面组件跳转的 基本 ......
localStorage vue-router vue api router

Vue3中shallowReactive 与 shallowRef 的用法

转自:https://blog.csdn.net/qq_54527592/article/details/119840044 shallowReactive 与 shallowRef shallowReactive:只处理对象最外层属性的响应式(浅响应式)。 shallowRef:只处理基本数据类型 ......
shallowReactive shallowRef Vue3 Vue

Vue3

一、创建vue3项目 1、 2、 二、setup函数 1、 三、ref函数 1、 四、reactive函数 1、 五、计算和监听属性 1、 六、生命周期 1、 七、torefs 1、 八、vue3 setup写法 1、 ......
Vue3 Vue

Vue3

vue3.3.4 + vite4.4.9 1.组件安装 1.1 ElementPlus npm install element-plus --save main.js import ElementPlus from 'element-plus' import 'element-plus/dist/i ......
Vue3 Vue

Vue3 Div 与 v-for 的配合应用,超出自动带滚动条

效果图 代码 <li > <a href="javascript:;" class="IndRea flexC Huans"><i></i><p>当前会议 [ 0 ]</p></a> <div style="height:80%;overflow:auto;"> <div v-for="(dataI ......
v-for Vue3 Vue Div for

vue.js函数模板引用

// 参考网址:https://cn.vuejs.org/guide/essentials/template-refs.html#ref-on-component// 模板引用也可以被用在一个子组件上。这种情况下引用中获得的值是组件实例:// 如果一个子组件使用的是选项式 API 或没有使用 <sc ......
函数 模板 vue js

vue3响应式原理

转自:https://blog.csdn.net/qq_51130780/article/details/129424598 响应式的相关知识Vue 3 中的响应式原理是通过使用 ES6 的 Proxy 对象来实现的。在 Vue 3 中,每个组件都有一个响应式代理对象,当组件中的数据发生变化时,代理 ......
原理 vue3 vue

vue3——全局挂载,getCurrentInstance,proxy属性

1. messageTools/index.ts import {ElMessage} from "element-plus" export default { // 普通消息提示 msg(text:any) { ElMessage(text); }, // 成功消息提示 msgSuccess(te ......
getCurrentInstance 全局 属性 proxy vue3

Springboot+Vue整合(二)

今天内容1: 用Vue实现了进一步的查询,通过ID进行条件查询 这个内容基本上是在之前的整合的基础上做的修改 流程为: 页面添加搜索框 <el-table-column align="right"> <template slot="header" slot-scope="scope"> <div s ......
Springboot Vue

abp 框架 前端 abp/vue docker Dockerfile

FROM node:lts-alpine as build-stage WORKDIR /app COPY package.json ./ RUN yarn install COPY . . RUN yarn build #代理nginx,nginx直接访问 FROM nginx:stable-al ......
前端 Dockerfile abp 框架 docker

Web 框架Vue3

setUP函数 <template> <div>vue3 写法:{{ value1 }}</div> <br /> <div>vue2 写法:{{ value2 }}</div> <br /> <div> vue3 中的对象: <h5 v-for="(item, index) in obj" :ke ......
框架 Vue3 Web Vue

vue3最基础入门,vue3 + element plus实战pc端后台管理,从零到一设计pc端项目

https://www.bilibili.com/video/BV1C3411s7bV Normalize.css 使浏览器呈现所有 HTML 元素更加一致,并且符合现代 web 标准。Normalize.css 只作用于需要规范化的样式。 https://www.bootcdn.cn/normal ......
vue3 实战 vue 后台 element

Vue在main.js全局引入scss文件,组件里使用scss变量报错问题

问题描述 在写组件样式的时候,普通样式都没问题,一碰到$变量就error Module build failed (from ./node_modules/sass-loader/dist/cjs.js): color: $normal-active-color; ^ Undefined varia ......
scss 全局 变量 组件 文件

vue学习一

<div id="app"> <p> {{ message.toUpperCase() }}</p> <p>{{ age > 18?'成年':'未成年' }}</p> <p>{{ friend.name }}</p> <a href="">{{ con }}</a> <div class="box" ......
vue

vue学习二

<div id="app2"> <div v-html="msg"></div> </div> <script> const app2=new Vue({ el:'#app2', data:{ msg: '<a href="https://cn.bing.com/search?q=%E5%A4%A7 ......
vue

vue-router.esm.js:2065 Uncaught (in promise) Error: Redirected when going from "/login?redirect=%2Fhome" to "/home" via a navigation guard.

原因: vue-router路由版本更新产生的问题,导致路由跳转失败抛出该错误; 真正的原因是由于返回了一个Promise对象, 正常的跳转由then方法执行 当正常的路由跳转, 被"路由导航守卫"拦截并重新指定路由时, 由于 this.$router.push() 返回的是Promise对象, 此 ......

vue:登录后跳转到之前要访问的页面(vue@3.3.4)

一,安装pinia liuhongdi@lhdpc:/data/vue/responsive$ npm -S install pinia 安装完成后查看已安装的版本: liuhongdi@lhdpc:/data/vue/responsive$ npm list pinia responsive@0. ......
vue 页面

vue:路由错误/404 not found(vue-router@4.2.4)

一,官方文档地址: https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html 二, 代码: 1,router配置 { path: '/:pathMatch(.*)*', name: 'NotFound',meta:{titl ......
路由 vue-router vue 错误 router

搭建Springboot+Vue+Element的简单系统流程

今天研究了一下如何把Springboot+Mybatis和Vue+Element结合起来使用 详细写一篇博客来记录一下流程吧,因为途中发现了很多的问题 首先,创建Springboot项目,惯例添加依赖 <?xml version="1.0" encoding="UTF-8"?> <project x ......
Springboot 流程 Element 系统 Vue

vue中beforedistory应用

遇到一个问题,就是我在使用全局事件总线的时候发布了一个事件,然后在a组件里面这个时间会被触发一次,在b组件里面也会触发一次.这两个组件是平级组件不是嵌套组件.然后呢,在a组件触发完之后,我去了b组件,在b组件中触发相同时间的时候,a组件的逻辑和b组件的逻辑都执行了一次. 一开始我在想,他两都不在用一 ......
beforedistory vue

Vue扩展组件系列

注意日期范围都是要 日期/时间两种格式(date/datetime,默认值:date) 1、日期范围快选【当前日期-7天,当前日期】 近期三天、一个周、一个月、三个月、一年 v-model = { FieldName:'CTime', FieldValue:[]} 2、快速筛选2 截至日期【选择字段 ......
组件 Vue

在vue3中使用element-plus页面重置报ResizeObserver loop completed with undelivered notifications.

在main.js中 const debounce = (fn, delay) => { let timer = null; return function () { let context = this; let args = arguments; clearTimeout(timer); time ......