使用前后端分离技术，前端采用Vue，后端使用php，在开发过程中因某些数据需要进行加密与解密，我们采用前端插件crypto-js应用于项目中。安装crypto-jsnpminstallcrypto-js在Vue项目中编写前端加密工具类/tools/crypto.js/**crypto.js**///npminstallcrypto-js/***AES对称加密（不安全）*/letCryptoJS=require('crypto-js');exportdefault{/***接口数据加密函数*@paramstrstring需加密的json字符串*@paramkeystring加密key(16位)*@paramivstring加密向量(16位)*@returnstring加密密文字符串*/encrypt(str,key,iv){//密钥16位varkey=CryptoJS.enc.Utf8.parse(key);//加密向量16位variv=CryptoJS.enc.Utf8.parse(iv);varencrypted=CryptoJS.AES.encrypt(str,ke...

1.首先，在vue-cli中创建一个vue.js项目；vuecreateproject-name2.vue.js项目创建好后，在项目中使用@click.native属性绑定一个点击事件；<aclass="link"@click.native="test">点击事件</a>3.事件绑定好后，添加一个button按钮，用于手动触发事件；<button@test='shout'>事件</button>4.最后，按钮添加好后，在项目中添加以下代码即可手动触发事件；<scripttype="text/javascript"> ...

vue3使用v-model替代vue2的v-bind.sync父使用v-model传值给子，这里的v-model本质上是:modelValue=“值”，@update:modelValue="值=$event"这二者的缩写<template><div>双向绑定{{num}}<childv-model="num"></child>//上方代码是下方的简写<child:modelValue="num"@update:modelValue="num=$event"></child></div></template><script>importchildfrom'./test.vue'exportdefault{components:{child},data(){return{num:0}}}</script>所以子中通过在props中接收modelValue再$emit(‘update:modelValue&rsquo...

这篇文章主要介绍了vue怎么导入excel文件和多个sheets的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue怎么导入excel文件和多个sheets文章都会有所收获，下面我们一起来看看吧。html导入按钮和选择文件的弹框      <el-button v-waves :loading='downloadLoading' class='filter-item' type='primary' icon='el-icon-download' @click='daoru'>        导入      </el-button>      <el-dialog title="导入文件" :visible.sync="excelImportShow">        <a rel="externalnofollow"href="javascript:;" rel="external nofollow"  class="file">          <input id="upload" type="fi...

步骤1：查  npmrunbuild--report  analyzer工具步骤2：减1.固定模板，index引入cdn：vue.js、router.js、mintUI等第三放工具；其次，在webpack中配置externals externals:{   'vue':'Vue',   'mint-ui':'MINT',   'vue-router':'VueRouter' },2.懒加载：Importindexfrom'@/components/index'{path:'/',name:'index',component:index} 替换：{path:'/',name:'index',component:()=>import('@/components/index')}步骤3：js底部，css顶部；部署CDN；静态资源打包压缩；预加载和懒加载前端代码审核清单：前端安全、性能、代码质量、注释、测试、故障处理； ...

状态管理：Conststore=Newvuex.store({State:{mssAlert:{Show:false,Msg:'xxx'},ErrorBox:{Show:false,Msg:'sssss'},showMenu:false,Count:1….},Getters:{//类似 vue的compute,监听state值变化(最新状态)   isShow(state){//承载拜变化的值Returnstate.showMenu  },   getChangedNum(){//获取变化的值Returnstate.cahngableNum;  }}，Muttations:{add(state){State.count+=1;},jian(state){State.count-=1;}}，Actions:{},Mouduls:{}})Exportdefaultstore; muttations使用：This.store.commit('add');This.store.commit('jian');子传父组件；this.$emit子注册：submitInfo:function(){Th...

不同角色有不同的权限，这时如果管理平台的菜单定义在代码里，显然是不能满足上面的需求，我们就需要后台提供用户菜单，然后前台动态生成路由。1动态添加路由利用vue-router的addRoutes方法可以动态添加路由。请求接口返回菜单格式如下[{"id":"1332194352530083842","pid":"1331859957655007233","name":"TspUser","component":"user/tspuser/index","redirect":null,"meta":{"title":"用户信息","icon":"pic-right","show":true,"target":null,"link":null},"path":"/user","hidden":false},{"id":"1334396728339042306","pid":"1333592942347546625","name":"Product","component":"fota/product/index","redirect":null,"meta":{"title":"产品信息","...

vue是数据双向绑定，当页面数据发生变化时，我们通过watch可以拿到变化前和变化后的值，之后做一系列操作，下面我们通过例子来解释。1.监听单个值变化<template><div><el-inputv-model="demo"></el-input><div>{{value}}</div></div></template><script>exportdefault{name:'index',data(){return{demo:'',value:''};},watch:{demo(val,oldVal){this.value=this.demo;}}};</script>这个比较简单，我们用到了两个变量，demo和value，这里演示重点是value值是怎么变化的，我们监听的demo，这个demo通过v-model绑定到input，当input内容改变时，我们就把input里的值赋值到value。但是这个写法有个弊端，就是首次绑定不会执行监听函数，有值发生改变才会执行...

使用Vue来实现鼠标悬停效果。可以使用事件处理器v-on指令（简写为：@）来完成。为标签绑定mouseenter以及mouseleave事件即可。<template><div><ul><templatev-for="(item)initems"><li@mouseover="selectStyle(item)":class="{'active':item.active}"@mouseout="outStyle(item)">{{item.select}}<spanclass="icon"v-show="item.active">{{item.icon}}</span></li></template></ul></div></template><script>exportdefault{data(){return{active:false,items:[{select:'第一行',icon:1},{select:'第二行',icon:...

Error in render: "TypeError:Cannotreadproperty'length'ofundefined"解决方法：shopListData.attrs!==undefined&&shopListData.attrs.length>0 ...

watch:{picker:{//为对象名handler(){//对象内数据变化会执行此方法document.getElementById('nowColor').style.color=this.picker.color},deep:true//深度监听申明字段}} ...

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>vue过滤器</title></head><body><divid='app'><h1>{{msg|filterName}}</h1></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>varvm=newVue({el:'#app',data:{msg:'1'},filters:{filterName(val){constfilterNameMap={'0':'待确认','1':'待发货','2':'待收货','3':'待付款','4':'待收款','5':'已完成'}returnfilterNameMap[val]}}})</script></body></htm...

jQuery操作select示例<divid="example"><selectid="select1"></select><pid="p1">Result:</p></div><script>$(document).ready(function(){letdata=[{id:1,name:'A'},{id:2,name:'B'},{id:3,name:'C'}];//添加optionfor(letitemofdata){$("#select1").append(`<optionvalue="${item.id}">${item.name}</option>`);}//监听change$("#select1").change(function(){letval=$("#select1option:selected").val();lettxt=$("#select1option:selected").text();$("#p1").text(`Result:${val},${tx...

VUE默认是hash浏览模式，换成history可以去掉#exportdefaultnewRouter({mode:'history',routes:[]}） ...

一、内容回顾1、webpack（前端中工作，项目上线之前对整个前端项目优化）　　-entry：整个项目的程序入口（main.js或index.js）；　　-output：输出的出口；　　-loader：加载器，对es6代码的解析，babel-loader（官网：https://www.babeljs.cn/）是浏览器支持es6,css-loader解析css文件，style-loader将css代码添加一个style标签插入header标签中，url-loader等等；　　-plugins：有很多，比如html-webpack-plugin，丑陋等等；二、vue项目中常见问题      我们已经学过如何使用脚手架创建一个vue项目，接下来我们介绍一下vue项目中的常见问题。1、使用vue-cli脚手架和webpack模板生成一个项目（以项目名为luffy-project为例），步骤如下：vueinitwebpackluffy-project//创建项目(使用单页面应用就安装vue-router，其他选no)cdluffy-pr...