![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
Vue一些踩过的坑
有玉微凉,是为樱琅
WebGIS学习交流群461555818,欢迎大家。
展开
-
vue整个页面可以拖拽导入文件
vue整个页面可以拖拽导入文件原创 2023-12-13 09:45:43 · 627 阅读 · 0 评论 -
Vue项目中配置router路由
安装npm install vue-router在main.js中写入import router from './router'new Vue({ store, router, render: h => h(App)}).$mount('#app')配置文件文件目录index中的内容 示例代码,也可以直接拿去用import Vue from 'vue'import VueRouter from 'vue-router'// 系统管理// import ho原创 2021-03-04 17:39:50 · 259 阅读 · 4 评论 -
vue中公共CSS配置文件编写与使用
前言在前端项目中,CSS样式难免有需要大量重复使用的场景,尤其是在不同的页面,比如系统主题色,一样的按钮颜色等等各种使用场景。在一个文件内,当然可以用同样的class名来解决,但是不同文件又该如何呢,这里我们需要提出共用的CSS样式到项目中共用的文件内,然后将在其他需要使用的文件内引入这个文件,调用即可CSS公共文件因为我的系统使用的一般less,css文件也是一样的写法我会在src文件夹下面建一个这个文件,将我所有的主题色和系统共用的字体和一些按钮的颜色等等放到这个文件内在文件内部实例代码是原创 2021-06-20 19:22:13 · 821 阅读 · 1 评论 -
Vue项目全局引入Iconfont(阿里巴巴图标库)
注册注册阿里巴巴账号不必多说https://www.iconfont.cn/搜索你喜欢的图标,然后加入购物车(不需要花钱的,免费的,不知道他为何弄成了购物车,马云想钱想疯了)完事就添加至项目,没有项目的话就新建一个,这个项目和你的vue项目没有直接关系,随便建,重要的是这个项目生成的链接然后点开我的项目,选择你添加的那个项目,然后选择symbol(那几个我也不知道是干啥用的)下面你添加的图标你可以自己改名,每添加一个图标,你的链接就都会变,这里请注意,如果你多添加了图标,一定要记得更新你的原创 2021-03-15 09:50:44 · 992 阅读 · 0 评论 -
Vue项目中配置vuex
安装npm install vuex --save在main.js中import store from './store'下面添加上storenew Vue({ store, router, render: h => h(App)}).$mount('#app')配置文件文件目录是这样index.js中的内容import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// 加载modulescon原创 2021-03-04 17:35:39 · 223 阅读 · 1 评论 -
Vue项目中配置axios
安装安装axios插件npm install axios安装qs插件npm install qs在main.js中声明import Apis from './api/index.js'Vue.use(Apis)http文件import axios from 'axios'import { message } from 'ant-design-vue'import qs from 'qs'/** 提示函数* @param {String} content 提示的内容* @原创 2021-03-04 17:30:30 · 258 阅读 · 1 评论 -
[ob: Observer]与proxy
操作数组时产生的[ob: Observer] 与proxy原创 2023-03-08 22:23:47 · 131 阅读 · 0 评论 -
Vue.extend与$mount的联系使用以及一类应用场景
Vue.extend与$mount的联系使用以及一类应用场景原创 2022-10-14 18:44:41 · 401 阅读 · 0 评论 -
vue3中vite的@路径别名与path中的resolve
vite配置@路径别名node.js中path的resolve方法解析原创 2022-10-12 16:56:38 · 8234 阅读 · 1 评论 -
vue的插槽
vue插槽的简单理解使用场景和使用方法原创 2022-09-27 01:27:49 · 206 阅读 · 0 评论 -
代码规范(记录一下目前自己的规范,长期更新)
代码规范原创 2022-07-07 15:21:10 · 144 阅读 · 0 评论 -
基于ant design vue实现的多层菜单组件封装
菜单组件不同于树组件的是,树组件可以选很多个,而菜单组件只可以选择一个这里放上我的源代码current 是默认选择的节点,是一个数组current: [‘5.3.1’], // 默认选择的节点openKeys是默认展开的节点,也是一个数组openKeys: [‘5’, ‘5.3’], // 默认展开的树大类 <!-- 数据菜单 --> <!-- 这里面只写到了第四层,你需要用到多少,按照我这个格式续写下去就行,他的核心就是如果下面还有一层,那么他只能是这个标签a-su原创 2021-04-12 11:46:35 · 1189 阅读 · 0 评论 -
vue-codemirror显示默认代码
vue-codemirror是一个代码编辑器的插件,如图所示,关于他在vue中的使用请移步此文https://blog.csdn.net/Sakura1998gis/article/details/114067643当我们实现出来这个功能的时候,会发现我们需要考虑一个问题,那就是如何预定义一串html代码。他的预定义的内容是写在这里的而这个code又是接收字符串的。那么我们这一串html代码是如何存在字符串里面呢,用的时候可以拿出来,不用的时候存好。而且这里面还有一个问题,就是存在字符串的原创 2021-02-26 15:31:33 · 996 阅读 · 0 评论 -
HTML在线代码编译与预览(基于vue-codemirror)
成果图大家可以看到在这个成果图内,左边会有一个代码框,用来写代码,右边会实时的更新左边代码实现出来的内容。在代码框内,会如同VScode等代码编译器一样,不同的关键字有不同的颜色,不会说是全都是黑色,就如同真正的代码编译器一样,而且左边会显示行数,选中会有选中的颜色。那么我这是如何做到的呢代码编译器(vue-codemirror)这是一个代码编译器的组件,他的官方网站在这里https://www.npmjs.com/package/vue-codemirror使用的话需要先安装npm原创 2021-02-25 11:24:41 · 2839 阅读 · 4 评论 -
Vue事件总线,eventBus使用
使用目的实现组件之内的通信,也就是传递数据适用范围兄弟组件传值、爷孙组件传值、封装组件的时候要所有被调用的这个组件同时响应实现一些功能的时候使用范例新建js文件 eventBus.js内容为一个vue实例import Vue from 'vue'export default new Vue()如果全局调用的话,在main.js里面import eventBus from './util/eventBus'Vue.prototype.$bus = eventBus局部调用的话,直原创 2021-01-26 10:59:53 · 158 阅读 · 0 评论 -
v-for循环出来的容器悬停后单独更换图片
解决问题后的效果如图,这五个方块是v-for循环产生的,在这里我想要鼠标悬停某一个方块的时候,更换他的图片,图片有两种,一种是默认的,一种是选中状态的,这里就是要鼠标移入,就单独更换他的图片为选中的,其他的不改变,移出后就变回默认的图片。这里的最主要的问题是,v-for循环产生的方块,我们使用的class就都是一种的,这个没办法改变,class的hover事件也写不出来(也许是博主目前能力不够),改变class这样写,就所有的图片都变了,而我只想改变我想改变的那个。当然不用v-for,一个一个的写出来原创 2021-01-14 15:41:18 · 591 阅读 · 0 评论 -
Vue中的import from
Vue中的import from大家都知道,import from 是用来引入一些文件的,在vue中,可能有.js文件.json文件.vue文件在JS和JSON文件引入的时候,往往需要写入一些//例如数组export const a=[]//例如对象export const b={}//例如函数export function c(){}在其他文件中需要引入的时候,就写上,只引入一个的时候可写可不写大括号import {a,b,c} from '你的路径'路径可以是相对路径也可以是绝原创 2020-12-28 16:10:26 · 5874 阅读 · 0 评论 -
VUE儿子组件给爸爸组件传值
不知道怎么转载,把这个网页存一下- -https://blog.csdn.net/weixin_38888773/article/details/81902789原创 2019-11-20 17:31:10 · 368 阅读 · 0 评论 -
vue爸爸组件传儿子组件
爸爸组件里引用儿子爸爸的data里面声明一下nongceName爸爸下面的函数中赋值给这个nongceName这里这个值已经传到儿子里面了下面要在儿子组件里面接这个传过来的数据儿子组件里面props进来数据,接住数据在mounted里面加载好数据,顺便把数据传给list监听数据变化,更新数据,在watch里面method里面写个函数,把监听到的list数据传给nongc...原创 2019-11-20 16:53:05 · 230 阅读 · 0 评论 -
Vue中引用assets中的图片的几种方式
作为img标签引进来 <img class="img" alt="example" :src="require('./../assets/image/applicationOne.png')">作为背景图片引入<span :style="'background-image:url('+require('./../assets/image/gotoSystemTwo.png')+')'" ></span>...原创 2020-12-08 17:48:40 · 13122 阅读 · 0 评论 -
Vue中如何引用视频(vue-video-player)
插件安装npm install vue-video-player -S没有用的话就用淘宝镜像cnpm install vue-video-player -S在main.js里面全局配置上import VueVideoPlayer from 'vue-video-player'// require('vue-video-player/src/theme/myVideo.css')Vue.use(VueVideoPlayer)HTML部分 <video-player c原创 2020-11-26 15:23:54 · 1903 阅读 · 0 评论 -
如何创建一个Vue项目
安装Node.jshttp://nodejs.cn/download/默认一直点就行了安装vue-cli 脚手架参照官网https://cli.vuejs.org/guide/installation.html这个脚手架会自动帮你把一些基础的配置设置安装成功具体操作就是在右键git bash here 这个框里面接连输入npm install -g @vue/cli 下载脚手架npm install -g @vue/cli @vue/cli-service-global 下载全局插原创 2020-11-25 10:29:13 · 119 阅读 · 0 评论 -
vue 中 [__ob__: Observer](被好多人坑了,现在终于解决了)
问题分析看这个问题的朋友先看看情况是不是和我一样,再往下看我的问题是一个对象数组,push进去对象的话,打印出来看,显示的是 [ob: Observer],点看能看到里面的数据,但是我遍历他的话一个值也拿不到,拿到的是空值,如果push的普通的数字,字符串啥的就没事。如果问题一样的话可以继续往下看了。经过半天的各种分析,网上看博客,然后自己也尝试了在不同位置打console.log和断点查看,发现在给对象数组中push进去数据的时候,打印出来就是完美的对象数组,可以遍历,但是我要用的时候那个地方打原创 2020-11-20 16:16:36 · 30102 阅读 · 2 评论 -
VUE子组件弹窗每次打开重新构建
试了很多次,都是打开父页面的时候,第一次打开子组件就会调用子组件的created和mounted,关闭的时候也会调用,但是再次打开就不会调用了,再次关闭会调用,导致每次子组件打开的时候都是上次的数据界面。解决办法是:visiblie.sync和v-if同时使用 :visible.sync="dataAddVisible" v-if="dataAddVisible"```...原创 2020-09-08 09:31:57 · 1629 阅读 · 0 评论 -
Vue光标默认在指定输入框
在想要加光标的html页面上加上ID=“XX”在mounted里面写上this.$nextTick( window.onload = function () { // 光标默认位置 var oInput = document.getElementById('XX'); oInput.focus(); })即可原创 2020-08-04 11:59:51 · 2233 阅读 · 0 评论 -
vue父组件与子组件方法的互相调用
父组件调用子组件的时候实例<changeYourInformation ref="changeInformation" ></changeYourInformation>ref就可以绑定子组件中的方法,在JS调用的时候,写上this.$refs.changeInformation.changeInformation()最后的那个就是子组件的方法...原创 2020-08-04 11:52:09 · 213 阅读 · 0 评论 -
vue跳转路由传值和接值
本页面跳转实例:this.$router.push(’/home/fill_in_report/census’)本页面跳转并且传值实例:this.$router.push({ path: ‘/home/fill_in_report/census’, query: { saveUid: this.rowdata.formUid } })本页面跳转接值实例:this.recordUid = this.$route.query.recordUid 建议写在mounted里面跳转新页面并且传值实例原创 2020-08-04 11:31:19 · 323 阅读 · 0 评论 -
VUE监听一个值的变化随之做出别的改变
我这里面要监听showbartable的值的变化,他的true和flase两种状态会决定我另一个东西的变化,为了监听他的属性变化,先在computed里面写一个函数,如图中红框,返回那个值在watch里面接住上面这个函数,newval和oldval是监听他的时候前后变化,监听到之后,把这个新值当做一个参数传出去,传到一个函数里面在methods里面写传出数据的那个函数,参数i就是那个新值,...原创 2019-11-26 16:23:05 · 3655 阅读 · 0 评论