vue.js
文章平均质量分 58
Are杨
这个作者很懒,什么都没留下…
展开
-
git环境变量配置及node升级相关问题
如果出现cmd:无法将“git”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确。因为有些版本sass不支持样式穿透符 >>> 所以要更换成::v-deep。node升级到v16.16.0版本 之前项目依赖的更改。node-sass 去掉 改换成下面版本。最近新装电脑总结一些问题。...原创 2022-08-04 15:58:54 · 369 阅读 · 0 评论 -
Vue3基础难点总结
vue3.0相比于vue2.0的一些变化难点转载 2022-07-20 14:33:08 · 1090 阅读 · 0 评论 -
Vue3.2中的setup语法糖
vue3.2 到底更新了什么?根据原文内容的更新的内容主要有以下 5 块:1.SSR:服务端渲染优化。@vue/server-renderer包加了一个ES模块创建,与Node.js解耦,使在非Node环境用@vue/serve-render做服务端渲染成为可能,比如(Workers、Service Workers)2.New SFC Features:新的单文件组件特性3.Web Components:自定义 web 组件。这个我们平时很少用到,但是应该知道4.Effect Scope A转载 2022-03-23 14:35:02 · 1002 阅读 · 0 评论 -
Vue3 中的 setup 语法糖
vue3.2 到底更新了什么?根据原文内容的更新的内容主要有以下 5 块:1.SSR:服务端渲染优化。@vue/server-renderer包加了一个ES模块创建,与Node.js解耦,使在非Node环境用@vue/serve-render做服务端渲染成为可能,比如(Workers、Service Workers)2.New SFC Features:新的单文件组件特性3.Web Components:自定义 web 组件。这个我们平时很少用到,但是应该知道4.Effect Scope AP转载 2022-02-24 13:25:44 · 1998 阅读 · 1 评论 -
一份 ElementUI 问题清单
1、form 下面只有一个 input 时回车键刷新页面原因是触发了表单默认的提交行为,给el-form 加上@submit.native.prevent就行了。<el-form inline @submit.native.prevent> <el-form-item label="订单号"> <el-input v-model="query.orderNo" :placeholder="输入订单号查询" clearable转载 2021-10-23 09:17:07 · 159 阅读 · 0 评论 -
vue 插槽详解
插槽: 作用:可以让你封装组件的时候让组件更加的灵活 默认情况下组件标签内部嵌套的标签或者组件默认是不会显示的。如果需要进行显示则就需要用到了插槽匿名插槽1、在组件标签内部书写templet标签,需要嵌套的内容放在template标签内部。同时给template标 签加一个指令 v-slot2、在组件的内部通过<slot></slot>进行接收嵌套的数据这里举出一个实例//父组件<template> <div原创 2021-10-08 15:45:18 · 274 阅读 · 0 评论 -
vue组件间的通信及vuex详解
概述组件之间的共享数据的方式父向子传值:v-bind 属性绑定子向父传值:v-on 事件绑定兄弟组件之间共享数据:EvenBus$on 接收数据的那个组件$emit 发送数据的那个组件父向子传值父组件模板:<template> <child :msg="message"></child></template><script>import child from './child.vue';export原创 2021-09-26 16:56:04 · 520 阅读 · 0 评论 -
ElementUI常见的问题总结
1、form 下面只有一个 input 时回车键刷新页面原因是触发了表单默认的提交行为,给el-form 加上@submit.native.prevent就行了。<el-form inline @submit.native.prevent> <el-form-item label="订单号"> <el-input v-model="query.orderNo" :placeholder="输入订单号查询" clearable转载 2021-09-17 14:47:35 · 609 阅读 · 0 评论 -
在Vue项目中应用TypeScript
前言在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator,其是基于vue-class-component库而来,这个库vue官方推出的一个支持使用class方式来开发vue单文件组件的库主要的功能如下:methods 可以直接声明为类的成员方法计算属性可以被声明为类的属性访问器初始化的 data 可以被声明为类属性data、render 以及所有的 Vue 生命周期钩子可以直接作为类的成员方法所有其他属性,需要放在装饰器中使用vue-pr转载 2021-09-15 12:52:33 · 1642 阅读 · 0 评论 -
Vue高级实战技巧
自动注册组件我们平时可能这样引入注册组件。每次都得需要在头部引入,然后注册,最后在模板上使用。<template> <div id="app"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div></template><script>import HelloWorld from './components/HelloWorld.vue'export转载 2021-07-21 16:19:45 · 260 阅读 · 0 评论 -
Vue3.0响应式API整理
响应性APIreactive作用: 创建一个响应式数据。本质: 传入数据(复杂类型:数组和json对象)包装成一个Proxy对象。如果传入其他对象,默认情况下修改对象,界面不会自动更新,如果想更新,可以通过重新赋值(创建一个新的对象)的方式。<template> <div class="reactive"> <button @click="fn">点击</button> <p>{{ state }}</p>转载 2021-07-21 12:44:34 · 496 阅读 · 0 评论 -
vue 自定义弹窗组件
父组件<template> <div> <p @click="onDelete"> 打开 </p> <!-- 弹框 --> <code-dialog :status.sync="deleteDialogStatus" /> </div></template><script>import codeDialog from原创 2021-07-21 12:31:47 · 2155 阅读 · 0 评论 -
10个Vue开发技巧
路由参数解耦一般在组件内使用路由参数,大多数人会这样做:export default { methods: { getParamsId() { return this.$route.params.id } }}在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。正确的做法是通过 props 解耦const router = new VueRouter({转载 2021-06-11 10:25:07 · 291 阅读 · 0 评论 -
vue3.0笔记(二)
关于setup一些细节问题及组件之间的传值这里创建一个父组件<template> <h2>App父级组件</h2> <h3>msg:{{ msg }}</h3> <button @click="msg += '==='">更新数据</button> <hr /> <Child :msg="msg" msg2="真香" @xxx="xxx" /></template>原创 2021-02-22 16:10:12 · 185 阅读 · 0 评论 -
vue3.0笔记(一)
2020年9月发布的正式版Vue3支持大多数的Vue2的特性Vue中设计了一套强大的composition组合APi代替了Vue2中的option API ,复用性更强了更好的支持TS最主要: Vue3中使用了Proxy配合Reflect 代替了Vue2中Object.defineProperty()方法实现数据的响应式(数据代理) 之前用的是Options APIexport default{ data:"" computed:"" watch:"" moun原创 2021-02-08 15:34:03 · 267 阅读 · 0 评论 -
使用vscode如何建立vue模板
打开VSCODE编辑器,依次选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索框,我们输入vue, 如下:将此段代码复制其中{ "Print to console": { "prefix": "vue", "body": [ "<!-- $0 -->", "<template>", " <div></div>", "</template>",原创 2021-01-21 09:34:57 · 280 阅读 · 0 评论 -
webpack之项目资源优化
webpack打包时,会根据webpack.config.js 中url-loader中设置的limit大小来对图片进行处理,小于limit的图片转化成base64格式,其余的不做操作。对于比较大的图片我们可以用image-webpack-loader 来压缩图片。具体方法:npm install image-webpack-loader --save-dev在 webpack.config.js 中配置:{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, u原创 2021-01-15 11:08:15 · 175 阅读 · 0 评论 -
9 个极其强大的 JavaScript 技巧
JS操作的小技巧转载于https://mp.weixin.qq.com/s/s6kUhCGpazUgXHvuxInimQ转载 2020-12-25 09:03:41 · 119 阅读 · 1 评论 -
分享几个vue常用的自定义指令
https://segmentfault.com/a/1190000038475001转载 2020-12-24 12:46:05 · 397 阅读 · 0 评论 -
vue3.0+ts整理
https://24kcs.github.io/vue3_study/原创 2020-12-15 14:06:50 · 899 阅读 · 0 评论 -
element-ui button防重复点击指令
防止按钮重复点击指令因为手快的同学,再进行按钮操作的时候,会触发多次,若这个点击事件接入API,就会重复请求API。所以为了防止这个问题,我不可能一个按钮去写一个防点击,这多麻烦。所以就写了个指令。下面上代码export default {}.install = (Vue, options = {}) => { Vue.directive('dbClick', { inserted(el, binding) { el.addEventListener('click', e转载 2020-12-02 13:00:32 · 3188 阅读 · 1 评论 -
js数组转换为数组对象
let arr = ["刘备","关羽","张飞","赵云","马超","黄忠"];let obj = {};// 将数组转化为对象for (let key in arr) { obj[key] = arr[key]; };let newObj = Object.keys(obj).map(val => ({ label: obj[val], value: obj[val] }));console.log(newObj)效果如下:原文转转载 2020-12-02 09:39:05 · 4010 阅读 · 0 评论 -
element ui el-upload上穿多张图片
需求如下:这里是在form表单中做的<el-form-item label="凭证照片" ref="loadElement" prop="picList"> <el-upload action="#" ref="upload" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-re原创 2020-10-24 13:54:12 · 1236 阅读 · 1 评论 -
仿element ui实现自定义UI插件
有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强。博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用element-ui的时候是使用Vue.use()语句来使用的,而axios的时候,不用Vue.use(),只要import就可以导入进来了,感觉很神奇,细细的发现,原来他们的不同是因为axios里面并没有写install方法,而element-ui就有写这个方法,下面就利用这个install来写一个自己的插件。首先看一原创 2020-10-16 11:35:09 · 552 阅读 · 0 评论 -
vue项目实现每隔一段时间刷新当前页面(轮询)
背景描述:我使用的是vue+element 开发系统,需要一段时间监测数据的变化解决方案:本来想使用websock效果更佳,想到仅仅单页面使用就是用后端缓存数据前端定时请求的方法。使用定时器和延时器的方案首先介绍下定时器和延时器setInterval(function(){}, milliseconds)——会不停的调用函数setTimeout(function(){}, milliseconds)——只执行函数一次乍看之下,setInterval会符合我们的业务需求,然而也需要注意一些坑,原创 2020-10-11 13:16:33 · 6145 阅读 · 1 评论 -
element ui分页常见问题
需求:分页显示数据时当把第二页数据全部删除,要求自动返回第一页 watch:{ total(){ if(this.total==(this.page-1)*this.pageSize&& this.total!=0){ this.page-=1; this.getPostList();//获取列表数据 } } },...原创 2020-09-02 14:35:46 · 459 阅读 · 0 评论 -
vue不常用的知识点的整理
原文转载 https://blog.csdn.net/a5252145/article/details/107316953转载 2020-08-18 11:44:35 · 191 阅读 · 0 评论 -
element ui el-button按钮防止多次触发单击事件
需求:添加提示,使按钮点击提交数据时,按钮不可以再操作,防止数据重复提交,防止多次触发事件实现思路:添加全局loading让遮罩层后不可点击话不多说上代码 <el-button type="primary" @click="push">提交</el-button>这里提交数据为formdatapush(){ const loadingObj=this.$loading({ lock:true, text:"提交中...",原创 2020-08-12 17:01:20 · 6827 阅读 · 2 评论 -
element ui中el-switch使用的坑
需求说明1、根据后台传值动态显示开关(0为关,1为开)2、对开关进行操作时请求后台,需要传两个参数:id,type需求描述我先说我的需求,我想在列表的每一条添加多个个开关,可以改当前一条数据的状态,并发送到服务端,并根据服务端返回的结果局部刷新当前页数据期望结果状态是后端返回给我的状态,分别是1和2,我先点击switch发送给后端这条数据的id,然后修改这一条数据的状态,而不是重新拿这个列表,如果后端返回失败的情况这个switch不做改变解决方法Swich默认是boolean类型,而后台原创 2020-08-07 14:23:20 · 16553 阅读 · 6 评论 -
Vue 中使用watch监听$route 无效问题
Vue 中使用watch监听$route失效问题!路由:{ name: 'secondUser ', component: secondUser, path: '/secondUser',}-------------------------------------------------------------------------------------------------------------------页面中监听 watch:{原创 2020-07-21 13:19:42 · 4889 阅读 · 0 评论 -
Element ui Table表格匹配字典项中的数据
在工作中通常会遇到Table表格匹配字典项中的数据这里介绍几种方法大家仅供参考 <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="type" label="类型"原创 2020-07-15 15:52:11 · 7379 阅读 · 1 评论