lixu_boke的博客

当然还有直接在index中添加但是后台如果有域名限制，就需要把域名限制增加一部分，当然前端也是可以的。的时候选择个人就可以，如果是企业级的项目，可能会涉及人员变动，建议使用公司邮箱进行注册。首先我们要申请高德地图的key，当前升级过后高德地图使用也需要加上安全秘钥。当然还有其他安全的引入方法，具体可以去高德api文档看一下。安装完之后在main.js中引入全局依赖进行使用。创建完之后就可以通过key和安全秘钥进行使用。注册之后在我的应用中创建新应用。然后再页面就可以进行使用了。之后我们就下载安装依赖。

平常我们使用的方式就是Number(0.38)*100 + '%'这样有可能会出现精度的问题出现38.000000000000003%这种情况解决这种情况的方法在自己的方法库中添加一个方法然后再main.js中添加成全局属性然后就可以在 页面中调用

先来说一下，vue中父传往子组件用v-bind绑定属性，在子页面用props接收，子传往父的用$emitthis.$emit('change',data)，data就是你要传的数据，change为父页面中绑定的事件说一下父传孙的，在vue2中可以使用v-bind="$attrs"这个咱们统一上代码说：当然还有别的方法在vue版本为2.2.0以上的也可以使用provide与inject还能使用eventBus来传参接参当然大部分时候会使用vue...

两个例子：JSON数组var list1 = [{name: 'a', id: '123'},{name: 'b', id: '1234'},{name: 'c', id: '12345'}]var list2 = [{name: 'a', id: '123'}]首先我先使用ES6来处理var arr = [...list1].filter(res=>{return [...list2].every(t=>{return...

在vue-elementui中使用el-table，当type="selection"的时候，分页数据进行不同页跳转选择需要这种功能的时候我们需要在el-table的标签上为每个el-table-column都创建一个id；所以就用到了row-key="id"这个属性；然后我们就需要在el-table-column为type="selection"添加一个属性reserve-selection;当这两个属性同时使用时就能实现我们的需求不能重置我们的选择总结一下：跳转页不重置我们的选择1、

这种情况有知道有两种方式去解决，但是sessionStorage和localStorage的使用不知道为什么没有起作用；sessionStorage和localStorage：我在vue-vant-admin的H5项目中在app.vue中使用了replaceState请大家指教一下为什么没有起作用然后第二种方法可以；我使用了vuex-along的依赖或者使用yarn add vuex-along；就看你有npm还是yarn，两个都行之后你的依赖中就有有vuex-along

在js中0.025*3 = 0.075 但是实际上所以就用一个方法来先乘后除的方法num代表你需要多少的位数e为乘法的值（0.025*3）

在使用async和awaitawait只能放在async函数里 为了使我们的异步代码，更像同步的代码 如果asycn里的代码都是同步的，那么这个函数被调用就会同步执行在使用时可能会出现你需要捕获错误信息等等...

在做项目时我们可能会遇到下载功能以及导出功能：其实这两个功能是一样的只是看客户需求是什么；说一下原生的文件流下载方法我这里的下载方法分两种，一种是带请求头token的一直是不带的其实本质上没有太大的区别：我写了一个公共的方法区分有请求头和无请求头；当然还有预览我一般使用window.open()...

在vue-elementui-admin的后台管理系统中往往就会使用到按钮的权限控制以及角色的权限控制问题，一般情况使用的就是自定义指令v-has的使用，在这个后台管理系统中就有这个自定义指令；不说太多直接上代码的使用方式：如上面的如果v-if和v-hasPermi同时使用时，除非我们页面进行重定向，v-haspermi是不会起到作用的，就是因为这里的v-if把咱们的dom元素给删除了，导致这个v-haspermi找不到这个dom元素了，所以我们把这里的v-if改为v-show就可以使用了.

在项目的过程中会遇到各种各样的弹框形式；这里介绍一个我使用的弹框中的树形选择不说太多直接上代码template模板中的代码el-dialog中包含el-row，通过el-row去布局右边的展示框和删除选中数据通过import引入数据接口当然你写完的组件也可以成为局部组件和全局组件，全局组件需要在main.js中引入，这样不需要再使用import引入去使用，当然局部组件需要通过import去引入使用各个模块的说明data模块mounted模块

在spring boot的前端vue项目中，各个组件间进行的方法通信：this.$root.Bus.$on问题比如我在组件中进行全局化的通知上面的这种情况就会出现后面的覆盖前面的，造成联动的失败，并且如果不进行判断的话就会出现重复调用的情况所以我需要在我的组件方法中添加vue的生命周期beforeDestory，当一个使用完之后，就先清除了，然后再通知下一个...

我这里是依据原生的jq进行操作的；通过鼠标事件进行操作，通过鼠标的onmousemove事件进行拖拽移动定位；通过onmouseup进行管控拖拽结束功能话不多说上代码：首先是html的代码，先是使用咱们的el-popover使用之后咱们通过代码的细化可以看到在el-popover中写了一个它自身的Class：popoverClass，通过这个class咱们可以获取到它的dom节点通过console.log(popover)输出我们可以看到其中的层次结构然后使用debugg

直接开搞上代码说事首先我们要先建三个文件，分别是静态文件html，样式文件css、js文件html文件中首先我是这样布局先说第一个文件的el-tree组件再说另一个el-radio-group和el-checkbox-group接下来说一说css文件接下来使我们的js文件，其中的列表Api是选中后通过id去获取完整的数据接下来data里的初始化数据配置生命周期计算属性computedmethods方法

1、首先先全局进行下载less在idea先查看自己是否已经安装好node检查好之后通过npm安装less npm i -g less安装好less后来到设置中打开后查找file watchers，如果没有查到可以进行以下操作进行查找，查到后进行下载安装然后就能在工具中看到file watchers进去后点击+号进行添加然后做完这些可能你在添加less文件的过程中你会把less文件添加为text文件，她就不识别这个less文件了，在设置中...

通过对el-select的简单封装可以在整个项目中进行使用，既然代码优化了，也让技术人员对代码的操作性提高了不说那么多直接上代码：通过define对vue和element-ui进行引入在html中使用是通过tg-el-select然后传入必要性的属性...

组件简单的封装之后可以进行重复的使用，并且也规定好各种规则，对于代码的优化，页面的一致性有很大的好处不说那么多直接上代码：首先我们需要建三个文件分别是css、js、html，当然如果是纯vue的项目的话就直接vue文件和css文件我这里是通过define、require进行的封装的建好这三个文件后首先可以先写html：接下来就是js：这里面需要注意的就是方法中的handleClick和handleCurrentTableChange通过这两个方法$emit回传

vue中全局引入css在main.js中通过import引入然后就能在代码中使用csscss在局部使用有两种写法第一种写法就是：直接在vue文件中写不过要注意需要在style中添加scoped的属性样式就起作用了还有一种就是直接在外部创建css文件通过import局部导入文件css中使用font-face，使用时，你要先找到自己使用的字体，通过自己转换得到woff和woff2文件推荐自定义字体网址https://fontmeme.com/zit

1.兼容性所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。但我们需要是无论用户用任何一个浏览器来查看网站或者登陆系统时，都应该是统一的界面显示。浏览器的兼容性是一个最基本的问题，所以对解决兼容性的问题提出了答案1.问题：当在a标签中嵌套img标签时，在某些浏览器中img会有蓝色边框；解决方案：给img添加border：0；或者是border：none；2.问题：给上边元素设置了margin-bottom，给下边元素设置了margin-...

一、marquee标签是用来滚动数据的marquee中的属性 1、 onMouseout：用来设置鼠标移动此区域的滚动状态 ；onMouseout="this.start()" 设置鼠标移出该区域时继续滚动； onMouseover="this.stop()"：设置鼠标移入该区域时停止滚动 2、align：此属性不经常使用 用来设置marquee标签中内容的对齐方式，具体可以去w3c中看看 3、behavior：此属性用来设定内容的滚动方式 alte...

vue-devtools是一款对vue进行调试的工具，当然对vue进行调试的时候你要使用vue.js不能使用vue.min.js的包接下来说一下怎么安装这个调试工具安装这个调试工具我这里有两种方法第一种就是通过谷歌的应用商店进行下载扩展程序就行，但是有一个限制就是你的浏览器要支持能够翻墙才行第二种就普遍很多了，没有什么要求，通过在网上查找vue-devtools下载一个，当然网上有很多是错的你下载之后也不能使用，我这里有一个地址可以使用https://chrome.zzzmh.cn/info

js中有许多便利的方法：shift() 方法shift会删除数组的第一个元素，并返回第一个元素的值，这样也会改变数组的长度注：当然有删除第一个的也会有删除最后一个的pop()是删除最后一个并返回它unshift()方法unshift会向数组的开头增加一个或者多的元素，并返回这个重组的数组的长度注：当然有向数组的开头增加元素的也就会有向数组最后增加一个或者多的方法push()方法filter()方法filter用于对数组进行过滤，对数组中符合过滤条件的输出，重新

filter:作用：被用于对数组的过滤后，创建一个新的数组，新的数组是通过过滤后符合要求的数据用法：es6语法例子：es6:find:作用：被用于获取数组过滤中第一个符合测试元素的值用法：es6:例子：es6:filter()和find()两个都是如果测试的值为空，则返回值返回undefined...

vue cli是基于vuejs进行快速开发的完成系统，并用渐进式框架构建用户界面具体可以去官方的文档看看vue的介绍其中需要用到vue、nodejs、npm等等第一步安装nodejsnodejs 是一个开源的和跨平台的 JavaScript 运行时环境nodejs 在浏览器外运行 Google Chrome 的内核。 这使 nodejs表现得非常出色，并且应用程序运行于单个进程中，无需为每个请求创建新的线程。打开命令窗口如果已经安装或者安装完成node可以在命令窗口通过node -v

第一步没有idea的需要下载ideahttps://www.jetbrains.com/zh-cn/idea/download/?utm_expid=.RdPW--XiRkKf4C3iyfxVwg.0&utm_referrer=https%3A%2F%2Fwww.jetbrains.com%2Fzh-cn%2Fidea%2Fpromo%2F%3Futm_source%3Dbaidu%26utm_medium%3Dcpc%26utm_campaign%3Dcn-bai-br-intellij-ex

vue cli是基于vuejs进行快速开发的完成系统，并用渐进式框架构建用户界面具体可以去官方的文档看看vue的介绍其中需要用到vue、nodejs、npm、webpack等等第一步安装nodejsnodejs 是一个开源的和跨平台的 JavaScript 运行时环境nodejs 在浏览器外运行 Google Chrome 的内核。 这使 nodejs表现得非常出色，并且应用程序运行于单个进程中，无需为每个请求创建新的线程。打开命令窗口如果已经安装或者安装完成node可以在命令窗口通

在vue中出现了各种各样的框架，vue-treeselect就是vue的树选择；就是基于vue的多选组件在平常的情况下一般我把vue-treeselect再次封装一遍为自己业务提供便利当然它的功能还是有很多的例如：单选、多选、模糊搜索、清除等等不说废话了直接看代码吧咱们来一个一个说明一下吧首先命名一个树的名字，到时候组件调用的时候好调用也就是name之后是透传的参数和数据配置props组件肯定是子的嘛，props中的东西都是可以从父级里面透传过来的template就是我所需

vue中最显著的特点就是响应式和数据的绑定v-model会进行创建双向绑定进行更新和渲染，但是v-model本质上就是一个语法糖对于双向绑定也就是说是mvvm数据的双向绑定：数据变化更新视图，视图变化更新数据；当然在vue中你需要双向绑定时对数据进行初始化的操作；说一下mvvm也就是model层到view层，view层到model层；数据进行同步变化当然说的详细一点就是说v-model的绑定就是触发事件然后回填就是通过$emit去进行回调当然绑定的时候也会出现一点小问题；当出

计算属性：模块中的表达式存在过多的逻辑会导致代码臃肿并且过重造成难以维护在计算属性中可以进行复杂的逻辑，可以进行运算、函数调用等，然后返回自己所想要的结果在计算属性中计算属性可以进行相互的依赖并且可以依赖不同的vue实例，其中的实例只要一项数据进行变化，计算属性就会进行重新的执行，视图也会就行更新在计算属性中有两个方法，一个getter,一个setter，一般会直接使用getter，对于setter而言很少在业务逻辑中使用到函数定义和计算属性不同的是计算属性是基于它们的依赖进行缓存的。计

产生这个问题的主要原因是市面上的浏览器的种类很多，但由于不同的浏览器的内核不一致，从而导致各个浏览器对网页的解析就产生了差异。       解决浏览器兼容性问题，还是从三个方面入手：html部分、css部分、js部分。       1、html部分       a、最突出也是最容易想到的就是高版本的浏览器用了低版本的浏览器无法识别的元素，从而导致不能解析。这点主要体现在ht