Vue2
vue2常见选项和生命周期钩子函数
Vue2提供了一些其他选项和钩子函数，以支持更高级的组件功能和配置，这些包括： data：data选项用于定义组件的响应式数据。这些数据将被Vue追踪，以便在数据发生变化时更新视图。 data() { return { message: 'Hello, Vue!' } } methods：metho ......
vue2 父传子，子传父
在Vue 2中，使用props来从父组件向子组件传递数据，而要从子组件向父组件传递数据，通常需要使用自定义事件。关键字分别是： 从父组件向子组件传递数据（父传子）： props：可以在子组件中使用props来接收父组件传递的数据。在父组件中，使用子组件标签的属性来传递数据。 示例： <!-- 父组件 ......
vue2，3render函数的简单使用
render 函数的主要作用： 创建虚拟 DOM：render 函数负责创建虚拟 DOM 元素，这些元素以 JavaScript 对象的形式表示页面的结构和内容。 根据状态和数据生成 UI：render 函数根据组件的状态（data 数据）、属性（props）、计算属性（computed）、方法（m ......
【vue2】实现长按图片保存功能
<span :class="[$style.wxCode, isShow && $style['show']]" @touchstart="touchStart()" @touchend="touchEnd()" ></span> ps.span元素为图片元素，我这里把图片设置为元素背景了，可以直接 ......
vue3比vue2优势
Vue 3相对于Vue 2有一些显著的优势，主要集中在性能、开发体验和一些新的特性上： 性能提升： 虚拟DOM的优化：Vue 3使用了更高效的虚拟DOM算法，减少了不必要的DOM操作，提高了渲染性能。 编译器优化：Vue 3的编译器生成的代码更为紧凑和高效，加速了首次渲染和更新速度。 更小的包大小： ......
getRefs is undefined html vue2项目 报错
vue2项目提示 getRefs is undefined 在div上面写了，ref，还写了v-if 然后再watch中操作了 ref 导致报错。 分析： 组件因为v-if 为 false 没有注册和渲染，在操作的时候还使用了this.$refs函数就会获取不到 解决办法： v-if换成v-show ......
vue2自定义指令实现el-dropdown下拉菜单项最小宽度等于内容宽度
//在main.js添加 Vue.directive('siem-dropdown', function (el, binding, vNode) { let ul = el.querySelector("ul") let uid = vNode.componentInstance._uid; // ......
vue2 指令- unaipp
指令 指令是有 v- 前缀的特殊属性。 指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。 指令的作用是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 一些指令能够接收一个“参数”，在指令名称之后以冒号（ : ）表示。 v-bind 动态地绑定一个 ......
vue2 子组件向父组件传值
父组件： <category-component ref="jobCategory" :title="title" :path="pathUrl" @get-datalist="getDataList"></category-component> 子组件： this.$emit('get-datal ......
Vue2.0 浅学笔记
Vue 是框架，也是生态。 1.Vue API风格 选项式（Vue2） 组合式(Vue3) 2.入门 node.js 版本大于15 3.创建项目 创建项目 npm init vue@latest 开发环境 VScode +Volar 4.基本语法 1.文本插值 仅能使用单一表达式 使用JavaScr ......
【vue2】实现数字纵向滚动效果（计时器效果）
需求： 在页面中显示一个数字，并在进入视口时显示计时器滚动效果： 效果如上 ↑ 新建组件ScrollNumber.vue： <template> <div style=" display: inline-flex; justify-content: flex-start; align-items: ......
vue2兼容ie10
1.找到ie浏览器。可以下载，一般windows自带 2.启动项目，可能会出现再ie中输入本地地址后直接跳转到Microsoft Edge的情况，需要配置后正常使用ie10 配置过程：控制面板--网络和Internet--Internet选项--更改主页--高级--勾选跟Internet Explo ......
vue2 访问网关的时候post无法请求
问题复现： 后台使用微服务的框架 在consul 配置 并使用网关进行代理 。 问题描述 ： 前台访问网关调用后台方法 请求方式为get 时 正常使用 ~post 时 显示跨域问题 post访问路径正常 但就是无效果 显示跨域问题 报错 解决方法： module.exports = defineCo ......
【vue2】 登录发送axios
demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> ......
【vue2】 demo1
练习用的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> ......
Vue2.x项目使用MAPBOX地图
Vue2.x项目 下载安装依赖 npm i mapbox-gl --save npm i mapbox-gl-controls --save 组件代码（注意在官网注册和token值申请） <template> <div class="mapbox-map001"> <p> https://www.m ......
HBuilder打包vue2.0项目生成的APK空白（已解决）
1、config下面的index.js中bulid模块导出的路径，因为index.html里边的内容都是通过script标签引入的，而路径不对，打开肯定是空白的。先看一下默认的路径。 build: { // Template for index.html // Paths 需要修改的是这里的路径 i ......
vue2.0 项目创建和配置
项目的框架概述： 前端： 1、采用vue2.0 2、采用element ui 后端： 1、Jave 一、前端 1、创建项目 vue create web_admin 创建成功后的项目结构 2、安装element ui指定版本 yarn add element-ui@2.15.12 3、在main.j ......
vue2项目创建
vue2项目 基本安装 vue creare 项目名 cd 项目名 code . 按照其它模块 element-ui npm i element-ui -S 在 main.js 中写入以下内容： import Vue from 'vue' import App from './App.vue' im ......
vue2和vue3使用echarts时无数据，怎么显示暂无数据图片或文字
一开始也经历了用v-if和v-show，v-show的话echarts还会留出暂无数据图片的位置，导致echarts变形，v-if在加载和不加载切换时，dom会获取不到；后来也是在网上找的方法，时间有点长，原文地址就不贴了。 对了，在网上查方法的时候还找到了echarts noDataLoading ......
从零开始使用vue2+element搭建后台管理系统（动态表单实现（含富文本框））[待完善]
在后台项目的实际开发过程中，涉及到表单的部分通常会使用动态渲染的方案进行实现，由后端接口返回表单配置，前端进行遍历渲染。考虑到通用后台需要具备的功能，除了基础的表单项如输入、下拉、多选、开关、时间、日期等，还需要具备上传、富文本框等功能。 首先导入一个百度来的富文本框插件：npm install v ......
关于vue2的模块级总结
前阵子在赶一个项目的进度，一直没时间做总结，今日闲来无事，消化一下。 背景 vue2的项目，面向受众为g端 内容 1. 项目原因，单路由下包含详情&列表两页面。根据v-if跳转，笔者这里用的是动态组件的方式 2. 同样由于项目原因，使用的模块级vuex，因而在使用时，也有了许多盲点： （如图：） 使 ......
vue2 使用tinymce编辑器实现上传图片及粘贴word文本保留格式并粘贴图片自动上传
下载对应的版本 npm install @tinymce/tinymce-vue@3.0.1 -Snpm install tinymce@5.8.2 -S 然后在node_modules中找到tinymce把整个文件复制下来粘到public中 在组件页面使用 根据自己需求进行注释或添加功能 <tem ......
Vue2开发笔记
目录Vue 组件化开发笔记环境安装生命周期Vue2笔记CSS局部生效组件自定义事件全局事件总线1. Vue 原型对象上包含事件处理的方法2. 所有组件实例对象的原型对象的原型对象就是 Vue 的原型对象3. 全局事件总线4. 全局事件总线操作5. 消息订阅与发布$nextTick过渡动画1. 用tr ......
vue2原理初探-数据代理和数据劫持
本篇文章主要想简单聊聊vue如何实现数据修改，页面联动的底层原理。 当然，篇幅有限，只是自己一些浅显的认知而已，我会从一下几个方面去聊，希望对你有所帮助。 几个基础知识点 数据代理 数据劫持 完整demo 一、几个基础知识点 1.普通函数和箭头函数的区别 我们知道，每个函数执行都会形成一条作用域链[ ......
Vue2 Modal组件函数式调用封装（基于Ant Design Vue 组件）
一、h函数（createElement函数）版本 import Vue from "vue"; import { Modal } from "ant-design-vue"; // 获取扩展 Modal 组件 function getModalConstructor(modalProps, chil ......
从零开始使用vue2+element搭建后台管理系统（主页）
登录后，应有一个主页，可以展示当前用户的一些信息，例如上次登录时间地点、修改手机号、重置密码等简单功能，如图： 首先在views下新建HomeView.vue文件： <template> <el-row> <el-col :span="24"> <!-- user卡片 --> <el-card> < ......
从零开始使用vue2+element搭建后台管理系统（实现按钮权限控制）
思路：登录后请求用户信息接口，后端返回用户信息中包括权限数组，数据格式be like： 前端对用户信息进行存储（对没错又是假接口）： // 获取用户信息 async getUserInfo(mobile) { try { this.loading = true; const res = await ......
vue2实现pc端自适应分辨率
思路：使用lib-flexible结合postcss-pxtorem实现 第一步 在项目utils下建立flexible.js文件(直接下载则不用新建该文件) 第二部 复制以下代码到刚建好的文件中或者直接yarn install lib-flexible-pc-y // 基于 libflexible ......
vue2使用百度地图（vue-baidu-map）
https://dafrok.github.io/vue-baidu-map/#/ https://www.npmjs.com/package/vue-baidu-maphttps://lbs.baidu.com/index.php?title=jspopularGL/guide/getkey 一 ......