Vue
关注
分享
扫一扫
Vue相关
走在大前端的路上
一个走在大前端路上的程序猿。
展开
-
解决某些浏览器（例如谷歌）window.open(url)无效问题
在项目中需要用到预览功能，一开始采用window.open(url)直接打开链接进入预览界面，但是在谷歌浏览器中不生效，网上查了一下相关问题，原因总结有两点：在ajax请求的回调函数中window.open(url)是不生效的（尝试在回调函数外面调用window.open(url)，还是不行，坑）window.open(url)在用户操作事件中才能生效，否则浏览器判定该操作不是用户操作，会阻止窗口弹出。（这个比较靠谱）但是预览的URL是通过ajax请求得到的，倒是可以增加一个预览按钮绑定点击事件原创 2020-12-17 17:05:41 · 7711 阅读 · 1 评论 -
uni-app中使用plus.io进行持久化保存
最近在使用uni-app做APP开发，项目中有个需求：用户可以自己按需配置服务器链接，即APP可动态选择后台服务器。在uni-app中自带存储API – uni.setStorage(OBJECT)与uni.getStorage(OBJECT)，感兴趣的同学可以访问uni-app官网查看。但是我在使用这个API时发现退出APP后再进入，保存的数据会被清除，同步和异步的API我都试了，都不行。网上查找相关资料，说是uni-app框架本身有这个bug，至于到底是不是有bug这里不讨论，反正使用不了这个API。原创 2020-09-18 11:23:34 · 7117 阅读 · 1 评论 -
使用ajax或XMLHttpRequest实现文件上传
使用ajax或XMLHttpRequest实现文件上传前言方法一：使用ajax方法二：使用XMLHttpRequest前言方法一使用ajax封装XMLHttpRequest对象，方法二更加原生，直接创建并使用XMLHttpRequest对象，两种方法均使用formData上传文件。HTML：<div> <input type="file" id="file" name="myfile"/> <input type="button" @click="UploadM原创 2020-09-08 16:47:23 · 813 阅读 · 0 评论 -
uni-app设置APP启动页显示时长
最近在使用uni-app开发APP，发现打开APP后启动页总是一闪而过（因为首页已经渲染完成，会自动从启动页跳转到首页），很显然这不符合我们预定的时间要求。官方对于启动页的相关设置如下：但是在实际使用过程中发现设置delay延迟启动页关闭根本不起作用，很多使用uni-app开发的人都遇到了这个问题。这里可以使用plus.navigator.closeSplashscreen()函数来自定义启动页的关闭。首先在manifest.json的App启动界面配置中取消勾选“等待首页渲染完毕后再关闭Splas原创 2020-08-17 15:20:38 · 9539 阅读 · 2 评论 -
JavaScript合并多个对象
JavaScript合并两个对象$.extend()遍历赋值Obj.assign()合并对象的浅拷贝与深拷贝$.extend()let obj1 = {'a': 1};let obj2 = {'b': 1};let obj3 = $.extend(obj1, obj2);console.log(obj1); // {a: 1, b: 1} obj1已被修改console.log(obj1); // {b: 1}console.log(obj3); // {a: 1, b: 1}obj1 =原创 2020-08-03 20:34:33 · 712 阅读 · 0 评论 -
使用原生HTML+CSS制作一个分割线
<html><title>分割线</title><body><div><span>设备：</span><span>1</span></div><div class="order"> <span style="white-space:pre"> </span><span class="line"></span>原创 2020-07-29 17:43:13 · 1090 阅读 · 0 评论 -
Vue项目中刷新当前页面的四种方法
Vue项目中刷新当前页面的四种方法前记刷新当前页面的四种方法this.$router.go(0)location.reload()跳转空白页再跳回原页面使用provide / inject组合控制的显示（推荐）前记有时候，在当前页面添加或删除一条记录的时候希望当前页面可以刷新一下，从而更新页面数据。我们知道，在路由到另一页面的时候会重新加载该页面，相当于刷新了页面，但是使用vue-router重新路由到当前页面，页面是不进行刷新的。下面介绍几种刷新页面的方法。刷新当前页面的四种方法this.$ro原创 2020-07-24 18:30:08 · 55847 阅读 · 5 评论 -
Vue项目中使用路由$router在页面间传输对象数据
有时候需要在后一个页面使用前一个跳转页面的对象，一般使用vuex用来管理对象的状态，但仅仅使用一次该对象的话是没有必要去使用vuex的，直接使用$router在跳转页面时携带对象一起跳转到下一页面会更加方便，这样下一页面接收到上个页面的对象后即可直接使用。1. 在前一页面的跳转路由中使用query关键字包裹对象this.$router.push({ path: "/CompanyEdit", query: { clickCorporateId: this.zTreeNode }}原创 2020-07-23 18:28:06 · 2715 阅读 · 1 评论 -
Windows下使用git提交代码到gitee
Windows下使用git提交代码到gitee下载并安装Git设置帐号信息上传本地代码到gitee上下载并安装Git可以在清华大学开源软件镜像站或在Git官网下载Git安装软件。下载完成后自己选择安装路径，然后一路next即可。检验安装是否成功：git --version设置帐号信息进入到提交代码的目录下：cd x:\dd\sdd\dddd… 自己的盘符（很重要）执行命令：git config --global user.name “your name”git config --gl原创 2020-07-22 10:56:06 · 1557 阅读 · 0 评论 -
Vue项目中使用class强行绑定计算属性函数
在vue开发中，有时候我们需要使用计算属性函数，但是又没有具体的调用方式，这时可以将该函数强行绑定到class中。例如有如下函数在computed计算属性中：options: function () { let companyListData = this.$store.getters.getCompanyData || []; console.log("companyListData:", companyListData); let list = []; for (let i = 0;原创 2020-07-21 19:03:55 · 3407 阅读 · 0 评论 -
使用jQuery强制修改CSS设置
web移动端开发在使用cube-ui的input标签时发现使用class并不能完全覆盖ui中的CSS设定，这时采用jQuery的选择器可以很好的解决这个问题（项目中如何安装jQuery可自行百度，也可看我之前的文章）。jQuery提供了一系列的选择器帮助开发者快速高效地找到指定节点，让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。jQuery几乎支持主流的css1~css3选择器的写法，下面介绍jQuery基本选择器（更高深的自己百度）：查看cube-ui的源码（也可在浏览器后原创 2020-07-17 20:48:21 · 1231 阅读 · 0 评论 -
Vue项目中文件package.json和package-lock.json的区别
package.json文件记录你项目中所需要的所有模块。当你执行npm install的时候，node会先从package.json文件中读取所有dependencies信息，然后根据dependencies中的信息与node_modules中的模块进行对比，没有的直接下载，已有的检查更新（最新版本的nodejs不会更新，因为有package-lock.json文件，下面再说）。另外，package.json文件只记录你通过npm install方式安装的模块信息，而这些模块所依赖的其他子模块的信息不会记原创 2020-07-17 20:36:09 · 1730 阅读 · 0 评论 -
cordova APP监听手机返回键、设置主界面双击返回退出及其他页面分层路由
安装物理返回按键插件：cordova plugin add cordova-plugin-backbuttonindex.html中添加：<div id='exit' style="display: none;"></div>在main.js中修改添加如下内容，监听物理返回按键：document.addEventListener('deviceready', function () { let vueInstance = new Vue( { el原创 2020-07-16 18:33:28 · 1345 阅读 · 0 评论 -
rem屏幕适配及px转rem
rem屏幕适配及px转rem屏幕适配px转rem屏幕适配在vue项目中的index.html页面head标签内插入这段代码：(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var原创 2020-07-15 20:26:05 · 605 阅读 · 0 评论 -
CSS属性强制覆盖
在前端开发过程中我们经常使用一些UI组件，这些UI组件都有自己的CSS配置，有时候我们需要使用自己的配置，这时可以在标签中添加class属性强行覆盖原来的属性。template中修改代码如下：<div style="width: 100%;height: 100%;margin: 0;padding: 0;border: 0;"> <cube-tab-bar v-model="selectedLabelDefault" :data="tabs" @click=原创 2020-07-13 19:28:00 · 8396 阅读 · 0 评论 -
JavaScript回车事件等键盘事件
JavaScript回车事件等键盘事件JavaScript键盘事件键盘事件属性键盘响应顺序JavaScript 监听回车事件Keycode对照表JavaScript键盘事件在 JavaScript 中，当用户操作键盘时，会触发键盘事件，键盘事件主要包括下面 3 种类型：1）keydown：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件，但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符，在 IE 和 Safari 浏览器下还会原创 2020-07-09 21:31:09 · 22154 阅读 · 0 评论 -
Cordova 打包签名正式版APK
Cordova 打包签名正式版APK为什么要签名如何签名为什么要签名在完成APP的开发工作后我们需要对APP进行打包和签名，为什么要签名：①应用程序升级：如果你希望用户无缝升级到新的版本，那么你必须用同一个证书进行签名。这是由于只有以同一个证书签名，系统才会允许安装升级的应用程序。如果你采用了不同的证书，那么系统会要求你的应用程序采用不同的包名称，在这种情况下相当于安装了一个全新的应用程序。如果想升级应用程序，签名证书要相同，包名称要相同！②应用程序模块化：Android系统可以允许同一个证书签名的原创 2020-07-08 21:56:34 · 975 阅读 · 0 评论 -
vue+cordova移动端Android开发环境配置
vue+cordova移动端Android开发环境配置配置Vue开发环境安装Cordova配置Android开发环境安装jdk配置Android SDKa. 下载并安装Android Studiob. 下载并配置SDKcordova+vue生成Android APKa. 安装使用WebStormb. cordova项目中创建vue项目c. cordova+vue配置并打包测试APK配置Vue开发环境这里不做叙述，可查看我的文章：初学者如何配置vue开发环境安装Cordova命令行中输入命令：np原创 2020-07-08 21:32:14 · 1464 阅读 · 0 评论 -
初学者如何配置vue开发环境
配置vue开发环境安装node.js配置nodejs prefix（全局）和cache（缓存）路径基于 Node.js 安装cnpm（淘宝镜像）设置node环境变量创建并运行vue项目安装node.js在node.js中文网下载需要的版本，如下图所示（现在的版本比图中的高）：此次安装是在win7 64位环境下，所以选择windows相应安装包，下载完成后直接双击默认安装即可（建议不要安装在系统盘即C盘，我这里只有C盘）。配置nodejs prefix（全局）和cache（缓存）路径在nodejs原创 2020-07-07 21:07:45 · 1760 阅读 · 0 评论 -
css position定位（静态定位、相对定位、绝对定位和固定定位）
静态定位是元素的默认定位方式，不能使用top，bottom，left，right和z-index属性，其它三种定位可以使用以上几个属性。相对定位position:relative;会占用该元素在文档中初始的页面空间，通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。绝对定位position:absolute;将元素从文档流中拖出来,将不占用原创 2020-07-05 20:58:14 · 1155 阅读 · 0 评论 -
render函数与箭头函数
render函数与箭头函数render函数render函数怎么用箭头函数1. 箭头函数基本形式2. 箭头函数基本特点a.箭头函数this为父作用域的this，不是调用时的thisb.箭头函数不能作为构造函数，不能使用newc. 箭头函数没有arguments，caller，calleed.箭头函数通过call和apply调用，不会改变this指向，只会传入参数e.箭头函数没有原型属性f. 箭头函数不能作为Generator函数，不能使用yield关键字g. 箭头函数返回对象时，要加一个小括号h.箭头函数在E原创 2020-07-05 20:49:15 · 836 阅读 · 0 评论