拥抱AI Design

防伪码业务逻辑的实现涉及到前端的用户界面设计和后端的数据处理。Vue.js 是一个用于构建用户界面的渐进式JavaScript框架，而Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，常用于服务器端的开发。结合 Vue.js 和 Node.js，你可以创建一个完整的防伪码系统。

keep-alive 是 Vue.js 的一个内置组件，它用于缓存不活动的组件实例，而不是销毁它们。在 Vue 应用中，当组件被包含在 keep-alive 组件中时，该组件在切换时不会被销毁，而是被保存在一个内存中，这可以显著提升大型应用的性能，因为它避免了反复销毁和重建组件的开销。

Vue2实现区域预览和打印功能。

一、正则过滤场景：不能输入中文(3字节)或全角标点符号(2字节) 只能使用英文(大小写)数字,或者少数符号，符号应该不包含&'"\等JS/HTML里面可能产生意外的符号.也不该包含ASCII码0-31的控制字符二、决异步请求可能会发⽣先请求后返回问题，导致结果列表不是预料展⽰的效果假如300ms的延迟，服务器还是可能存在先发送的请求后返回。避免先请求后返回问题，确保以当前输⼊的值为参数给结果表赋值，可以在请求⾥做判断。当请求返回结果时，判断请求的参数和当前输⼊框的值相等，才进⾏相关操作三、实时..

本文主要介绍Element Plus时间选择器如何把英文转中文直接上代码<link rel="stylesheet" href="element-plus@1.0.2/index.css"><script src="element-plus@1.0.2/index.js"></script><script src="element-plus@1.0.2/element_plus_es.js"></script><script s.

本文主要介绍Element Plus时间选择器如何把英文转中文直接上代码<link rel="stylesheet" href=".element-plus@1.0.2/index.css"><script src="element-plus@1.0.2/index.js"></script><script src="element-plus@1.0.2/element_plus_es.js"></script><script .

本文主要介绍vue生成二维码一、qrcode1.1效果图npm install --save qrcodejs21.2关键代码<template> <div class="qrcode" ref="qrCodeUrl"></div></template><script>import QRCode from 'qrcodejs2'export default { name: "Index", data() { .

本文主要介绍原生JS进行滚动监听和id定位滚动，与效果锚点类似，适用于vue。关键性代码如下：var scroll = document.documentElement.scrollTop || document.body.scrollTop; //获取屏幕距离顶部的距离.js // 下述方法是引入mui+vue的案例 ，展示代码为methods里面的方法init:f...

本文主要实现购物车列表右滑删除功能。一、购物车页面cart.vue侧滑按钮宽度0.6rem,如果需要体验感好点的可以加个动画属性。<template> <div> <nav-header :showBackBtn="false" @handleBtnClick="goList('searchList')"> <span slot="title">购物车</span> </nav-header&gt.

本文主要介绍VUE移动端监听鼠标滑动事件，模拟实现用户在规定事件内无操作自动退出的场景。App.vue文件<template> <div id="app" @mousemove="moveEvent" @click="moveEvent"> <keep-alive> <router-view v-if="$route.meta.keepalive" /> </keep-alive> <route.

本文主要介绍Vue通过watch监听路由变化，设置active高亮。1.设置父子路由在router文件下的index.js 关键代码routes: [ { path: '/', component: resolve => (require(["@/pages/Index"], resolve)), children: [ ......

本文主要介绍vue当前页面滚动时，索引的自动切换及滚动距离锚点的控制。同时也解决了vue切换路由后上一个页面监听scroll滚动事件会在新页面报错问题。一、直接上逻辑代码，DOM页面和样式不在一一赘述。var doTop, // 距离顶部的距离 noScroll = false; // 是否在滚动的判断 mounted() { this.$nextTick(() ......

本文主要介绍如何封装loading加载过渡组件，本文的样式使用的stylus的写法 1.在对应的公共组件目录下，创建loading.vue（如果没有安装stylus，请现在package.json配置一下后重启服务） 对应的代码如下：&amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;loading&amp;quot;&amp;amp;gt; &a...

本文主要介绍图片懒加载vue-lazyload的使用1.第一步，安装vue-lazyload 打开package.json，找到dependencies如下："dependencies": { "vue-lazyload": "^1.2.4" },安装并重启服务npm installnpm run dev2.第二步，引入vue-lazyload并调用 ......

本文主要介绍better-scroll组件的引入，以及封装组件的使用。还用到了父子组件的特性。better-scroll文档 1.引入better-scroll 打开packgae.json&amp;gt;dependencies 建议better-scroll使用^0.1.15版本，不然轮播可能出一些小问题。&quot;dependencies&quot;: { &quot;better-scroll&quot;......

本文主要解决一下几个问题： 1.app.get is not a function解决方案（vue1.0升级到vue2.0的bug） 2.没有dev-server.js文件，如何进行后台数据模拟？ 3.axios如何直接跨域mock网站的返回值一、基本配置 1.安装axios 配置package.json&gt;dependencies 输入："depende......

本文主要介绍VUE2.0父组件像子组件传值1.首先父组件要引入子组件，然后通过传值:data=data的形式传参，其中第一个data表示子组件接收的数组名，可以是字符串、布尔值、JSON对象等形式，第二个data则是父组件的对象参数。(data不是唯一，可以自定义，下文案例用food表示) 引入子组件JS关键代码如下：&lt;script&gt; import CartC......

本文主要介绍VUE2.0图片上传功能的实现。原理是通过js控制和input标签的方式完成这一效果，无需加载其他组件。效果图如下： 1.DOM代码1.1input标签 由于我们是通过input标签的方式进行图片上传的，但是input标签的样式有点丑，所以我们隐藏该样式display: none &lt;input @change="fileChange($event)......

本文主要介绍的是在VUE2.0Jsonp的使用方法，通过github引入jsonp和promise封装，实现跨域获取数据。1.JSONP的用途和原理使用JSONP主要是目的通过动态创建Script，动态拼接url，进而抓取数据，实现跨域。确切地说，AJAX请求由于同源影响，是不允许进行跨域请求的，而Script标签src属性中的链接却可以访问跨域的js脚本，利用这一特性，服务端不再...

本文主要介绍Vue子组件像父组件传值一、通过事件触发子组件，将参数传递给父组件 1.子组件页面DOM部分 Header.vue&lt;div class="detail-close" @click="hideDetail"&gt; &lt;i class="icon-close"&gt;&lt;/i&gt;&lt;/div&gt;注：重点是@c...

本文主要介绍VUE2.0参数的传递与接收一、传参this.$route.push({path:'/xxx',query:{id:1}});//类似get传参，通过URL传递参数this.$route.push({path:'/xxx',params:{id:1}});//类似post传参二、接收 mounted(){ this.$route.......

VUE2.0的 axios 在实际接口调用中常常会遇到跨域问题。一下简单介绍了如何解决跨域问题。1.首先你的axios要安装成功，具体的请参考 http://blog.youkuaiyun.com/qq_38209578/article/details/79225698 2.通过编辑器（IDE）打开你的项目&gt;进入config&gt;index.js 在dev下的proxyTable内输......

本文只要介绍vue-router基本用法与常见的问题一、vue-router插件的安装使用 npm:$ cnpm install vue-router二、vue-router插件的引用出于页面的优雅考虑，使用vue2.0 vue-cli脚手架的代码风格去实现。1、创建引用文件：用ide打开项目文件，在src目录下创建文件夹router，后在文件夹内创......

本文只要介绍vue-resource基本用法与常见的问题一、vue-resource插件的安装使用 npm:$ cnpm install vue-resource二、vue-resource插件的引用出于页面的优雅考虑，使用vue2.0 vue-cli脚手架的代码风格去实现。1、创建引用文件：用ide打开项目文件，在src目录下创建文件夹resource，后在文件夹内...

tip：本文主要介绍vue2.0项目的搭建、vue-webpack、stylus、vue-cli、vue-router、vue-resource等组件的引用和安装（一）第一步：安装node.js环境搭建1.官网链接：https://nodejs.org/en/ 2.下载完成后，双击安装自己选择路径。 3.打开命令提示符–cmd，windows在“运行”输入cmd即可，或者右击左下角的...

本文只要介绍vue-axios基本用法与常见的问题一、vue-axios插件的安装使用 npm:$ cnpm install axios二、vue-axios插件的引用出于页面的优雅考虑，使用vue2.0 vue-cli脚手架的代码风格去实现。1、创建引用文件：用ide打开项目文件，在src目录下创建文件夹axios，后在文件夹内创建index.js。...

本文主要介绍VUE2.0的一些基本常识应用。1.vue的外部链接调用通过外部调用是最简洁的，可以下载在本地，然后引用。script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js">script>//目前没有最稳定的外链，所以此链接相对稳定2.vue代码不起作用新手经常会遗忘在VUE响应区间设置最外层div设置id=...

本文主要介绍Vue2.0 style样式scoped使用less时样式穿透覆盖。主要实现的方法是/deep/和>>>一、使用/depp/<style scoped lang="less"> .class{ /deep/.upwarp-nodata, /deep/.upwarp-tip { .px2rem(font-size, 12......

本文主要介绍一些vue的一些指令问题（一）cnpm指令无效场景：npm更新版本，遇到cnpm指令无法识别，这时候你就需要更新你的淘宝镜像了。 解决方案：$ npm install -g cnpm –registry=https://registry.npm.taobao.org 如此这般，你的cnpm指令又可以继续使用了。（二）指令的正确使用方式场景：不知道什么时候应...

本文章主要是为大家解决再npm指令性构建node_modules包文件数量太多，导致直接删除太慢，而整理的cmd指令。1.安装npm包–rimrafnpm install rimraf -g2.在cmd指令下，进入所需删除的node_modules文件夹的位置，再输入指令rimraf node_modules3.简单粗暴得秒删完成...

本文主要介绍axios请求类型application/x-www-form-urlencoded，后端获取不到键值对参数问题解决方案一：var qs = require('qs');this.axios.post("orgUserLogin", qs.stringify({ loginName: this.userName, loginPwd: this.passwor......

在开发的过程中，有时候用到this.$set(“item”,“isCheck”,!item.isCheck);不生效，这时候简单+粗暴，在执行代码后加一句:this.$forceUpdate();over搞定

本文主要介绍Vue2.0之EventBus父子组件通信（传参），有别于之前的父子组件的传参都有着异曲同工之妙。一、初始化首先你需要做的是创建事件总线并将其导出，以便其它模块可以使用或者监听它。新创建一个 .js 文件，比如 eventBus.js 。文件目录建议放在根目录>>src>>assets>>js>> eventBus.jsimp......

本文主要介绍echarts在Vue中如何使用。一、安装依赖echartsnpm install echarts -S二、图表创建2.1在main.js中，引入（全局）// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts2.2在.vue任意页面，如：index.vueDOM代码&......

本文主要介绍Vue2.0 fastclick的使用，解决300ms延迟。一、安装依赖fastclicknpm install fastclick二、全局引入在main.js中import fastClick from 'fastclick'fastClick.attach(document.body);三、局部取消fastclick来立刻触发点击事件<a class=...

本文主要介绍构建基础版本的builder.js'use strict'//严格模式require('./check-versions')()//check-versions：调用检查版本的文件。加（）代表直接调用该函数process.env.NODE_ENV = 'production'//设置当前是生产环境//下面定义常量引入插件const ora = require('ora......