![](https://img-blog.csdnimg.cn/20190928134352343.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 53
Vue
Yoo前端
Yoo前端,带来无限可能。
展开
-
Vue.js中如何实现以列表首列为表头
一般情况table列表的展示,列头都在第一横行,此方法用于列头在第一列的情况。原创 2024-05-28 23:38:57 · 344 阅读 · 1 评论 -
proxyTable解决跨域问题原理
vue proxyTable解决跨域问题原创 2023-01-30 10:29:08 · 398 阅读 · 0 评论 -
vue3之实现响应式数据ref和reactive
vue3 实现响应式数据 ref 和 reactive原创 2022-12-07 15:13:26 · 1365 阅读 · 0 评论 -
vue3+qiankun项目搭建
vue3+qiankun项目搭建原创 2022-11-22 17:49:37 · 647 阅读 · 0 评论 -
element el-dialog实现拖动效果
利用vue自定义指令实现element ui 中el-dialog无法拖动的问题。原创 2022-07-30 16:12:40 · 1677 阅读 · 4 评论 -
vue倒计时弹出警告
wsTime: '', // weksoket计时 measurementInterval: null // 更新计时器 this.wsTime = 0 this.measurementInterval = setInterval(() => { this.wsTime++ if (this.wsTime >= 40) { this.$message.warning('Update Time Out!')..原创 2022-05-04 15:08:55 · 593 阅读 · 0 评论 -
vue打包后修改接口地址(私有化部署)
私有化部署应用场景1.客户对于软件交付物需要自己部署数据库和站点的情况。2.一套软件通过修改某文件的方式(较低成本的更改),以达到调换接口的目的。解决方案在vue项目中public文件夹下新增serverConfig.js文件夹(function (window){ window.$config = { // BASE_API: 'http://yyyyyyyyyyyy', BASE_API: 'https://xxxxxxxxxxxxx', } }原创 2022-03-02 16:05:09 · 868 阅读 · 0 评论 -
vue2迁移vue3之v-model
v-modelvue2.x语法中<ChildComponent v-model="pageTitle" /><!-- 是以下的简写: --><ChildComponent :value="pageTitle" @input="pageTitle = $event" />在组件上使用v-model相当于绑定value prop并触发input事件。在ChildComponent组件中,需要添加model选项来修改prop或事件名称。export def.转载 2022-02-15 11:43:38 · 279 阅读 · 0 评论 -
vue项目express本地部署
1 . vue打包命令npm run build生成dist文件夹2 . 全局安装express打开cmd 命令行win+R cmd 回车npm install -g express-generator找到任意一个本地区域新建本地express服务器依次执行以下命令express myExpresscd myExpressnpm install后生成如下文件夹把dist中的文件放到public中执行npm start默认端口为3000 即部署到 http:原创 2021-12-15 11:32:24 · 1405 阅读 · 1 评论 -
转载:Vue引入图片的几种方式
注明转载,原作者:翔子1987原地址:https://www.jianshu.com/p/cdd73ef7a5e5情况1 图片在/public目录下把图片放到与index.html同级的目录下方式1因为vue编译后会生成index.html,所以我们将图片与index.html放在同一目录下,相当于在index.html中使用引入图片<!-- img标签引入图片:图片名称,这种属于相对路径,在index.html的同级目录下查找此图片 --><img src="log.转载 2021-12-09 16:42:32 · 5064 阅读 · 0 评论 -
vue3文档速览之生命周期
https://v3.cn.vuejs.org/官网yyds首先作为一个半吊子vue2的开发者,让我对vue3产生兴趣的理由无非就是,‘打包迅速’,‘编译快’,‘开发效率直线提升2倍’等等的宣传。这期我们来看一下生命周期方向vue3 对于 vue2 有什么改变。生命周期首先来看一下两个生命周期的对比vue2历史的八大生命周期还历历在目:beforeCreate: 组件实例刚被创建, 组件属性计算之前, 如data属性等created: 组件实例创建完成, 属性已绑定, 但DOM.原创 2021-12-08 16:50:48 · 719 阅读 · 0 评论 -
vue可视化项目解决方案DataV
Vue 大屏数据展示组件库 -------------DataV主要用于构建大屏(全屏),数据展示页面即数据可视化。安装一条龙:npm install @jiaminghi/data-view// 将自动注册所有组件为全局组件import dataV from '@jiaminghi/data-view'Vue.use(dataV)// 按需引入import { borderBox1 } from '@jiaminghi/data-view'Vue.use(borderBox1原创 2021-10-09 11:21:34 · 2476 阅读 · 1 评论 -
vue:extend和mixin的区别
vue extend +$mount 实现vue.extend 返回的是一个 拓展实例构造器 也就是一个预设了部分选项的vue实例构造器。https://www.cnblogs.com/xzybk/p/12786680.html使用extend之前首先先和混入mixin比较一下mixin:混入源码操作:import { mergeOptions } from '../util/index'export function initMixin (Vue: GlobalAPI) { V原创 2021-09-27 10:34:49 · 1109 阅读 · 0 评论 -
vue项目中引入element
首先安装 element ui常规方式还是cdn和npm安装两种npm i element-ui -Smain.js中做相应的配置import ElementUI from 'element-ui';//需要单独引入样式文件import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);按需引入npm install babel-plugin-component -D在babel.config.js中添加pl.原创 2021-09-07 10:21:09 · 714 阅读 · 0 评论 -
vue项目中引入echarts
关于如何搭建vue项目,引入vue-router和vuex。请移步vue项目中引入vue-routervue项目中引入vuex本章着重介绍对于echarts的相关引入引入Echarts制作图表获取,安装echarts在html 设置一个容器调用echarts.init方法进行初始化调用初始化的实例的setOption来配置数据npm install echarts --save//echarts容器<div id="myChart" :style="{ width: '原创 2021-09-03 15:24:35 · 223 阅读 · 0 评论 -
vue项目中引入vuex
如果说vue-router 解决了vue 组件与路由的一一映射问题,那vuex就是对应解决了vue的状态管理。如果对vur-router引入和vue基础项目搭建有疑惑的读者可以移步vue 项目中引入vue-router由于vuex同样是外部依赖,所以安装也就是vuex的第一步:npm install vuex --save在src目录下新建store文件夹index.js//引入外部依赖import Vue from 'vue';import Vuex from 'vuex';V.原创 2021-09-02 15:14:04 · 902 阅读 · 0 评论 -
vue项目中引入vue-router
对vue-router的知识点还没有基本了解的小伙伴可以移步至此篇博客大白话攻破VueRouter重点知识继续往下就是在vue项目中实战操作了搭建一个vue项目这里不多赘述,简单过一下:vue create newtestcd newtestnpm run serve此时vue-cli已经帮助搭建一个简单的vue架子了,但其中并没有vue-router;安装一下vue-routernpm install vue-routervue-router的原理是把组件和路由进行一一映射,而映.原创 2021-09-02 11:11:40 · 5451 阅读 · 1 评论 -
大白话攻破VueRouter重点知识
https://router.vuejs.org/zh/ vue router 官方文档wx:前端周计划官方文档里讲了很多很细,但是很多并不便于理解。这里把vue router 分为几个重点来总体概述一下。通过简单的语言来理解文档中所描述的概念。动态路由的分配其下有三个重要的点,分别是 动态路径参数,通配符和匹配优先级动态路径参数id即是一个动态路径参数path:'/user/:id' 场景可以想象为 :不同用户进入同一个页面,携带的用户id不同而且这个参.原创 2021-09-01 11:03:15 · 270 阅读 · 0 评论 -
VueX详解及如何实现持久化
const store = new Vuex.Store({ state: { isPlayed: false, }, mutations: { markVideoPlayed(state) { //改变state state.isPlayed = true; //设置localstorage window.localStorage.isPlayed = JSON.stringify(true); }, setPl原创 2021-08-09 14:17:11 · 408 阅读 · 0 评论 -
Vue中route和router的区别
route 和 routercomputed:{List(){return this.$route.matched;}}原创 2021-08-02 15:39:14 · 826 阅读 · 0 评论 -
vue虚拟dom核心方法patch解析
浏览器渲染引擎流程创建DOM树——>创建StyleRules——>创建Render树——>布局Layout——>绘制Painting虚拟DOM,virtual Dom首先虚拟DOM 并不是Vue独有的,包括React等其他前端框架,只要采用了先计算后操作实体DOM都可以统称为基于虚拟DOM。其设计是为了解决浏览器的性能问题。snabbdom而Vue的虚拟DOM技术 主要基于GitHub 中的snabbdom:snabbdom:一个专注于简单性、模块化、强大功能和性能.原创 2021-07-15 15:41:39 · 690 阅读 · 7 评论 -
对vue大组件拆分的思考
拆分大对象组件化的vue给人的印象往往是快而小,简洁明了,但随着业务量和判断逻辑的堆叠产生,可能也会诞生一些很大的组件。一个组件的HTML的代码量超过200行应该就算很大的组件了,今天对一个超过400行的组件如何进行优化来进行讨论。引用模式:提高复用率在一个toB的工单界面,一个工单卡片的组件可以被任何一个状态页去组装,很明显card组件的复用性是很高的。可以考虑拆分后的子组件是否可以进行组件的引用。可读性与以维护一个超过400行的代码掺杂复杂的逻辑与状态判断,可读性不用说也是很差的,想定原创 2020-07-22 15:33:16 · 1745 阅读 · 1 评论 -
前端防止反复发送请求(双击问题)vue实现
两种实现方式:1.在按钮点击发起请求后,弹个Toast,显示等待数据,等请求数据返回了将Toast清除掉。//防止双击Vue.directive("loading", { componentUpdated: function(el, binding) { if (binding.value == true) { Toast.loading({ duration: 0, // 持续展示 toast forbidClick: true, // 禁用背原创 2020-07-20 17:37:03 · 1705 阅读 · 0 评论 -
vue子组件继承父组件scoped样式的方法
父组件使用scoped 无法控制子组件样式的办法:/deep/应用到子组件原创 2020-07-16 13:43:09 · 3441 阅读 · 0 评论 -
解决报错[Vue warn]: data functions should return an object
data中 return{};父组件使用scoped 无法控制子组件样式的办法:/deep/应用到子组件组件分解原创 2020-07-16 13:40:27 · 2631 阅读 · 0 评论 -
开局一张图,理解Vuex
Vuex作为一个组件来使用,可以更好的管理和维护整个项目的组件状态。Vuex 的基本用法vue-router基础上开发首先通过Npm进行安装:npm install --save vueximport Vue from 'vue';import VueRouter from 'vue-router';import Vuex from 'vuex';import App from './app.vue';Vue.use(VueRouter);Vue.use(Vuex);vuex配原创 2020-07-09 15:25:36 · 248 阅读 · 0 评论 -
开局一张图,看懂Vue自定义指令
自定义指令自定义指令也可再局部或者全局进行自定义。全局注册Vue.directive('focus',{//指令选项});局部注册var app=new Vue({el:'#app',directive:{focus:{//指令选项}}})自定义指令的选项:钩子函数bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中).原创 2020-07-08 09:43:02 · 148 阅读 · 0 评论 -
一页图纸看懂Vue组件之间的交互
一页图纸,顾名思义真的是一页图纸,让我们来慢慢展开。组件名:Vue.component(‘my-component-name’,{}).这个形式的组件名应该是大家见过的最多的,也是最熟悉的。组件名的两种写法:使用 kebab-case短横线分隔命名:当使用这种命名方式,也必须用这种命名方式来引用<my-component-name>使用 PascalCase首字母大写:也叫做帕斯卡命名法,重在首字母大写。<my-component-name> 和 <My原创 2020-07-06 17:10:00 · 629 阅读 · 0 评论 -
使用echarts基于vue的疫情地图
www.echartsjs.com什么是echarts:ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。ECharts 3 中更是加入了...原创 2020-02-27 14:20:34 · 2568 阅读 · 2 评论 -
vue开发如何让ESLint闭嘴(error Mixed spaces)
error Mixed spaces and tabs no-mixed-spaces-and-tabs方法简单:新建一个vue.config.jsmodule.exports = { //避免eslint报错 lintOnSave:false }原创 2020-02-26 20:41:19 · 833 阅读 · 0 评论 -
npm audit 三连弃npm从yarn
相信大家很多在安装npm依赖的时候遇到了如下问题run `npm audit fix` to fix them, or `npm audit` for details所以我们很多查到了audit三连npm audit fixnpm audit fix --forcenpm audit#扫描项目漏洞把不安全的依赖项自动更新到兼容性版本npm audit fix#强制执行 aud...原创 2020-02-26 16:46:45 · 849 阅读 · 0 评论 -
Vue搜索站点项目
在bilibili山地人学习后整理封装logo组件新建一个MySearchLogo.vue组件:template:在组件页面用less进行样式定义定义logo样式的字体大小,和color颜色ok现在搞定了一个MySearchLogo的组件,现在需要在外部引用这个组件:山地人老师的话:充分利用vuecli脚手架,把东西改改就完了,然后point来自经验之谈的点,这个logo...原创 2019-12-09 20:52:19 · 250 阅读 · 2 评论 -
Vue学习日志之如何使用vant
Vue的移动端UI组件,现在最火爆的应该就是vant 了,今天我们来看看如何使用firstsecondnextimport Vue from 'vue';import { Button } from 'vant';Vue.use(Button); <van-button type="default">默认按钮</van-button> <va...原创 2019-10-21 15:43:03 · 217 阅读 · 0 评论 -
Vue学习日志之.env
在新建的vue项目中,package.json 同级目录下创建.env类似于定义全局变量但先决条件是必须含有VUE_APP格式比如VUE_APP_A在组件.vue文件中可以如此调用data(){return{url:process.env.VUE_APP_A}}...原创 2019-10-14 19:35:12 · 267 阅读 · 0 评论 -
Vue学习日志之如何添加多页显示
Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面的应用。首先使用的Vue-cli3,所以vue create 项目后,项目内并没有vue.config.js,需要自己新建在package.json的同级目录。index.html原本create时在public 中,因为要多页显示,所以,在src目录下增加目录pages调整部分的引入文件路径...原创 2019-10-14 18:51:05 · 324 阅读 · 0 评论 -
Vue学习日志之指令和事件
鸭鸭 GO!v-if:判断show的true or false<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>指令事件</title> </head> <body> <div id="app"> ...原创 2019-09-28 16:40:46 · 140 阅读 · 0 评论 -
Vue学习日志之计算属性
计算属性可以完成复杂的逻辑,计算属性必须写在computed下,,最终return回计算结果。for example :(若在{{}}中写出这三种操作,则会对今后的维护造成困难)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>计算属性</titl...原创 2019-09-28 18:48:01 · 167 阅读 · 0 评论 -
Vue学习日志之语法糖
语法糖(Syntactic sugar),也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J.Landin)发明的一个术语,指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性,从而减少程序代码出错的机会。-百度百科Syntactic sugar名字很甜,让人用的也很开心,毕竟是简化语言。使用语法糖...原创 2019-09-28 19:10:25 · 1399 阅读 · 0 评论 -
Vue学习日志之绑定class
对象语法<div id=app> <div class="static" :class="{'active':isActive,'error':isError}"></div> </div> <script src="../vue.js"></script> <script> var...原创 2019-09-30 13:05:26 · 110 阅读 · 0 评论 -
Vue学习日志之条件指令
v-if,v-else-if,v-else<div id="app"> <p v-if="x === 1">此时x等于1</p> <p v-else-if="x === 2">此时x等于2</p> <p v-else>x不等于1和2</p></div><script> var ...原创 2019-09-30 17:14:12 · 164 阅读 · 0 评论