qq_41417772的博客

原创 element-ui 校验部分表单

this.$refs[formName].validateField([‘userName’, ‘pwd’, ‘…’], valid => { }//验证多个规则用这个

原创 vue 上传图片后实时获取图片宽高

问题：使用$nextTick之后获取到的宽高依然是上一张图片的原因：新的图片还没有加载完成就去获取宽高了解决：新的图片加载完后再获取<img @load="onLoad" ref="newImg"/>onLoad() { console.log('图片高度是' + `${this.$refs.newImg.offsetHeight}px`)}...

转载 《图解HTTP》总结

http协议简介客户端与服务器通信基于http协议，http协议采用请求/响应模型。客户端向服务器发送一个请求报文，请求报文包含请求的方法、URL、协议版本、请求头部和请求数据。服务器以一个状态行作为响应，响应的内容包括协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据。http协议特性无状态，即不保存通信状态，也不保存请求与响应方的身份和状态。【cookie技术产生的原因，浏览器会根据从服务器端发送的响应报文内 Set-Cookie 首部字段信息自动保持 Cookie。而每次客户端发送

原创 require与import的区别

用法上的区别：require：在导出的文件中定义module.export,导出的对象的类型不予限定（可以是任何类型，字符串，变量，对象，方法），在引入的文件中调用require()方法引入对象即可。例：aPage.js：// aPage.jsmodule.export = { aPage: function(){ console.log('我是a页面') }}bPage.js：// bPage.jsvar obj = require('./aPage.js')ob

原创 mouseout事件被不断触发

原因：mouseout => 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。因为绑定mouseout事件的父div里通常会嵌套子div，鼠标虽然未移出父元素，却移出了其中的子元素，故事件会被触发。解决：用 mouseleave代替mouseout总结：mouseover与mouseentermouseover => 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。mouseenter => 只有在鼠标指针从元素外穿入被选元素（到

原创 vue watch监听变化数据时，新旧值一致

watch的基本用法：watch:{ watchData: function (value, oldValue) { console.log(value, oldValue) }}但是如果需要监听的数据如下：data: () => ({ tableAll:{ tableData:[] }})则需要用到watch中的deep属性。于是我们写成了这个：computed:{ newTableData(){ return thi

原创 跨域

Ajax技术Asynchronous JavaScript and XML (Ajax) 是Web2.0的关键技术。Ajax允许在不干扰Web应用程序的显示和行为的情况下在后台进行数据检索。使用XMLHttpRequest函数获取数据，它是一种API,允许客户端JavaScript 通过 HTTP 连接到远程服务器。不过，由于受到浏览器的限制，该方法不允许跨域通信。如果尝试从不同的域请求数据，会出现安全错误。跨域是什么所有的浏览器都遵守同源策略，同源是指协议、域名和端口号都一致。这个策略能够保证一

转载 Vue中的$nextTick

一.实例先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用。<div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div> <div v-if="msg2">Message got inside $nextTick: {{msg2}}</

原创 网络请求放在Vue的哪个生命周期里

beforeCreated、created、mounted都可。mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。在此生命周期发起网络请求容易造成页面闪屏问题。

原创 VueX

vuex有哪几种属性State、Getter、Mutation 、Action、Module 五种state => 基本数据getters => 从基本数据派生的数据mutations => 提交更改数据的方法，同步！actions => 像一个装饰器，包裹mutations，使之可以异步。modules => 模块化Vuexvuex的State特性是？stae就是存放数据的地方，类似一个仓库 , 特性就是当mutation修改了state的数据的时候，他会动态

转载 git 新建分支并提交本地代码到远程分支

step1，在本地新建分支git branch newbranchstep2：把本地分支push到远程git push origin newbranchstep3：切换到该分支git checkout newbranchstep4：查看本地修改git statusstep5：添加本地修改git add .step6：commit修改git commit -m ‘XXXX’step7：push代码git push完毕...

原创 width: auto、width: 100%、max-width

<div class="parent"><div class="child"></div></div><style>.parent {width: 100px;background-color: red;}.child {width: 100%;background-color: blue;}</style>上面代码中child的宽度设置为100%，意思是child的content的宽度等于parent的

原创 鼠标移入div显示按钮，移出隐藏按钮

鼠标移入时：鼠标移出时：实现： <div class="father"> <button class="son">我是按钮</button> </div>.father{ background-color: burlywood; height: 30px; &:hover .son{ display: block; // 设置父元素hover时子元素的样式 }}.s

原创 css写一个小圆点

.mark { width: 10px; height: 10px; border: 1px solid #8c8c8c; border-radius: 20px; background-color: #8c8c8c; opacity: 0.5; } <div class = "mark"></div> <span>指示器名称</span>...

原创 js数组对象的深拷贝

一.最简单的方法JSON.parse(JSON.stringify(Obj)),但是对于正则表达式类型、函数类型等无法进行深拷贝(而且会直接丢失相应的值)。 let Obj = [ { id: "2001.1", value: "加粗", active: false, icon: IconLibrary.FontBoldSvg, }

转载 vue-cli中proxyTable配置接口地址代理

修改 config/index.js:module.exports = { dev: { // 静态资源文件夹 assetsSubDirectory: 'static', // 发布路径 assetsPublicPath: '/', // 代理配置表，在这里可以配置特定的请求代理到对应的API接口 // 使用方法：https://vuejs-templates.github.io/webpack/proxy.html proxyTable:

原创 Vue 中 Axios 的封装和 API 接口的管理

点击跳转

原创 vue props+watch

父组件通过v-bind绑定数据：<template> <router-view :yourdata="yourdata"></router-view></template><script>export default { data:function() { return { yourdata:"这是一段测试文字。", } }}</script>

原创 js中的!!

let a = "!!b" // !是一次取非 !!是两次取非，!! 就是把任意数据类型的数据转换为Boolean类型

原创 前端 chrome浏览器调试

在需要执行断点操作的代码前加上 debugger标记运行代码，打开浏览器，按f12，点击source，按crtl + p，输入debugger标记所在的js文件刷新页面，当页面代码运行到断点处便会暂停执行把鼠标移到变量上，查看变量值...

原创 js全屏（h5全屏api：requestFullscreen）

前提： iframe嵌套页面一.判断是否全屏 /** * [isFullscreen 判断浏览器是否全屏] * @return [全屏则返回当前调用全屏的元素,不全屏返回false] */ function isFullscreen(){ let doc = window.top ? window.top.document :document return doc.fullscreenElement ||

原创 git切分支时，该分支的修改被带到另一个分支

原因：新建的文件没有纳入版本管理，所以会被带到切换的分支解决：1. 在切换分支前，先进行commit2. 先 git stash 再切换分支（再切回来要 git stash pop）

原创 Vue.nextTick()

原创 new Vue({ render: h =＞ h(App), }).$mount(‘#app‘)

KaTeX parse error: Expected 'EOF', got '#' at position 8: mount(’#̲app’) ： 手动挂载到id…mount(’#app’) ： 创建一个新的Vue实例，并把App挂载到id为app的dom中去

原创 iview组件样式重叠问题

问题描述：如图，时间选择器有一部分被富文本编辑器（tinymce组件）覆盖。解决办法：把网申时间的内容部分z-index设为很大的数字。注意：设置时间选择器的z-index值是没用的。

原创 vue中key的作用

vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：1. 两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。2. 同一层级的一组节点，他们可以通过唯一的id进行区分。基于以上这两点假设，使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)。当某一层有很多相同的节点时，也就是列表节点时，Diff算

原创 const定义的对象属性是否可以改变？

大家都知道const存在块级作用域，且不存在变量提升，一般用于定义常量。const定义的如果是基本数据类型，定义的时候必须初始化，定义后不可再修改，如果修改，会报错。那么如果是const定义的对象呢？是否可以修改对象属性？答案是可以。原因：对象是引用类型的，const定义的ac中保存的是指向对象的指针，这里的“不变”指的是指向ac的指针不变，而修改ac中的属性并不会让指向对象的指针发生变化，所以用const定义对象，对象的属性是可以变化的。...

原创 Vue 计算属性computed和侦听属性watch

一.计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性。默认只有get，如果需要set，要自己添加。另外set设置属性，并不是直接修改计算属性，而是修改它的依赖： computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (n

原创 VUE+iView 包含多个upload组件时，在on-success里面传参

有多个Upload组件，上传图片时需要知道是第几个Upload组件 <div v-for="(bannerForm, index) in banner" :key="index"> <Form :ref="bannerForm" :model="bannerForm"> <Upload ref="upload" :on-success="(value)=> handleSu.

原创 vue watch 实时监听 当input为空时，按钮变为禁用状态

<Button :disabled="saveDisable" >保存 </Button> data() { return { saveDisable: false, //初始为非禁用状态 banner: [], } } watch: { banner: { //监听banner handler: function(newVal, oldVal) { this.saveDis.

原创 js获取数组中的对象的某个属性

bannerList = [ { id:0, name:'' } { id:1, name:'' } ] //bannerList是对象数组 for (var i in this.bannerList) { console.log(this.bannerList[i].id) //0 1 }

原创 elementUI 上传头像

<template> <el-upload class="avatar-uploader" :action= action :headers="myHeaders" :show-file-list="false" :on-success="handleAvatarSuccess" :befor

原创 Vue中的scoped和/deep/

scoped私有作用域 作用： 让当前样式只作用于当前组件而不污染全局，scoped通过使用 PostCSS 来实现以下转换：<style scoped>.example { color: red;}</style><template> <div class="example">hi</div></template>转化为：<style>.example[data-v-f3f

原创 js中的map()方法

概念：map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值，不改变原数组，也不对空数组进行操作。map()完整写法：arr.map(function(currentValue，index，arr),thisValue)三个参数，currentValue：当前元素的值；index：当前元素的索引值；arr：要map的数组。ES6箭头函数版精简写法：const array1 = [1, 4, 9, 16];const map1 = array1.map(x =&gt

原创 git

git add -A 提交所有变化git add -u 提交被修改(modified)和被删除(deleted)文件，不包括新文件(new)git add . 提交新文件(new)和被修改(modified)文件，不包括被删除(deleted)文件

原创 setTimeout(foo,0)可以写成foo()吗？

首先，setTimeout()和setInterval()相同点：都被用作”定时器“，即指定事件在指定时间之后执行，内部运行机制完全相同不同点：setTimeout()是一次性执行，setInterval()是反复执行console.log(1);setTimeout(function(){console.log(2);},1000);console.log(3); //运行结果：1 3 2 那如果是setTimeout( foo, 0 )呢？0毫秒哎，foo是不是会马上执行？不会！不会！

原创 一些前端实习面试问题【不断更新】

问题一：从三个方面来介绍小程序的生命周期：（1）应用生命周期（2）页面生命周期（3）应用及页面生命周期的触发顺序应用生命周期1.用户首次打开小程序，触发 onLaunch（全局只触发一次）。2.小程序初始化完成后，触发onShow方法，监听小程序显示。3.小程序从前台进入后台，触发 onHide方法。4.小程序从后台进入前台显示，触发 onShow方法。5.小程序后台运行一定时间，或系统资源占用过高，会被销毁。前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，

原创 js对象的可枚举属性 / for...in与for...of

js中每个对象都有一个属性叫enumerable（可枚举性），这个属性的true/faslse决定对象的该属性是否可枚举（此属性能否被方法访问到）。一. 怎么判断一个属性是否可枚举？首先，Object、Array、Number等这种js内置的原型属性不可枚举。定义了某个属性的enumberable属性为false，则此属性也不可枚举。用obj.propertyIsEnumerable(prop)判断，返回true则可枚举，返回false不可枚举，但是通过原型链继承的属性不能通过此方法判断可枚举性。

原创 tinymce富文本编辑器行间距设置

…return {// 初始化配置init: {content_style: “p {margin: 0px; border:0px ; padding: 0px;}” //设置行间距}}…

原创 vue+element 携带参数跳转到新页面

需求： 点击表格中某一行的打印按钮，跳转到新的页面，并把这一行的数据呈现出来。