vue
文章平均质量分 60
baby加油_
如果不曾相逢,也许心绪永远不会沉重,如果真的失之交臂,恐怕一生也不得轻松。
一个眼神,便足以让心海掠过飓风,在贫瘠的土地上,更深地懂得风景。一次远行,便足以憔悴了一颗羸弱的心,每望一眼秋水微澜,便恨不得泪水盈盈。
死怎能不从容不迫,爱又怎能无动于衷,只要彼此爱过一次,就是无憾的人生...
展开
-
vue不同环境打包配置不同 vue环境变量配置
(即每个环境对应变量的变量值都是一样的时候,则可以将变量定义在公用的.env文件中,而对应每个环境的 .env.xxx文件中则不需要再重复定义此变量).在.env.xxx 文件中只有 NODE_ENV,BASE_URL 和以 VUE_APP_ 开头的变量会通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。vue-cli-service build --mode test :命令中的test对应的是 .env.xxx 文件的后缀名,如果也找不到.env.test文件,则打包报错。原创 2023-03-15 16:33:29 · 4991 阅读 · 1 评论 -
vue3使用useVModel实现双向数据绑定v-model指令
vue3使用useVModel实现双向数据绑定v-model指令原创 2023-02-23 10:13:30 · 3401 阅读 · 1 评论 -
vue实现刷新页面,页面回到顶部
vue实现刷新页面,页面回到顶部原创 2023-02-17 15:45:58 · 1909 阅读 · 0 评论 -
在Vue中注册全局组件、全局方法
在Vue中注册全局组件的两种方法原创 2023-02-15 14:23:05 · 1644 阅读 · 0 评论 -
vue组件props不同数据类型传参的默认值
vue组件props不同数据类型传参的默认值原创 2023-02-14 16:38:34 · 1832 阅读 · 0 评论 -
vue3组合API基本语法使用
vue3组合API基本语法使用原创 2023-01-31 14:57:17 · 2619 阅读 · 0 评论 -
安装vue-cli2和3以及创建vue2和vue3项目的步骤及区别
安装vue-cli2和3以及创建vue2和vue3项目的步骤及区别,干货!!!原创 2023-01-30 10:52:19 · 4475 阅读 · 0 评论 -
js createDocumentFrag
createDocumentFrag原创 2022-10-24 10:26:55 · 419 阅读 · 0 评论 -
vue2的双向数据绑定原理,以及修改数据页面不更新的原理和解决方案
vue2的双向数据绑定原理,以及修改数据页面不更新的原理和解决方案原创 2022-10-21 16:20:47 · 3822 阅读 · 0 评论 -
js构造函数(原型链)及Es6的class类
理解js的函数、构造函数以及class类转载 2022-10-21 15:31:31 · 383 阅读 · 0 评论 -
webpack基本使用
基本打包命令开发环境指令:webpack ./src/index.js -o ./build/built.js --mode=development webpack以./src/index.js为入口文件开始打包,打包后输出到./build/built.js生产环境指令:webpack ./src/index.js -o ./build/built.js --mode=production webpack以./src/index.js为入口文件开始打包,打包后输出到./build/built.j原创 2021-12-30 10:25:47 · 786 阅读 · 0 评论 -
Vue 中 scoped 样式穿透
在vue中有公共样式,有第三方样式,直接在mian.js中引入,在组件中scoped写的样式,需要在组件中局部修改公共样式,而又不想去除scoped属性造成组件之间的样式污染。有哪些方法呢?办法一:使用::v-deep操作符或者/deep//deep/ .el-form-item__label { float: none;}::v-deep .el-form-item__label { float: none;}办法二:使用>>>外层 >>>原创 2021-11-23 16:07:59 · 942 阅读 · 0 评论 -
移动端适配flexible.js
1、什么是flexible.js是一个终端设备适配的解决方案。是一个用来适配移动端的javascript框架。根据宽度的不同设置不同的字体大小,样式间距都使用rem作为单位,不同屏幕大小适配不同的样式。2、flexible.js 做的三件事动态改写标签给元素添加data-dpr属性,并且动态改写data-dpr的值给元素添加font-size属性,并且动态改写font-size的值如果没有设置viewport,会动态生成<meta name="viewport" content="原创 2021-11-19 11:30:51 · 1844 阅读 · 0 评论 -
在vue中引入less,报错TypeError: loaderContext.getResolve is not a function
在vue中引入less步骤下载依赖npm install less less-loader --save-dev引入安装完成后打开 build目录,修改 webpack.base.conf.js 中的相关配置:在 module.exports 中找到 module 中的 rules 数组module.exports = { ... ... module: { rules: [ {...}, {...}, { test: /\.le原创 2021-11-17 11:19:41 · 763 阅读 · 0 评论 -
vue移动端项目解决点击事件3秒延迟问题-fastclick.js
从点击屏幕上的元素到触发元素的click事件,移动浏览器会有大约 300 毫秒的等待时间。vue中引用fastclick.jsnpm install fastclickimport Fastclick from "fastclick"Fastclick.attach(document.body)原创 2021-11-16 17:36:36 · 1597 阅读 · 0 评论 -
在vue中引入打印插件PrintJs
插件文件引入import printJS from "@/plugin/print-js";样例UI用的是ElementUI<el-row class="btnInfo"> <el-button class="submitBtn" type="primary" @click="beforePrint"> 批量打印预览 </el-button></el-row><el-dialog title="打印预览" :vis原创 2021-11-16 14:48:54 · 1228 阅读 · 1 评论 -
在vue项目中千分位展示输入金额,获取金额千分位,金额大写的方法
实现效果:在用户输入完成input失焦的时候,input文本框中显示的是千分位格式的金额;在用户再次聚焦的input文本框时,文本框中展示的是正常的金额值,用户可以修改金额,失焦的时候再次千分位展示。思路:用两个变量,一个变量负责展示,一个变量存储实际的值,保证在任何情况下,实际值不受影响,展示按需求去展示main.js中引入公共方法import validate from '@/utils/validate';Vue.prototype.$validate = validateVue原创 2021-04-21 18:08:25 · 6615 阅读 · 0 评论 -
父子组件与缓存
最近遇到一个很恶心的问题,就是路由乱跳,用的elementUI的顶导航和侧导航,陆续出现导航折叠问题,获取导航路径为空问题,最后,把结构拿出来整理,发现又是一个小问题引起的大bug…路由结构[{ path: '/login', name: '/login', component: login }, { path: '/', name: 'layout', component: () => import ('@/views/layout/index.vue'原创 2020-12-05 19:12:14 · 874 阅读 · 0 评论 -
vue中通过Export2Excel导成excel详细步骤
在vue项目中有导出Excel表格的需求,并且需要自适应宽度在前端项目中导出Excel表格,Vue.js确实可以实现,亲测具体实现步骤为:原创 2020-11-18 18:44:31 · 935 阅读 · 0 评论 -
elementUI的Table分页多选框
目的:实现进入页面显示默认的选中项,在用户重新选择后,将选择的和取消选择的数据提交给后台;这里涉及到一个分页的问题,表格是可分页的表格,所以要存储用户的选项1.element-ui的table表格的多选框默认选中data(){ return{ tableData:[],//table数据 }},watch:{ tableData(val){ this.$nextTick(()=>{ this.tableData.forEach(row => {原创 2020-11-18 18:23:46 · 2738 阅读 · 0 评论 -
Vue.js中v-for和v-if用计算属性代替
近期用到elementUI里的table表格,但是循环渲染列的时候,想根据条件渲染列,无值不渲染,所以用到了v-if和v-for直接上案例需求是,有一个tableData,是一个对象数组,包含了key6,key7,key8…key26的值,但是有的值为null,就是列表的某项全部无值,展示的时候,key6,…的名称是keyInd相对应的中文<el-table-column :prop="'key'+(index+6)" :label="item" v-for="(item,index) in原创 2020-09-07 17:37:01 · 1628 阅读 · 0 评论 -
vue深度监控路由
watch:{ $route: { handler(val){ console.log(val) }, deep: true, immediate: true }}原创 2020-08-11 16:22:25 · 298 阅读 · 0 评论 -
在vue项目中设置阻止浏览器的回退
由于我们的项目导航是用的elmentUI的导航,点击设置activeIndex,所以当浏览器返回页面的时候,触发不了导航当前项的变化,所以要禁止掉在main.js中设置new Vue({ el: '#app', router, store, components: { App }, template: '<App/>', data(){ return { IsUseWebsocket: true,原创 2020-08-11 16:21:03 · 1516 阅读 · 0 评论 -
js vue 关于上传文件IE9的兼容
思路做vue项目,用的element-ui,上传文件不支持IE9,而且IE9不支持 new FormData()后来查到 vue-upload-component 插件支持IE9,但是使用过程中有以下限制文件上传后,不能重复提交如果上传要携带其他data数据,在选择文件的那一刻已经赋值上去,无法修改由于我们的录入信息页面,包含了一些form表单,还有上传文件,是一起的,但是这个插件就限制了,选择文件后,其他数据修改不生效等问题。所以,它比较适用于,单单上传文件,不懈怠其他参数的需求,支持原创 2020-08-05 14:47:03 · 1054 阅读 · 1 评论 -
vue修改对象的属性值后页面不重新渲染问题
解决方法用$.set用Object.assignvue双向绑定原理Vue采用数据劫持结合发布者-订阅者模式的方法,通过Object.defineProperty()来劫持各个属性的setter,getter属性,在数据变动话,通知订阅者,触发更新回调函数,重新渲染视图。vue数据vue中data中定义的数据,都被赋予了getter和setter,当你要给对象添加新的属性的时候,或者你在其他地方直接this.出来的变量,是没有getter和setter属性的。(当你把一个普通的 JavaSc原创 2020-07-25 17:59:25 · 3083 阅读 · 2 评论 -
element-ui的日期控件DatePicker,开始日期结束日期限制日期选择
有两个需求,一个是录入页面,开始时间和结束时间是两个表单元素,分开着的,要做限制;另一个是时间搜索选项,要选择时间范围,这个是要用同一个日期选择框,要做限制;两个日期选框需求:结束日期不能大于开始日期,选择时间在当日(包含当日)后的14天内;一个日期选框需求:选择时间当日前,整体范围在三年内,选择时间范围不能超过一个月;日期限制思路一个选框,结束日期不能大于日期,可以在选择@change后判断两个日期大小,如果不符合条件,触发表单验证提示。或者在一个选择后,另一个设置disabled原创 2020-07-25 17:38:17 · 3741 阅读 · 0 评论 -
elementUI的表单验证
表单官网都有,但是有些细节需要注意。表单的验证有两个方面,一是Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="n原创 2020-07-25 15:22:39 · 388 阅读 · 0 评论 -
vue项目中axios的封装
import axios from 'axios'import {Message} from 'element-ui'axios.interceptors.request.use(config=> { return config;}, error=> { return Promise.reject(error);})axios.interceptors.response.use(data=> { if (data.status && data原创 2020-05-19 14:39:48 · 287 阅读 · 1 评论 -
vue的路由 按需加载、权限验证添加
我们在用vue做项目的时候,如果页面过多,会造成第一次加载的时候非常慢,因为一下子要加载的东西太多,今天我们来说说按需加载。我们也会经常遇到,权限不同,显示的模块也会有差别,那么,怎么去做权限区分处理呢?1.按需加载import Vue from 'vue'import Router from 'vue-router'// import HelloWorld from '@/compon...原创 2019-12-11 10:49:34 · 425 阅读 · 0 评论 -
微信拍照或从手机相册中选图,并上传到自己的服务器
做的H5需要在微信上用,并实现上传图片的功能研究了一下微信公众号的js-sdk,发现有两种方式实现图片的上传选择图片+获取图片选择图片+上传图片(返回serverId),前端拿到serverId(即media_id)后,将此作为参数去请求后台“获取临时素材接口”相关官方文档:微信js-sdk:https://developers.weixin.qq.com/doc/offiacco...原创 2019-10-23 16:15:30 · 1683 阅读 · 0 评论 -
微信js扫一扫,扫条形码去掉code_128。在vue中封装全局对象的方法,封装微信js-sdk权限验证的方法
微信公众号在调用扫一扫功能时,一维码(条形码)在直接返回结果时会在结果前带上EAN_8, EAN_13, CODE_25, CODE_39, CODE_128, UPC_A, UPC_E wx.scanQRCode({ needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果, scanType: ["qrCode","barCode"], // 可以指定扫...原创 2019-10-23 10:05:47 · 1447 阅读 · 0 评论 -
Vue.js之使用vue-cli初始化项目
使用vue框架的时候,经常会用到vue的脚手架,那么怎么进行初始化呢?一、安装步骤step1、安装Node.js首先需要下载并安装Node.js,下载地址:Node官网。测试安装是否成功,打开cmd,使用 node -v,如果显示版本号则表示安装成功。 step2、安装vue-cli使用vue-cli(脚手架)搭建项目,vue-cli是Vue官方提供的用于搭建...原创 2018-06-11 15:48:09 · 1353 阅读 · 0 评论 -
父子组件的值关系,子组件修改props传过来的对象类型值,继而改变父组件的值
vue2.0中,子组件中不能修改父组件的状态,否则在控制台中会报错。比如,父组件传给子组件一个变量,子组件只能接收这个值,不能修改这个值,修改会报错。想要修改,只能赋值给另一个data中定义的变量但是,这仅限于props为非数组及对象等引用类型数据,譬如字符串,数字等如果props是对象的话,在子组件内修改props的话,父组件是不会报错的,父组件的值也会跟着改变父组件传递给子组件一...原创 2018-06-11 14:51:12 · 2099 阅读 · 0 评论 -
vue关于父组件调用子组件的方法
我们都知道通过$ref可以获取到某个DOM,但是它也可以用来获取子组件的实例,调用子组件的方法例: 子组件:&lt;template&gt; &lt;div&gt;&lt;/div&gt;&lt;/template&gt;&lt;script&gt; export default { methods:{ c原创 2018-05-20 21:52:16 · 85482 阅读 · 8 评论 -
vue中,父子组件,兄弟间传值
在vue中,经常会遇到组件间数据传递的问题,这里来了解下父子组件,及兄弟组件之间的数据传递父组件传值给子组件父组件通过v-bind:参数名=’数据变量’子组件通过props接收 父组件通过v-bind:参数名=’数据变量’&lt;template&gt; &lt;div id="app"&gt; &lt;!--静态头部--&gt; &原创 2018-05-20 21:22:04 · 3343 阅读 · 0 评论 -
Vue.set的使用
Vue.set( target, key, value )参数:{Object | Array} target{string | number} key{any} value返回值:设置的值。用法: 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this...原创 2018-05-18 19:24:37 · 1385 阅读 · 0 评论 -
vue监控路由变化 vue路由配置
在进行vue的开发中,有时候会出现路由及路由参数拼接乱套的问题,下面我针对我遇到的路由问题进行小小的阐述 vue路由带参数,路由有一个$route对象 在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新。路由对象暴露了以下属性:$route.path 字符串,等于当前路...原创 2018-04-20 15:18:47 · 6125 阅读 · 0 评论 -
关于vue中的ajax请求,axios包基本用法
在vue中,经常会用到数据请求,常用的有:vue-resourse、axios 今天我说的是axios的post请求 github源文件及文档地址:【https://github.com/axios/axios】 + 首先,引入axiosCDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></scri...原创 2018-04-19 17:20:56 · 733 阅读 · 0 评论 -
vue1.0文档
http://note.youdao.com/noteshare?id=161c3265591d00109e535964da91609f原创 2018-03-28 18:50:55 · 912 阅读 · 0 评论 -
vue 1.0基本了解
一、基本结构基本结构-js//1.路由需要准备一个跟组件var App = Vue.extend({});//2.定义组件var Home = Vue.extend({ template:'<h1>Home</h1>'})var List = Vue.extend({ template:'<h1>List</h1&g...原创 2018-03-28 18:46:12 · 300 阅读 · 0 评论