![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
WebCsDn_TDCode
这个作者很懒,什么都没留下…
展开
-
uni-app选择器( uni-data-picker)选择任意级别
uni-app选择器( uni-data-picker)选择任意级别原创 2023-08-02 15:51:58 · 5056 阅读 · 1 评论 -
正则验证表达式
正则验证表达式原创 2023-02-02 22:49:32 · 82 阅读 · 0 评论 -
Element UI el-input 限制只能输入正数,小数点后输入两位
Element UI el-input 限制只能输入正数,小数点后输入两位。原创 2022-08-11 09:10:47 · 1969 阅读 · 0 评论 -
Vue父组件向子组件传递子组件实时更新
Vue父组件向子组件传递子组件实时更新原创 2022-06-27 17:47:41 · 8077 阅读 · 0 评论 -
vue-cli3.x 配置打包可视化插件webpack-bundle-analyzer
webpack-bundle-analyzer配置运行打包命令:访问:,即可看到打包后的展示图原创 2022-06-06 16:42:30 · 876 阅读 · 0 评论 -
vue实时显示当前时间
<!--时间--><template> <span class="time" id="time"> <span class="date">{{ nowTime }}</span> <span class="hour"></span> <a class="split">:</a> <span class="minitus"></span>...原创 2022-04-06 18:07:25 · 5762 阅读 · 0 评论 -
vscode之Vue常用插件
Vetur —— 语法高亮、智能感知、Emmet等Vetur:基本替代 vue 常亮 Vue2 Snippets vue语法提示 Vuter 注释等快捷键EsLint —— 语法纠错Auto Rename Tag —— 自动完成另一侧标签的同步修改 Auto Close Tag —— 自动闭合HTML/XML标签JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入,除js外还支持.ts,.jsx,.tsx......原创 2022-03-15 17:17:09 · 2581 阅读 · 0 评论 -
单元测试总结
断言APIvue//viewconst Constructor = Vue.extend(Home)const vm = new Constructor({ propsData:{msg:"hello"}}).$mount()expect(vm.$el.querySelector('.hello h1').innerHTML).to.be.contain('hello')import { mount } from '@vue/test-utils'//方式一// const wr原创 2022-03-01 23:20:07 · 182 阅读 · 0 评论 -
ElementUI之Tooltip 文字提示使用方式
常用于展示鼠标 hover 时的提示信息实现长度过程使用隐藏作用<el-tooltip placement="top-start" :content="description"> <el-button v-if="description && description.length > 6" >{{ description.slice(0, 6) }}...</el-button> <el-button v-else-if="de原创 2021-09-23 11:38:36 · 760 阅读 · 0 评论 -
关于vue-router中的方法
1.scrollBehavior使用keep-alive标签后部分安卓机返回缓存页位置不精确问题let Router = new Router({ //导航守卫 screenBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition; } else { if (from.meta.keepAlive) { from.meta.savedPosition = doc...原创 2021-08-19 14:39:31 · 86 阅读 · 0 评论 -
webpack+vue中安装使用vue-layer弹窗插件
1、安装vue-layer插件npm install vue-layer --save-dev2、打包入口文件main.js中引入vue、vue-layer、并且将vue-layer添加到vue原型import Vue from 'vue';import layer from 'vue-layer'Vue.prototype.$layer = layer(Vue);2.1、...翻译 2021-08-19 14:23:03 · 403 阅读 · 0 评论 -
Vuex的全面简约版总结
1. vuex简介vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起,集中式来管理。需要声明的是,这里所说的状态指的是vue组件中data里面的属性。2. vuex 的核心概念vuex 中最关键的是store对象,这是vuex的核心。可以说,vuex这个插件其实就是一个store对象,每个vue应用仅且仅有一个store对象。//创建storeconst store = new Vuex.Store({...});3.完...原创 2021-06-16 15:35:23 · 145 阅读 · 0 评论 -
Vue脚手架相关
1.遇见报代码规范错误webpack.base.conf.js下面找constcreateLintingRule注释掉就ok原创 2020-04-09 11:12:40 · 133 阅读 · 0 评论 -
node.js安装
1、node.js下载地址:https://nodejs.org/en/download/2、安装完成,打开cmd命令行,输入node -vnpm -v*可能出现的问题· 'npm' 不是内部或外部命令,也不是可运行的程序或批处理文件。解决方法:配置 系统 环境变量高级-环境变量添加 node.js位置-确认 - 成功...原创 2019-12-12 18:18:34 · 100 阅读 · 0 评论 -
vue 的状态管理vuex中store的使用
一、状态管理(vuex)简介vuex是专为vue.js应用程序开发的状态管理模式。它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。二、状态管理核心状态管理有5个核心,分别是sta...原创 2019-04-16 09:49:37 · 6576 阅读 · 0 评论 -
vue地图上(百度地图)获取和两个坐标之间的直线距离
一、在主目录下的index.html引入js,例如:<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=秘钥"></script>注意自己遇到的是一个警告,看到控制台有东西就不爽,强迫症,看图:原因:其实就是说页面渲染使用了document.write(...原创 2019-02-20 15:52:41 · 4963 阅读 · 0 评论 -
vue动态获取输入框的数字长度
html<div class="letter_wirter"><!--<textarea placeholder="请输入内容..." name="" rows="" cols="" maxlength="300" @input="descInput" v-model="desc"&am原创 2019-03-01 15:42:51 · 6879 阅读 · 0 评论 -
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数据时,原始代码会闪现一下。查访各方资料,终的解决方法。第一步、加入一段css代码 1 2 3 4 5 <style type="text/css"> [v-cloak] { display: none; ...转载 2018-08-16 16:40:21 · 1398 阅读 · 0 评论 -
vue2-countdown时间定时器商城秒杀
使用文档:https://github.com/cgygd/vue2-countdown#vue2-countdown<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"原创 2018-09-05 10:01:06 · 2710 阅读 · 0 评论 -
webView加载H5 vue开发页面出现空白页的解决办法
vue尤其运用原生写的在webView加载出现空白页的解决办法在网上查找了好多方法都不行 可以利用https://babeljs.io/编译兼容模式的js 就显示正常了 还有一种使用https://www.bootcdn.cn/babel-polyfill/引入但是对于原生vue觉得不好用没处理过来...原创 2018-09-06 16:16:30 · 10754 阅读 · 0 评论 -
This dependency was not found: * !!vue-style-loader!css-loader? 解决方案
但是当你新建一个vue项目时,需要重新安装stylus,否则报错:This dependency was not found:* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":tr...转载 2018-09-12 17:53:01 · 403 阅读 · 0 评论 -
HTML5实现input:file上传压缩,等比压缩图片、base64和文件互相转换
本文实例为大家分享了Vue2.0实现调用摄像头进行拍照功能的具体代码,以及图片上传功能引用exif.js,供大家参考,具体内容如下所需要的插件:https://download.csdn.net/download/qq_42396791/10728846插件:1.jquery.min.js2.exif.js效果目标:实现等比例压缩上传上代码HTML<!DOC...原创 2018-10-18 11:57:17 · 7578 阅读 · 2 评论 -
基于原生vue自定义移动端touch事件,点击、滑动、长按事件
**HTML**<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <link href="favicon.ico" mce_href="favicon.ico" rel="bookmark" type="image/x-ic原创 2018-09-30 16:40:57 · 4715 阅读 · 0 评论 -
vue监听滚动事件 实现某元素吸顶或者固定位置显示
1、监听滚动事件利用VUE写一个在控制台打印当前的scrollTop,首先,在mounted钩子中给window添加一个滚动滚动监听事件,mounted: function() { window.addEventListener('scroll', this.handleScroll)},然后在方法中,添加这个handleScroll方法2、监听元素到顶部的距离 并判...原创 2018-10-09 17:43:33 · 254 阅读 · 0 评论 -
Vue + Canvas 实现头像截图上传功能
首先,我们需要两张画布,一个展示选取图片的压缩图,一个展示截取后的图片。废话不多讲上代码如下:HTML<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,in原创 2018-10-19 10:15:39 · 4226 阅读 · 1 评论 -
vue项目打包后资源相对引用路径的和背景图片路径问题
vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行。1、修改config => index.js => build => assetsPublicPath 中的'/'成为'./'module.exports = { build: { env: require('./prod.env'), index: path...翻译 2018-12-29 09:29:34 · 640 阅读 · 0 评论 -
vue常用组件之confirm
一些自带的方法,比如alert,confirm等,往往由于浏览器不同而展现出不同的样式,可以使用layer.confirm var self = this this.$layer.confirm('邀请成功!',{ type: 0, title: '信息', area...翻译 2019-01-03 15:43:07 · 2578 阅读 · 0 评论 -
vue.js开发之开关(switch)组件
最近开发组件的时候,自定义开发了开关(switch)组件,现将代码整理如下,方便日后复用。toggle-switch.vue <template> <label role="checkbox" :class="['switch', { toggled }]"> <input type="checkbox" class=".转载 2019-01-02 10:06:52 · 5585 阅读 · 1 评论 -
vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件
vue-calendar-component基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库WhyGithub 上很多点击弹出日历选择某个时间的组件,却没有找到单纯展示日历并且能点击获取时间的组件 少部分日历组件的占用内存过于大,对于日历这样简单的功能来说显然不够合理 Installnpm ...转载 2019-01-03 11:04:13 · 6697 阅读 · 1 评论 -
calendar vue日期选择组件 基于 vue 2.0高性能日历组件(vue2-datepick)
一、点击文本框,选择日期,把日期赋值到文本框中。 二、日期组件使用1、安装vue2-datepicknpm install vue2-datepick --save2、初始化,在main.js中加入以下:import Calendar from 'vue2-datepick';Vue.use(Calendar);3、使用<template>...原创 2019-02-12 09:47:47 · 2455 阅读 · 1 评论 -
vue长按事件
html<template> <div> <div class="list wauto" @touchstart="gtouchstart(1)" @touchmove="gtouchmove()" @touchend="gtouchend(1)">长按事件</div> </div&原创 2019-02-12 13:51:32 · 3175 阅读 · 0 评论 -
vue-cil 上传有个解决问题
还守护进程,用守护进程也应该你自己用nodejs实现一个web静态服务器而不是去守护npm run dev楼主问的既然是布署,哪默认就应该是生产环境下的布署,vue开发的应用本质上就是静态文件,无论你用何种web服务器,放上去就应该能通过http访问为什么现在好多人连这个都搞不定了呢?原因在于现在太多的前端工具帮我们做了太多,而我们只学会了打命令,而没有搞清楚这些命令到底做了些什么接下来我来帮大家...转载 2018-06-22 14:31:47 · 177 阅读 · 0 评论