Vue知识点

154 阅读13分钟

vue笔记 mixins:用于在组件对象中引用混入对象的属性(类似继承后就可调用子类中的方法和属性) floor:小数取正,整数小数取其小(0.6=>0),负数小数取进一(-0.4=>1) splice():数组替换,第一个参数是所要替换数组值得下标,第二个参数是1时,删除当前数组值,是0时,第三个参数是所要替换后的值 v-for:使用时必须给其一个key值 v-for和v-if:两者最好不要再同一个标签上使用,其一可以套用在其父元素上使用 transition-group:只执行发生变化元素的动画效果 transition:整体跟着一起执行动画效果
el:指令所绑定的元素,可以用来直接操作 DOM const:所定义的是常量,值不能被修改 let:的作用域比var更加严格了,有点类似于Java中的变量定义, 1、必须先定义再使用, 2、有着严格的作用域,变量只作用域当前隶属的代码块。 var 变量是全局的。

component: 注册组件,组件可以扩展HTML元素,封装可重用的HTML代码,可以将组件看作自定义的HTML元素。

store里面有4个核心内容,State、Getters、Mutations和Actions,我的理解是这样的(可能有点粗浅,你将就着看看)State是存数据用的,Getters有点类似计算属性,进行简单的逻辑计算,Mutations是一些简单的方法,又来改变state,官方说法是“更改 Vuex 的 store 中的状态的唯一方法是提交 mutation”,Actions是较为复杂的方法,并不能直接改变状态,而是提交mutations,可以包含任意异步操作

复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象或使用beforeRouteUpdate守卫 www.cnblogs.com/SamWeb/p/66… www.jb51.net/article/119…

格式限定(只能输入中文或者数值等) 参考网址:blog.csdn.net/liyongxxyy/… 列如只能输入中文或英文value=value.replace(/[\d]/g,'')

错误的提示信息 span 就是错误提示 。 errors.first('field') -- 获取关于当前field的第一个错误信息 collect('field') -- 获取关于当前field的所有错误信息(list) has('field') -- 当前filed是否有错误(true/false) all() -- 当前表单所有错误(list) any() -- 当前表单是否有任何错误(true/false)

页面运行时input元素自动获取焦点

城市三级联动网址: segmentfault.com/a/119000000… blog.csdn.net/bright2017/… 插件npm install v-distpicker --save

进入项目的id地址:http://192.168.0.109/#/ 管理员账号:18770099843

三个必看的 1:vue.js 2:vue router //路由 3:vue.xs

vue router路由 1:router.push(location)方法 想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录, 所以,当用户点击浏览器后退按钮时,则回到之前的 URL。 2:router.replace() 方法的使用 this.$router.replace({path:'subject'}) 导航后不会留下 history 记录。即使点击返回按钮也不会回到这个页面。 一些快捷键的使用:
Ctrl键+“c”终止命令操作。

resize:none | both | horizontal | vertical; 禁止调整 | 可调宽高 | 可调宽 | 可调高

vue框架中./是当前同级目录下的文件,如果文件后面内容默认就是index.js ../是返回上一级目录 @"文件" 是在src下的文件。

const是JavaScript的一种声明方式,如果使用const定义的将是常量,在后续的程序运行中,其值将无法被改变。 而let是块级别(大括号括起来的内容)

知识点: 1.Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

个人理解:管理应用的所有组件的状态,我们可以理解为在所有组件中都能用到的一个变量,而且这个变量状态要在发生变化后保持一致。

2.使用Vuex基础 1、安装依赖命令:npm install vuex --save 可以简写为: npm i vuex -S

2、引入和使用

  import Vue from 'vue'

  import Vuex from 'vuex'

  Vue.use(Vuex)

全屏截图快捷键【prscsysrq】 按下键盘上的Ctrl+PrtSc键,截取整个屏幕。 按下键盘上的Alt+PrtSc键,屏幕上的当前窗口。

iview插件www.iviewui.com/ vue移动端ui框架网站: 1:vux.li/ 2:vue.ydui.org/ 3:www.ydui.org/ 4:www.framework7.cn/ 5:blog.csdn.net/zengdejie12…

web UI组件网站: amazeui.org/widgets/sli… 轮播框架:ustbhuangyi.github.io/better-scro…

饿了么UI框架:element-cn.eleme.io/#/zh-CN/com…

项目端口:http://localhost:8080/#/

做项目必看的两个网站: 1:www.liaoxuefeng.com/wiki/001434… 2:github.com/axios/axios

vue 高仿QQ音乐项目 网址:segmentfault.com/a/119000000…

vue手机移动端组件网址: 1:doc.vux.li/zh-CN/compo… 2:mint-ui.github.io/#!/zh-cn 3:blog.csdn.net/hf123lsk/ar…

看一下get和post的网络请求

vuex插件下载:npm install vuex --save

/* eslint-disable */去掉代码规范错误

兼容IE浏览器运行 : "babel-polyfill": "^6.26.0", : entry: { app: ["babel-polyfill", './src/main.js'] },

知识点: vue中图片的懒加载 第一步:首先下载插件: npm install vue-lazyload --save-dev 第二步:在main.js引入插件: import VueLazyLoad from 'vue-lazyload' Vue.use(VueLazyLoad,{ error:'./static/error.png', loading:'./static/loading.png' }) 第三步:vue文件中将需要懒加载的图片绑定v-bind:src修改为 v-lazy

vue的filter()方法 1、自定义的过滤器,当然这包括注册在全局和注册在实例化的内部 (1)注册在全局的fliter 转载 (1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 (2) 过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串,而不带引号的参数按表达式计算 (3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突 (4)用户从input输入的数据在回传到model之前也可以先处理

表格标签的边框设置 cellspacing=“0”单元格间距,cellpadding=“0”单元格边距

vue里面的一些方法: 1:components:{} 渲染组件的 2:props:{} 使用props:{}传递数据, 组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。 3:computed:{} 相当于属性的一个实时计算,如果实时计算里关联了对象,那么当对象的某个值改变的时候,同事会出发实时计算。 computed是在HTML DOM加载后马上执行的,如赋值; 4:methods:{} 承载方法的。 4:watch:{} 对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用 $watch() ; watch:{}是对具体的某个数据的变化进行处理。 5:mounted(){}和created(){}方法的作用于区别: created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。异步数据的请求也可以在该方法中调用, 以及一些方法的初始化。 mounted(){}在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。 其实两者比较好理解,通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作, 比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步,而如果你写入组件中, 你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。

6:updated () {} //数据更新完毕:如果对数据更新作统一处理就在updated(){}方法中处理;如果想分别区分不同的数据更新, 使用nextTick函数处理。 前端模拟的接口Mockjs模拟响应

phone:请求方式。

有空看一下http:// 跨域请求。

在vue项目中的config文件下的 /config/dev.env.js /config/prod.env.js 其实,这两个文件就是针对生产环境和发布环境设置不同参数的文件。

开源官网:github.com/ 微信公众平台:mp.weixin.qq.com/wiki?t=reso… 微信web开发者工具调试:www.cnblogs.com/Leo_wl/p/59… 微信公众平台-小程序:developers.weixin.qq.com/miniprogram… 微信小程序个人登录服务:mp.weixin.qq.com/wxopen/init…

我的微信AppID(小程序ID) wx1cb3c8a10849a523 我的AppSecret(小程序密钥) 2903a26ef050d555902ccd2a0d8e1982

W3cschool微信小程序网址:www.w3cschool.cn/miniappbook… W3cschool个人登录页网址:www.w3cschool.cn/my#myExam W3cschool官网:www.w3cschool.cn/ W3cschool官网:www.w3cschool.cn/wkspring/f6… 饿了么开源框架:v-charts.js.org/#/pie better-scroll滚动框架网站:ustbhuangyi.github.io/better-scro… better-scroll首页网:ustbhuangyi.github.io/better-scro… 地图网站:echarts.baidu.com/

有空看一下pdf.js外卖:blog.csdn.net/qq_38125123…

微信小程序仿美团

进行断点调试的网站 www.cnblogs.com/shawWey/p/7… 或者:cnodejs.org/topic/58f37… 注意的事项:添加断点之前要先关闭调试,关闭的方法是点击界面上方的调试控制面板中的停止按钮(红色正方形)。

知识点:vue中Promise的使用 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。 从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操 作都可以用同样的方法进行处理。 resolve(value)是在Promise在已经异步完成成功(Resolved)之后执行的 reject(value)是在Promise在异步失败之后(Rejected)执行。 当然,也可以用then来指定:then(resolve,reject) 或者:then(resolve),catch(reject)

知识点: FormData()对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据, 但也可以用于发送键数据(keyed data),而独立于表单使用。如果表单enctype属性设为multipart/form-data , 则会使用表单的submit()方法来发送数据,从而,发送数据具有同样形式。

知识点: broadcast和dispatch的区别 broadcast 事件广播 @param {componentName} 组件名称 @param {eventName} 事件名 @param {params} 参数 遍历寻找所有子孙组件,假如子孙组件和componentName组件名称相同的话,则触发$emit的事件方法,数据为 params. 如果没有找到 则使用递归的方式 继续查找孙组件,直到找到为止,否则继续递归查找,直到找到最后一个都没有找到为止。

dispatch 查找所有父级,直到找到要找到的父组件,并在身上触发指定的事件。 @param { componentName } 组件名称 @param { eventName } 事件名 @param { params } 参数

在JavaScript中document.write("哈哈哈");这是向body中输出一个内容。 在JavaScript中“标识符”可以为“变量”,“函数名”,“属性名”等等。

在JavaScript中一共存在六种数据类型: 1:String //字符串 2:Number //数字 3:Boolean//布尔值 4:null //空值 5:object //对象 6:undefined//未定义

mp-vue:看一下微信小程序的 文档网站:mpvue.com/ 例子网站:github.com/Meituan-Dia… 详细文档网站:mpvue.com/mpvue/

npm start 启动模块 该命令写在package.json文件scripts的start字段中,可以自定义命令来配置一个服务器环境和安装一系列的必要程序

路由的重新定向redirect参数。列如: // 默认进去 { path: '/', redirect: '/msit' }

router.back()表示返回上一级路由router.back() 表示返回上一级路由 route代表当前路由

知识点: 遍历数组的方法forEach()

知识点: 1:@click.stop="" 在vue中这个阻止点击事件冒泡,阻止默认点击事件(点击穿透)。 2:this.$refs.food.toggleShow();//在父组件中调用子组件的对象方法(前提要在子组件标签中声明 ref="food") 3:Vue.set(food,"count",1);//让新增的属性也有数据绑定 4:这是vue中的过度动画标签,在要做动画的标签的class的样式下添加 &.fade-enter-active, &.fade-leave-active { transition: opacity 0.5s; }

&.fade-enter, &.fade-leave-to {
    opacity: 0;
}

5:在vuex中dispatch和commit的用法和区别 dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('mutations方法名',值)

commit:同步操作,写法:this.$store.commit('mutations方法名',值)

6:缓存路由组对象

7:vue-lazyload 图片懒加载,具体使用请看github官网 8:url在线编码网站:tool.oschina.net/encode?type…

9:在vue中slot的使用:如果要父组件在子组件中插入内容 ,必须要在子组件中声明slot 标签 , 如果子组件模板不包含插口,父组件的内容

{{msg}}

将会被丢弃。

10:vue中路由默认进去的更目录: { path: '/', redirect: '/msite' },

11:弹性布局的居中:justify-content: center;

12:让图片在div垂直居中的方法:blog.csdn.net/zyy_0725/ar…

需要解决的问题:

1:js中this的指向

/keys 查询我的钥匙

/messageSync 锁日志

锁控第二版UI框架 kuangpf.com/mpvue-weui/… java HashMap 工作原理 www.importnew.com/18633.html

我的个人网站:www.si16795831.icoc.bz/ 免费注册网站的官网:ajz.fkw.com/pro8.html?_…

知识点:vue中路由跳转传参数有多种,常用的是下面的几种: 1:通过router-link进行跳转 2:通过编程导航进行路由跳转


跳转

  1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航
  2. params -> 是要传送的参数,参数可以直接key:value形式传递
  3. query -> 是通过 url 来传递参数的同样是key:value形式传递

1:vue中的删除的方法 splice()

2:vue中过滤数组的方法 filter()

3:vue中的排序的方法 sort()

4:<button @click="test3(event)">test3</button>其中event)">test3</button> 其中event代表事件对象

5:点击事件的穿透事件(即冒泡事件) 在点击事件后面加@click.stop()

6:点击事件的阻止事件的默认行为 <a href="www.baidu.com" @click.prevent="dianji">百度一下

7:HTML5新特性:范围样式 HTML5的新特性:范围样式,又叫做 。 开发者可以通过为根元素设定一个添加了scoped属性的style标签, 来限制样式只作用于style标签的子元素上。这会限制样式只影响style标签的父元素和它所有的后代元素。

8:在vue中function函数和=>{}的却别,=>{}有个this的回调函数,没有当前的this;而function有着当前的this

创建一个小程序项目:mpvue.com/mpvue/quick… 一般在vue中用=>{}

9:背景图片自适应css设置 www.cnblogs.com/neromaycry/…

10:百度地图搜索定位 blog.csdn.net/functionche… 11:百度地图自动定位 blog.csdn.net/han_ying_yi…

在最新的vue框架中dev-server.js被替换成了webpack-dev-conf.js

12:display:grid;网格布局的使用

前端传给后台值的两种方法 方法1: export function biddinginformation(name, pageCurrent, pageSize) { const params = { //传给后台需要的值 name, pageCurrent, pageSize } return request({ url: '/applicantInfo', method: 'GET', params }) }

然后在接口方法里面写: Biddinginformation({ commit, state },params) { return new Promise((resolve, reject) => { biddinginformation(params.name, params.pageCurrent, params.pageSize).then(data => { //传给后台的值
resolve(data); }).catch(error => { reject(error); }) }) },

方法2: export function employeesClock(cIdclock) { return request({ url: '/company/selectPunchRecordInfo', method: 'post', data: cIdclock //传给后台的纸 }) } 在vue组件需要访问的接口里添加 var cIdclock = { //传给后台的值 pageSize: 5, companyId: this.route.query.companyId,//路由取值pageCurrent:num,personnelId:this.route.query.companyId, // 路由取值 pageCurrent: num, personnelId: this.route.query.personnelId //员工id }; this.$store.dispatch("EmployeesClock", cIdclock).then(data => {}); //接口

layui - 经典模块化前端 UI 框架: www.layui.com/admin/ 前端框架论坛网站:www.bestvist.com/h

在vue里config文件夹中config.dev.js是开发环境配置,config.prod.js是生产环境配置。

江西辰锐网站: www.jxchenry.com/ 爱上租网站: www.ishangzu.com/

vue中store存储commit和dispatch的用法和作用 1:this.store.commit(toShowLoginDialog,true);2this.store.commit('toShowLoginDialog', true); 2:this.store.dispatch('toShowLoginDialog',false); 主要区别是: dispatch:含有异步操作,例如向后台提交数据,写法: this.store.dispatch(mutations方法,)commit:同步操作,写法:this.store.dispatch('mutations方法名',值) commit:同步操作,写法:this.store.commit('mutations方法名',值)

amazeui.org/ 跨屏幕前端ui手机pc端适用

豆瓣电影vue源码地址:github.com/bhan614/dou…

ts编辑工具官网:www.tslang.cn/ 微信小程序中图片变形了怎么办,使用mode="widthFix"属性

一些方法的意义: 1:toLocaleString():将对象转换为字符串。 2:Promise(){}:

电脑装系统工具: 1:制作系统盘的“微PE工具箱”下载网址:www.wepe.com.cn/download.ht… 2:系统镜像下载网址:msdn.itellyou.cn/ 3:CDN官网(免费的前端开源项目库):www.bootcdn.cn/ 4:微信小程序组件化开发框架WePY官方文档:tencent.github.io/wepy/docume…

模拟假的域名接口 www.easy-mock.com/login

vue forEach循环数组拿到自己想要的数据

小程序的生命周期:

三种调试的方法: 1:console.log() // 控制台打印 2:alert() // 弹出框方式 3:debugger // debugger调试

对于安装lang="scss" 失败或者运行报错的解决方法如下: 解决网址:www.cnblogs.com/crazycode2/… 1,使用save会在package.json中自动添加 npm install node-sass --save-dev npm install sass-loader --save-dev 通常使用npm安装会出现以下报错,安装失败。(网路问题) 可以通过淘宝的npm镜像安装node-sass,解决以上问题。 npminstallgcnpmregistry=https://registry.npm.taobao.org(安装淘宝镜像)npm install -g cnpm --registry=https://registry.npm.taobao.org (安装淘宝镜像) cnpm install node-sass --save (使用淘宝镜像安装node-sass) 2,注:安装淘宝镜像后,仍无法安装node-sass的情况,执行下列命令 $ npm install --save node-sass --registry=registry.npm.taobao.org --disturl=npm.taobao.org/dist --sass-binary-site=npm.taobao.org/mirrors/nod… 说明: --registry=registry.npm.taobao.org 淘宝npm包镜像 --disturl=npm.taobao.org/dist 淘宝node源码镜像,一些二进制包编译时用 --sass-binary-site=npm.taobao.org/mirrors/nod… 这个才是node-sass镜像

微信公众平台技术文档网址:mp.weixin.qq.com/wiki?t=reso…

三大论坛:掘金,思否,CSDN css Tricks样式网址:qishaoxuan.github.io/css_tricks/…

前端面试进阶网址: 1:blog.poetries.top/FE-Intervie… 2:finget.github.io/2019/01/15/…

文字图标全部居中:align-self: center;

vue中饿了么框架技术文档vue-element-admin 网址:panjiachen.github.io/vue-element… 电商后台管理系统前端项目地址:github.com/macrozheng/…

Ajax的缺点: 1:本身是针对mvc的编程,不符合现在前端mvvm的浪潮 2:基于原生的XHR开发,XHR本身的架构不清晰。 3:jQuery整个项目太大,单纯使用Ajax却要引入整个jQuery非常不合理(采取个性化打包的方案又不能享受CDN服务) 4:不符合关注分离(Separation of Concerns)的原则 5:配置和调用方式非常混乱,而且基于事件的异步模型不友好。 css有哪些选择符: 1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p)

4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器(li a) 7.通配符选择器( * ) 8.属性选择器(a[rel = "external"]) 9.伪类选择器(a: hover, li:nth-child)

css中的优先级: 优先级为: !important > id > class > tag important 比 内联优先级高,但内联比 id 要高

知识点: js如何获取对象数组的某个属性集合 var arr = [ {a:1,b:2,c:3}, {a:4,b:5,c:6}, {a:7,b:8,c:9} ]; var na = arr.map(function(v){return v.a;}); alert(na);

通过JavaScript中实现html页面跳转:

// 直接跳转,在原有页面打开 window.location.href='index.html'; // 定时跳转 setTimeout("javascript:location.href='index.html'", 5000); // 在新的页面打开链接 window.open("www.baidu.com");

java中jdk安装目录:C:\Program Files\Java\jdk-13.0.1\

运行react项目命令:npm start

购物车bug 1:旅游路线点击有问题

知识点

1:css文本超出省略号

overflow: hidden; text-overflow:ellipsis; white-space: nowrap;

2:js中数组常用方法

(1);Array.map() 此方法是将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并没有改变原来的数组。 案例: let arr = [1,2,3,4,5]; let newArr = arr.map(x=>x*2);

(2);Array.forEach() 此方法是将数组中的每个元素执行传进提供的函数,没有返回值,注意和map的方法区分 案例: let arr = [1,2,3,4,5]; num.forEach(x=>x*2);

(3);Array.filter() 此方法是将所有元素进行判断,将满足条件的元素作为一个新的数组返回 案例: let arr = [1,2,3,4,5]; const isBigEnough = value = value>=3 let newArr = arr.filter(isBigEnough)

(4);Array.every() 此方法是将所有元素进行判断返回一个布尔值,如果所有元素都满足判断条件,则返回true,否则返回false 案例: let arr = [1, 2, 3, 4, 5] const isLessThan4 = value => value < 4 const isLessThan6 => value => value < 6 arr.every(isLessThan4 ) //false arr.every(isLessThan6 ) //true

(5);Array.some() 此方法是将所有元素进行判断返回一个布尔值,如果存在元素都满足判断条件,则返回true,若所有元素都不满足判断条件,则返回false:

(6);Array.reduce() 此方法是所有元素调用返回函数,返回值为最后结果,传入的值必须是函数类型

(7);Array.concat() 此方法是一个可以将多个数组拼接成一个数组

知识点:

点击

给vuex库赋值 this.$store.commit("SET_LEMENTS", data);

data: 就是要给vuex赋的值

知识点: elementui Dialog中点击新增出现弹框,保存后再次点击新增时表单校验以及表单内容清空 try { this.refs['tabForm'].resetFields() } catch (e) { } // 升级版 this.nextTick(() => { try { this.refs[myFormref].refs['myFormref'].refs['ruleForm'].resetFields() } catch (e) { console.log(e) } })

知识点: js数组如何去掉逗号分隔符 方法一:join(" ")方法去掉 var a = ['1', '2', '3', '4', '5']; var c = a.join(" "); alert(c); //a和c自定义 方法二:遍历数组 var a = ['1', '2', '3', '4', '5']; var c = ""; for (var i = 0, l = a.length; i < l; i++) { c = c + a[i]; } alert(c); //a和c自定义

父组件是如何拿到引入的子组件里的element-ui 的from表单ref对象 this.refs[myFormref].refs['myFormref'].refs['ruleForm'] this.refs[子组件的ref].refs['子组件的ref对象'].refs['子组件表单的ref对象']

向对象添加新的键值,不覆盖原先键值得值 data 是个对象 this.$store .dispatch("GetAllProductNameDetails", addrties) .then((data) => { data.price = ""; data.box_gauge = ""; data.box_num = ""; data.num = ""; data.remarks = ""; this.jjfdata.push(data); }) .catch((error) => {});

过滤表格字段id数字转中文

data.data.forEach((item) => { this.organization.every((res) => { if (item.organization_id == res.id) { item.organization_id = res.name; return false; } else { return true; } }); this.role.every((res) => { if (item.authid == res.id) { item.authid = res.name; return false; } else { return true; } }); });

向一个新的空数组添加key元素,并和另一个数组合并成一个新的数组 var newArr = response.data.orderimportsignlist.map(item => ({ key: item.importsn + item.skuid })) this.list = response.data.orderimportsignlist.map((item, index) => { return { ...item, ...newArr[index] } });

知识点:js实现删除数组对象中每项中的某个key值 //去除所有的id的key:value,保留其他的key:value var newObj = {}; var arrList = [     {id:1, name:'惊鲵',sex:'1'},     {id:2, name:'掩日',sex:'2'},     {id:3, name:'黑白玄翦',sex:'3'}   ]; var newArr = []; arrList.forEach(function(item,i){ for ( var key in item) { if(key != 'id'){ newObj[key] = item[key]; } } newArr.push(newObj); newObj = {};//这步至关重要,每循环一次,都要清空一次,否则拿到的数据总是最后一条 });
console.log(newArr);

知识点:数组去重 var obj = {}; res.children = res.children.reduce(function(item, next) { obj[next.importsn] ? '' : obj[next.importsn] = true && item.push(next); return item; }, []); // res.children 要去重数组;importsn :要去重指定数组变量键值

知识点:多张图片上传,删除数组对象对应的key值 let arr = [] let obj = this.imgList[0]; // this.imgList 要删除的数组对象 for (let key in obj) { arr.push(obj[key]); } console.log(arr);

js判断数组中对象的某个字段的值是否重复,如果重复则保留最新添加的,删除原先的数据

for (var i = 0; i < this.items.length - 1; i++) { for (var j = i + 1; j < this.items.length; j++) { if (this.items[i].number === this.items[j].number) { console.log("重名了!!"); this.items.splice(i, 1); } else { console.log("没有重名"); } } }

引入<style lang="less">报错时要在添加一条命令: npm install less less-loader --save-dev 知识点:利用splice(-1,1)删除数组最后一位数值 方法一:var x =[1,2,3,4,5]; //定义数组 var len = x.length; 获取数组长度,因为从0开始,所以len-1; x.splice(len-1,1); 方法二:splice(-1,1):-1也表示数组最后一位数 x.splice(-1,1); element-ui 动态加载导航栏菜单选项网上例子:https://blog.csdn.net/bamboozjy/article/details/84070564 知识点:如何判断页面是在移动端还是在PC端打开 (1):三目运算判断 window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? "https://www.baidu.com/" : "http://news.baidu.com/"; 以上代码利用了正则表达式和三目运算符,含义就是如果是移动端打开的话那就跳转到 "https:www.baidu.com/" ,如果不是就跳转到"http://new.baidu.com/" (2):if判断 if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { window.location.href = "https://www.baidu.com/"; } else { window.location.href = "http://news.baidu.com/"; } vue生命周期 1:beforeCreate() {}, //生命周期 - 创建之前,可以在这加个loading事件,在加载实例时触发。 2: created:初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用 3: mounted:挂载元素,获取到DOM节点 4: updated:如果对数据统一处理,在这里写上相应函数 5: beforeDestroy:可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom JavaScript中的严格比较和类型转换比较 1.严格比较(例如 ===)在不允许强制转型的情况下检查两个值是否相等 2.抽象比较(例如 ==)在允许强制转型的情况下检查两个值是否相等 例如: var a = "42"; var b = 42; a==b; // true a===b; // false 字符串转换成整数 var a ="12"; var b = Number(a); vuex知识点: 1:vuex状态管理器要在mounted(){}调用。 2:js只提取字符串中的汉字 // 封装只提取汉字的方法 GetChinese(strValue) { // eslint-disable-line if (strValue !== null && strValue !== '') { const reg = /[\u4e00-\u9fa5]/g; return strValue.match(reg).join(''); } return ''; } 在需要的地方调用: const test = 'ab碧果果def'; console.log(this.GetChinese(test)); 打印结果 // 碧果果 正则表达式: 1:校验手机号码: var reg = /^1[3|4|5|7|8][0-9]{9}$/; 调用:reg.test("input输入内容") 对数组的操作 过滤后的新数组,回调函数后返回的新数组 let newAry =[1,2,3,4,5].filter(function(item){ return item>2&&item<5; }) console.log(newAry); // 3,4 js从数组中的对象取出特定字段并生成新的数组 var arr=[ {id:"1",name:"零食"}, {id:"2",name:"饮料"}, {id:"3",name:"食品"} ] let brr=arr.map(e=>{ return e.name }) console.log(brr); // ["零食","饮料","食品"] 编写接口文档工具: https://www.showdoc.com.cn/ vue知识点: 1:重置data中某个对象属性: this.form = this.$options.data().form 2:将初始状态的data复制到当前状态的data,实现重置效果: Object.assign(this.$data, this.$options.data()) 3:vue表单v-mode的修饰符 lazy number trim 4:图片上传代码: html部分: <el-form-item label="上传图片:"> <div class="bakcimgs"> <div class="up_add_bg"> <input @change="uploadPhoto($event)" type="file" id="file" name="file" multiple="multiple" accept="image/png,image/jpeg,image/jpg" class="up_add" /> </div> <div class="xwlbackim"> <img :src="xwlimages" alt="" class="backimg" /> </div> </div> </el-form-item> js部分: /** * 上传图片 */ uploadPhoto(e) { var file = document.querySelector("input"); if (getIos()) { file.removeAttribute("capture"); } function getIos() { if (!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) { return true; } else { return false; } } let files = e.target.files || e.dataTransfer.files; let id = e.target.id; if (!files.length) return; this.picavalue = files[0]; var testmsg = this.picavalue.name.substring( this.picavalue.name.lastIndexOf(".") + 1 ); var extension = testmsg === "jpg"; var extension2 = testmsg === "png"; var extension3 = testmsg === "jpeg"; if (this.picavalue.size / 1024 / 1024 > 5) { this.$message({ message: "上传图片最大只能5M,请重新上传", type: "warning", }); } else if (!extension && !extension2 && !extension3) { this.$message({ message: "请上传jpg,png,jpeg格式图片", type: "warning", }); } else { const loading = this.$loading({ lock: true, text: "正在获取图片", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", }); setTimeout(() => { loading.close(); }, 500); this.imgPreview(this.picavalue, id); } }, //获取图片 imgPreview(file, id) { const loading = this.$loading({ lock: true, text: "正在获取压缩图片", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", }); setTimeout(() => { loading.close(); }, 500); let self = this; //判断支不支持FileReader if (!file || !window.FileReader) return false; if (/^image/.test(file.type)) { //创建一个reader let reader = new FileReader(); //将图片转成base64格式 reader.readAsDataURL(file); //读取成功后的回调 reader.onloadend = function () { let result = this.result; let img = new Image(); img.src = result; console.log("********未压缩前的图片大小********"); console.log(result.length / 1024); img.onload = function () { let data = self.compress(img, 0.3); self.uploadImg(data, id); }; }; } }, // 压缩图片 compress(img, size) { let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); let initSize = img.src.length; let width = img.width; let height = img.height; canvas.width = width; canvas.height = height; // 铺底色 ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, width, height); //进行最小压缩 let ndata = canvas.toDataURL("image/jpeg", size); console.log("*******压缩后的图片大小*******"); // console.log(ndata) console.log(ndata.length / 1024); return ndata; }, uploadImg(base64, id) { this.xwlimages = base64; this.applyimg = base64; this.addimages = base64; }, css部分: .bakcimgs { width: 73%; display: flex; justify-content: center; align-items: center; } .up_add_bg { display: inline-block; width: 80px; height: 80px; margin-right: 10px; background-size: cover; border: 1px solid #d7d7d7; background-image: url(../../../static/images/picturese.png); } .up_add { width: 100%; height: 100%; opacity: 0; } .xwlbackim { width: 50%; height: 120px; display: flex; justify-content: center; align-items: center; } .backimg { display: inline-block; max-width: 100%; max-height: 100%; background-size: cover; } 常用数组方法 方法 描述 是否改变原数组实例 push() 向数组的末尾添加一个或多个元素,并返回新的长度 √ pop() 删除并返回数组的最后一个元素 √ unshift() 向数组的开头添加一个或更多元素,并返回新的长度 √ shift() 把数组的第一个元素从其中删除,并返回第一个元素的值 √ copyWithin() 浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度 √ fill() 向一个已有的数组中插入全部或部分相同的值 √ reverse() 用于颠倒数组中元素的顺序 √ sort() 用原地算法对数组的元素进行排序,并返回数组 √ splice() 向/从数组中添加/删除项目,然后返回被删除的项目 √ slice() 可提取字符串的某个部分,并以新的字符串返回被提取的部分 × concat() 用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组 × join() 将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串 × every() 对数组中每一项都运行传入的函数,如果对每一项函数都返回true,则这个方法返回true × some() 对数组中每一项都运行传入的函数,如果有一项函数返回true,则这个方法返回true × filter() 对数组每一项都运行传入的函数,函数返回true的项会组成数组之后返回 × map() 对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组 × forEach() 对数组每一项都运行传入的函数,没有返回值 × keys() 返回数组索引的迭代器 × values() 返回数组元素的迭代器 × entries() 返回 索引/值 对的迭代器 × reduce() 对数组中的每个元素执行一个由您提供的reducer函数,将其结果汇总为单个返回值 × reduceRight() 从数组的末尾向前将数组中的数组项做累加 × indexOf() 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1 × lastIndexOf() 返回查找元素在数组中的位置,从数组末尾开始向前查找 × includes() 用来判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回false × find() 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined × findIndex() 返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1 × toSting() 返回由数组中每个值的等效字符串拼接而成的一个用逗号分隔的字符串 × toLocaleString() 返回一个逗号分隔的数组值的字符串 × constructor() 返回数组函数的引用,也就是调用这个方法的数组本身 × flat() 会按照一个可指定的深度递归遍历数组,将所有元素与遍历到的子数组中的元素合并为一个新数组返回 × flatMap() 使用映射函数映射每个元素,然后将结果压缩成一个新数组 × 常用的JavaScript方法 知识点:Cookie, sessionStorage与localStorage的区别 (1)sessionStorage的读写: 保存数据的方法: sessionStorage.setItem("key","value"); 或者 sessionStorage.key="value"; 读取数据的方法: var i = sessionStorage.getItem("key"); 或者 var i= sessionStorage.key; ************************************* (2)localStorage的读写 保存数据的方法 localStorage.setItem("key","value"); 或者 localStorage.key="value"; 读取数据的方法 var i = localStorage.getItem("key"); 或者 var i = localStorage.key; ************************************* (3)cookie的读写 // 引入cookie import Cookie from "js-cookie" // 存储cookie并保存七天 Cookie.set("token",data,{expires:7}); // 声明变量并使用 let token = Cookie.get("token"); vue子组件调用父组件的方法 父组件: <template> <div> <child @fatherMethod="fatherMethodOther"></child> </div></template><script> import child from './child'; export default { components: { child }, methods: { fatherMethodOther(str) { console.log(str); } } }; </script> 子组件