Debug的博客

【代码】如此丝滑的按钮交互效果确认不来看看嘛。

在公司自己的产品通过兑换码激活链接后调取后端联合登录接口，实现免登录的方式直接跳转到第三方产品的页面中。

【代码】如何在线上环境关闭（vue/小程序）项目中的console.log。

【代码】vue项目中封装截取页面参数的js文件。

【代码】解决el-input禁用特殊字符后输入汉字自带拼音的bug。

【代码】vue+element实现表单提交（正则验证表单项+限制特殊字符）

.安装node.js环境可以去官网下载安装包:https://nodejs.org/安装好后,可以输入node -v npm -v成功的话会显示相应的版本号2.安装vue-cli VUE脚本架工具npm install -g vue-cli#回车,等待安装vue -V#若出现vue信息说明成功3.用vue-cli构建项目vue init webpack vuedemo(这个可以是全路径+项目名称)#这里需要进行一些配置,默认回车即可

第一步：第二步：第三步：重新启动dev即可

一般情况下来说都是一些粗心大意的问题导致的

1.vue项目npm run build 得到dist文件夹dist文件夹内容示例新建5+APP项目空的5+APP项目文件夹情况将dist文件夹下的内容粘贴（并覆盖）到5+APP下后

全局安装 第二步:打开终端，执行：

【代码】vuex中拿不到state中值的问题（state是undefined）

vue插件实现前端人机验证

一、项目介绍脚手架CLI：@vue/cliVue版本：2.6.11移动UI组件库：Vant#2.10.14CSS预处理器：sass二、配置lib-flexible插件下载插件npm i -D lib-flexible导入：在src/main.js中使用import 'lib-flexible'三、项目配置安装postcss-px2rem和postcss-loader插件依赖npm i -D postcss-px2rem postcss-loader提示： 如果项目使用了第三方

首先安装依赖yarn add better-scrollyarn add stylus-loader@3.0.2 --save-dev示例图片<template> <div> <div class="goods"> <div class="menu-wrapper"> <ul> <li class="menu-item" v

mock是当前端工程师搭建好了页面只差数据，但是后端还没完成接口开发时候使用的前端虚拟数据mock的特性前后端分离增加单元测试的真实性（通过随机数据，模拟各种场景）简单实用（符合真实的接口）数据类型丰富（支持生成的文字，字符串，日期，邮箱，boolean，颜色，图片等）方便扩展（支持自定义类型函数）Mock.js地址.........

第一步在src下创建utils文件夹并创建common.js文件//'@/utils/common.js' 文件 function throttle(bindObj, fn, delay) { bindObj.$$prevTime = Date.now() return function(...args) { const nowTime = Date.now() if(nowTime - bindObj.$$prevTime > delay) { fn.apply(this

prop需要是一个变量，以中英文翻译为例，当中英文都是后端返回时，前端应如何处理？下面字段name为后端返回的中文名称，key为英文名称。<el-table-column label="名称"> <template slot-scope="scope"> <span v-if="language=='zh_CN'">{{scope.row.name}}</span> <span v-else-if>{{s

location /{ try_files $uri /index.html; index index.html index.htm index.php;}通过服务器的nginx配置进行url重写到程序入口index.html,代码如上

App根组件中必须加router-viewrouter文件中import Vue from "vue";import VueRouter from "vue-router";import Home from "../views/home/Home.vue";import Detail from "../views/home/detail.vue";import Detail1 from "../views/home/detail1.vue";Vue.use(VueRouter);const

创建文件目录在router文件中引入一级路由以及详情页路由import Vue from "vue";import VueRouter from "vue-router";import Home from "../views/home/Home.vue";import About from "../views/about/About.vue";import Detail from "../views/home/detail.vue";import Detail1 from "../views

父传子1. 子组件在props中创建一个属性，用以接收父组件传过来的值2. 父组件中注册子组件3. 在子组件标签中添加子组件props中创建的属性4. 把需要传给子组件的值赋给该属性5. 浏览器输出子传父1. 在子组件中创建一个按钮，给按钮绑定一个点击事件子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件2. 在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法

<template> <div> <div > <p v-html="formateTimeStamp(date)"></p> </div> </div></template><script>export default { data: function () { return { date: new Date().getTim

不同数据下分页的效果<div class="block"> <span class="demonstration">页数较少时的效果</span> <el-pagination layout="prev, pager, next" :total="50" page-size:"100"> </el-pagination></div><div class="block"> <

使用插件：clipboard.js，官网地址：http://www.clipboardjs.cn/1 通过npm安装clipboard.js npm install clipboard2 在需要使用到复制功能的组件中引入：import ClipboardJS from 'clipboard';3 需要被复制的元素标签上要加一个id；然后在复制按钮加一个data-clipboard-target指向元素标签；最后添加一个点击事件<div id="content"> dajiwdh

vue 使用scss报错 this.getOptions is not a function通过npm安装sassnpm install node-sassnpm intall sass-loader上面命令安装的是最新版的，出现错误的原因就是安装最新版的导致getOptions()不兼容解决方案就是卸载sass-loader，安装低版本，命令如下npm uninstall sass-loader //卸载npm install sass-loader@8.0.0 //安装8.0.

局部自定义指令直接在组件内部创建<template> <div> <p v-upper-text="name"></p>转大写 <p v-lower-text="name"></p>转小写 </div></template><script> export default{ data(){ return

```handlebars<template> <div> <form action="" @submit.prevent="handleSubmit"> <input type="text" placeholder="账户" v-model="username"> <input type="text" placeholder="密码" v-model="password"&gt.

<template> <div> <input type="text" v-model="searchName" minlength="1" maxlength="10"> <ul> <li v-for="(item,index) in filterList" :key="index"> {{item.name}}--{{item.age}}

计算属性1) 在 computed 属性对象中定义计算属性的方法2) 在页面中使用{{方法名}}来显示计算的结果监视属性1) 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性2) 当属性变化时, 回调函数自动调用,在函数内部进行计算计算属性高级1) 通过 getter/setter 实现对属性数据的显示和监视2) 计算属性存在缓存, 多次读取只执行一次 getter 计<template> <div> 姓

平时在写vue项目的时候经常会遇到这个问题，写着写着浏览器就会突然抛出下面这个报错（这个报错无关紧要，不影响开发，一般不要管他，有强迫症的小伙伴往下看）网上找到的原因是因为sockjs-node库创建了一个低延迟、全双工的浏览器和web服务器之间通信通道，当我们在项目运行的时候会自动调用这个接口，如果没有使用，就会一直报这个错误（企业中跟后端联调之后就不会有这个报错了）解决方法：1.在项目中打开node_modules包并找到/sockjs-client/dist/sockjs.js文件.

常用俩种方式如下图所示，我要修改走马灯中的buttonstyle上面不能加scoped，否则就算你强制设置css（！important）也不会改变。所以我在下面又新创建了一个不带scoped的style用来修改element的组件样式还有一种方法是/deep/或者>>>/deep/ .title{color:red};>>> .title{color:black};...

在了解代码之前先给大家讲述一下以下购物车共有哪些功能，对你们有帮助的记得点赞哦！主要功能如下：增加商品信息修改商品信息删除单个商品删除多个商品清空购物车对商品单价进行降序排序根据商品名称实现查找实现商品数量加减全选反选实现勾选商品的总价计算效果图如下：由于功能比较多就不一个个讲了，我们先来讲几个主要功能的逻辑（增删改查），最后放全放部代码首先我们先来看增加商品功能//先来一个按钮绑定显示事件，点击添加后出现一个弹窗<butt

之前更了一个react的分页效果，今天给大家发一个vue写的分页先在全局main.js中引入element并使用 import ElementUI from "element-ui";import "element-ui/lib/theme-chalk/index.css";Vue.use(ElementUI);然后在html中使用element-ui中的分页组件//绑定函数//通过数据的length渲染当前页的数据条数<el-pagination @size-change="han

1.首先布局，使用element表单输入框，标签上面相应的绑定了一些事件以及校验规则，下面逻辑代码中有注释 <div class="wrap"> <el-form class="loginForm" :model="loginForm" :rules="loginFormRules" ref="loginFormRef" label-position="top"> <el-form-item label="手机号" prop="phone"> <el

1.首先安装插件依赖npm install qrcodejs2 --save-dev 或者 yarn add qrcodejs2 --save-dev2.安装完成之后在项目中引入 import QRCode from 'qrcodejs2'3.然后再页面中写个标签用来渲染他<template> <div id="qrcode" ref="qrcode" ></div> //img标签会导致二维码渲染不到页面上，所以此处用了

首先找到对应的的三个接口1.二维码获取key接口接口说明：调用此接口可生成一个key2.二维码生成接口接口说明：调用此接口传入上一个接口生成的key可生成二维码图片的base64和二维码信息,可使用base64展示图片,或者使用二维码信息内容自行使用第三方二维码生成库渲染二维码3.二维码检测状态接口接口说明：轮询此接口可获取二维码扫码状态,800为二维码过期,801为等待扫码,802为待确认,803为授权登录成功(803状态码下会返回cookies)调用上面三个接口时候务必要带上时

首先第一步先安装依赖npm i vue-baidu-map或者yarn add vue-baidu-map安装完成之后在页面中写入一个div用来渲染地图插件<baidu-map v-bind:style="mapStyle" class="bm-view" ak="你的百度地图ak" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @click="getClickInfo" @moving="syncCenterAndZoom"