vue学习
vue学习
最胖的小仙女
一枚前端程序媛,每天都在学习,也喜欢分享,如果你也是刚入行不久,欢迎互粉互相学习~
展开
-
vue自定义指令
在main.js文件定义自定义指令。原创 2024-03-14 17:48:59 · 193 阅读 · 0 评论 -
el-select 改造
el-select 改造原创 2023-03-07 17:59:21 · 710 阅读 · 0 评论 -
手机移动端加载更多(表格首行首列固定vue + vant完整版)
手机移动端加载更多(完整版vue + vant)原创 2022-08-30 10:42:22 · 1167 阅读 · 0 评论 -
请求接口过程需要loading(学习笔记)
请求接口过程需要加载图标,一定要在请求成功或者失败内的函数内隐藏掉加载图标,不能直接在外面写。不然请求还在等待中,加载图标就没有了。librarySignatureDetail () { this.loading = true let params = { id: 1 } API.detail(params) .then(res => { this.basicIn.原创 2021-11-24 17:51:21 · 2887 阅读 · 0 评论 -
修改elementui表格label和表单label
很多人在开发过程中,官方给的样式不符合设计图或者不符合需求,这是需要修改样式。表单、表格修改label,需要用到slot属性,不多说,直接上代码比较直观些。// 官方写法 <el-table-column prop="problemReceive" label="问题接收" width="150"> </el-table-column>// 自定义<el-table-column label="问题接收" widt原创 2021-11-08 11:36:57 · 6292 阅读 · 0 评论 -
swiper 6.7.5 自动轮播
swiper 6.7.5 自动轮播import Swiper, { Autoplay } from “swiper”;//一定解出Autoplayimport “swiper/swiper-bundle.css”;Swiper.use([Autoplay]);原创 2021-10-25 21:31:11 · 2250 阅读 · 0 评论 -
解决vue3.x debugger不能使用的问题
package.json->eslintConfig找到rules属性填写这段代码"rules": { "no-debugger": "off", "no-console": "off", "generator-star-spacing": "off", "no-tabs": "off", "no-unused-vars": "off", "no-irr原创 2021-10-09 16:40:57 · 3836 阅读 · 0 评论 -
快速在vue3.0 中创建vue文件(快捷键)
VScode》文件》首选项》用户片段》vue.json(Vue)vue.json配置:{ "Print to console":{ "prefix": "vuec", "body": [ "<template>", " <div>", " </div>", "</template>", "", "<script>", "import { defineComp..原创 2021-09-23 09:28:40 · 1985 阅读 · 0 评论 -
手动创建vue3.0项目
1、windows键+r 弹窗输入框输入cmd命令2、vue create vue3_1(项目名称)创建项目3、输入上面一行命令,回车出现下面三个选择Default ([Vue 2] babel, eslint) ,一般选择手动配置// vue2 默认设置(直接enter)非常适合快速创建一个新项目的原型,没有带任何辅助功能的 npm包 Default (Vue 3 Preview) ([Vue 3] babel, eslint)// vue3默认设置(直接enter)非常适合快...原创 2021-09-18 09:37:19 · 355 阅读 · 0 评论 -
点击回到顶部
默认不显示回到顶部的按钮,当滚动条滚到大于100像素的时候,回到顶部的按钮显示,点击顶部按钮回到顶部,然后回到顶部的按钮消失。 1、 先在项目里面引入iconfont图标,我使用iconfont Unicode编码线上字体图标,创建一个iconfont.css文件,把下面的代码复值到iconfont.css文件保存。@font-face{font-family:'iconfont';/*Projectid2737254*/src:url('...原创 2021-08-11 22:19:13 · 156 阅读 · 0 评论 -
vue打包之后,放到服务器上访问不到static文件夹下面的html文件,该如何解决
以前都是和团队合伙开发前端,从不接触设置打包配置项。现在公司前端一个人,要自己学会配置。最近写公司官网,vue文件打包之后,在项目里面通过window.open()访问放在static下的html文件,放在公司服务器访问不到static下面的文件,问题出现在打包配置项上。vue组件里面使用:window.open("/static/pro/protocol_privacy.html"); // 错误的写法因为我打包配置不是在根目录下(/),而是放在/home/目录下,所以访问静态页面时...原创 2021-07-02 11:03:51 · 5711 阅读 · 0 评论 -
vue3.0怎么使用UI插件和vue2.x的区别
1、首先要知道怎么安装,举个例子vxe-tableVUE3.0:npm install xe-utils vxe-table@nextVUE2.x:npm install xe-utils vxe-table发现后面多了@next,本人这两天也是刚开始学习vue3.02、怎么引入main.js中VUE3.0:importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'...原创 2020-12-24 10:32:36 · 755 阅读 · 0 评论 -
vue3.0 怎么引入element UI
两种方式:1、npm install --save element-plus安装import { createApp } from 'vue' import App from './App.vue'import element from 'element-plus'import 'element-plus/lib/theme-chalk/index.css'const app = createApp(App)app.use(element)2、vue add elementUI.原创 2020-12-23 19:52:44 · 6482 阅读 · 2 评论 -
element UI中滑块slider的使用,提示信息改为 百分百%
<el-sliderv-model="form.delta":format-tooltip="handlDelta"show-input/>handlDelta(e){returne+'%'},原创 2020-05-27 08:53:48 · 3934 阅读 · 2 评论 -
vue中使用NProgress进度条
NProgress用浏览器打开项目,在页面结构和数据没有加载显示之前,顶层就会出现一个进度条,页面布局完整显示进度条会消失如何使用呢?===》先安装 : npm install --save nprogress 或者yarn add nprogress//用法NProgress.start();NProgress.done();//一般在main.js全局导入import NProgress from 'nprogress'import 'nprogress/nprogress.原创 2020-05-25 17:12:38 · 636 阅读 · 0 评论 -
修改elementUI input和普通的input
1、修改elementUI input的placeholde默认样式 >>>input::-webkit-input-placeholder{ color:#606266;//>>>同等/deep/ 不建议用/deep/,在安装ESLint格式情况下 }2、普通的input input::-webkit-input-placeholder{ color:#606266; }...原创 2020-05-18 11:05:24 · 572 阅读 · 0 评论 -
Vue 运行98%停止了、‘index’ is defined but never used not no-unused-vars等问题
1、最近写项目遇到一个坑,可以说是自己给自己挖的大坑,发现项目运行到百分之九十八的时候就停了并没有报错,后来在网上查了相关资料,先是删掉依赖,重装npm install 安装依赖,但是这个方法不好使,后来发现组件嵌套的时候,引入的组件路劲写的不对。路劲改对了,就能正常的执行2、报下面的错误其实是语法错误因为安装了eslint格式化工具,语法要求比较严格,导致报错。解决方法要不把eslint删掉,要不在.eslintrc.js添加这段代码rules:{'no-console...原创 2020-05-17 13:20:41 · 7389 阅读 · 3 评论 -
vue项目里用到打印功能
1、print() 方法用于打印当前窗口的内容。setTimeout(()=>{//v-loading.fullscreen.lock="fullscreenLoading" 全屏加载this.fullscreenLoading=falsethis.$nextTick(()=>{window.print()})},1000)}//页面所有的元素加载...原创 2020-05-11 17:16:13 · 571 阅读 · 0 评论 -
路由导航守卫和路由拦截
1、如果用户没有登录,但是直接通过URL访问特定网页,需要重新导航到登录页面router.beforeEach(( to, from , next ) => {//如果用户访问的登录页,直接放行if (to.path === '/login') return next ()//从sessionStorage中获取到保存的token值const tokenStr = window.sessionStorage.getItem('token')//没有token,强制跳转到登录页面原创 2020-05-11 09:57:53 · 1912 阅读 · 0 评论 -
props使用
父组件给子组件传参数,在子组件里接收数据使用props,每个接收的变量说明type验证,指定默认值props:{//主要是用来接收评价条数和显示的文案ratings:{type:Array,default(){//数组的默认必须是对象形式return[];}},...原创 2020-02-22 10:47:30 · 869 阅读 · 0 评论 -
vue中computed的使用
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值------这句话官网摘抄的。看官方文档的时候,不明白为啥计算机属性是获取本地时间计算机属性没有更新如下例子:computed: { now: function () { return Date.now() } }后来,咨询我对象,他告诉我咋回事。响应式依赖发生改变是指在data函数里的数据发生改变才会触...原创 2020-03-31 14:28:32 · 300 阅读 · 0 评论 -
vue 中使用css3制作加载动画
<template><divclass="loader"></div></template><script>exportdefault{name:'Loading'}</script><stylescoped>.loader{po...原创 2020-02-06 09:11:17 · 870 阅读 · 0 评论 -
在vue项目中vue-quill-editor编辑器的使用
在vue项目中编辑器的使用1.npm install vue-quill-editor --save 安装2.在需要编辑的组件引入文件,并注册和调用import { quillEditor } from "vue-quill-editor"; //调用编辑器import "quill/dist/quill.snow.css";配置编辑器配置项根据所需应用例子:contrac...原创 2020-01-19 17:46:33 · 487 阅读 · 0 评论 -
总结近期工作学到的知识(vue),关于点击事件发生某些变化
1、点击某个事件,使得文本框获取焦点先在想要获取焦点的标签给定一个ref附一个值(比如:nickname),作用是可以通过这个属性值获取标签DOM值,接着在事件里写this.$refs.value.focus(),发现点击事件之后文本框获取到焦点,但需要点击两次才可以获取焦点,这原因可能是点击事件有几秒的延时时间。这样不符合需求,后来找到方法解决这个问题,加个延时器点击一次事件就触发文本框获取...原创 2020-01-16 22:55:08 · 155 阅读 · 0 评论 -
vue-cli3更改小图标
1、把.ico图片放到public下和index.html统一路劲2、在vue.config.js 配置环境原创 2019-11-20 09:59:54 · 1001 阅读 · 1 评论 -
在vue3中,模拟json数据
1、json文件必须放到public下,如果json数据中有图片,也得放public下,如下图所示简单明了:原创 2019-11-19 16:43:10 · 610 阅读 · 0 评论 -
成功在手机上真机测试vue项目
昨天在手机上真机测试这几天写的vue移动端项目,先尝试下载iTools,iTools是一款专业的设备管理助手,我的手机是OPPOR9,根据查阅资料,使用USB线连接电脑和手机,然后itools会出现手机具体的操作步骤,手机型不一样操作也不一样,这得根据自己的手机来,我按照说明一步步来,操作完之后,会发现手机最上方有(程序员开发模式),这几个字记得不太清楚。把所有的步骤都操作完之后,还提...原创 2019-08-28 10:12:25 · 345 阅读 · 1 评论 -
vue webpack配置跨域
一般不是同源策略都需要跨域,本人用的是webpack配置代理跨域,下面配置过程:首先,找到config下 的index.js然后 index.js打开,找到proxyTable进行配置 下面是我配置要访问的服务器地址,都附有解释在请求数据组件修改请求数据地址路劲,因为http://39.97.33.178被/miao代替,所以好比我要访问 http://39.97.33.17...原创 2019-08-20 11:24:06 · 989 阅读 · 0 评论 -
vue启动服务器端口号每次都不一样
昨天在自己电脑上运行朋友给的项目,由于他是用vue3.0,而我使用的是vue2.5.2,在运行他的项目时有错误提示,可能版本的问题,本人就照着错误提示去下载插件,结果他的项目好使了,但是自从那次起,每次执行我的项目发现端口号都是不一样解决办法: 先下载npm install portfinder@1.0.21 重装依赖npm install ...原创 2019-08-20 10:57:53 · 1238 阅读 · 0 评论