qq_21013249的博客

原创 vue面试题

1.Vue的最大的优势是什么？简化：Vue的最大的优势有以下几点;组件化开发，双向数据绑定，基于虚拟DOM，单页面应用，轻量级，生态丰富2. Vue和jQuery两者之间的区别是什么jQuery： 曾经是前端最流行的js库。Vue： 是一个轻量级框架，是一个精简的MVVM。从技术角度讲。Vue.js专注于MVVM模型的ViewModel层，它通过双向数据绑定把view和Model层连接起来，通过对数据的操作完成对页面视图的渲染。二者的区别是：一、Vue 和 jQuery 对比 j..

原创 vue面试题

1.Vue的最大的优势是什么？简化：Vue的最大的优势有以下几点;组件化开发，双向数据绑定，基于虚拟DOM，单页面应用，轻量级，生态丰富2. Vue和jQuery两者之间的区别是什么jQuery： 曾经是前端最流行的js库。Vue： 是一个轻量级框架，是一个精简的MVVM。从技术角度讲。Vue.js专注于MVVM模型的ViewModel层，它通过双向数据绑定把view和Model层连接起来，通过对数据的操作完成对页面视图的渲染。二者的区别是：一、Vue 和 jQuery 对比 j..

原创 Vue 如何去除 url中的# ?

在使用vue进行开发的时候我们会发现地址栏上的ip后面会跟着一个#号，如果想去掉这个井号，我们可以在路由上加上 mode: 'history', 即可去掉.

原创 query 和 params 之间的区别是什么？

Query是一个查询参数类.params修饰符主要解决形式参数是一个数组.1.query要用path来引入，params要用name来引入2.接收参数时，分别是this.和route.params.name3.query更加类似于ajax中get传参，而params类似与post，前者在浏览器的地址栏中显示，params不显示4.params传值一刷新就没了，query传值刷新还存在。...

原创 45.怎么定义 Vue- Router 的动态路由? 怎么获取传过来的动态?

比如写用户的信息页面时，页面的结构都一样，只是用户的名称不一样，这个时候就可以使用动态路由.动态路径参数，使用 “冒号” 开头，一个路径参数，使用冒号标记，当匹配到一个路由时，参数会被设置到 this.$router.params 中,并且可以在每个组件中使用2. 现在我们知道了可以通过动态路由传参，在路由中设置了，多段路径参数后，对应的值分别都会设置到 $router.query 和 $router.params 中...

原创 mvvm 和 mvc 区别是什么？哪些场景适合?

MVC 和 MVVM 其实区别并不大。都是一种设计思想,MVVM 主要解决了 MVC 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。 区别：Vue 数据驱动，通过数据来显示视图层而不是节点操作。 场景：数据操作比较多的场景，需要大量操作 DOM 元素时，采用 MVVM 的开发方式，会更加便捷....

原创 Vue 和 jQuery 两者之间的区别是什么？

vue：前端js库,jquery：轻量级的js库区别:vue选取DOM对象，对其进行赋值、取值、事件绑定等操作，jquery侧重样式操作，动画效果等，则会更加高效率的完成业务

原创 Vue 的最大的优势是什么?

Vue最大优势我感觉就是“组件化‘和”数据驱动“？组件化就是可以将页面和页面中可复用的元素都看做成组件，然后页面是由这些组件”拼接“起来的组件树。 数据驱动就是让我们只关注数据层，只要数据变化，页面(即视图层)会自动更新，至于如何操作dom，完全交由Vue去完成，咱们只关注数据，数据变了，页面自动同步变化了....

原创 vue后台管理系统权限分配的解决方案-RBAC模型

前言在后台,人力资源管理系统中,我们经常会遇到分配权限的技术,关于怎么分配权限就是一个难点,在这里,RBAC模型可以很好的解决这个问题RBAC是什么?RBAC模型概述RBAC模型（Role-Based Access Control：基于角色的访问控制）模型是20世纪90年代研究出来的一种新模型，但其实在20世纪70年代的多用户计算时期，这种思想就已经被提出来，直到20世纪90年代中后期，RBAC才在研究团体中得到一些重视，并先后提出了许多类型的RBAC模型。其中以美国George Mason

原创 vue项目中,如何实现excel的导入导出excel导入功能-组件封装

目标从vue-element-admin中提供的excel导入功能迁移到当前的项目中思路安装包 拷贝组件安装必要的插件这个插件叫做xlsxnpm install xlsx -S复制代码引入UploadExcel组件并注册为全局将vue-element-admin提供的组件复制到我们自己的项目 **src/components/UploadExcel**下 在index.js将它注册成全局组件import PageTools from './PageTools'im

原创 数组转树之递归法

<script> /** * 把平铺的数组结构转成树形结构 */ const arr = [ { id: "01", name: "张大大", pid: "", job: "项目经理" }, { id: "02", name: "小亮", pid: "01", job: "产品leader" }, { id: "03", name: "小美", pid: "01", job: "UIleader" }, { id: "04", name: "老马...

原创 创建分页组件需要的按钮数组(功能代码)

功能分析分页组件按钮,使当前所在的页数处在按钮中间btnCount:最多能看到几个按钮 total:总条数 size:每页几条 page:当前第几页 function fn(total, size, page, btnCount = 5) { const arr = [] // 01.判断页码数 const Allpage = Math.ceil(total / size) // // 01-1 如果传入的页码值大于总页

原创 Vue.use()

一.作用它是Vue提供一个静态方法，用来向Vue注册插件(增强vue的功能)。二.说明Vue.use 可以接收一个对象，Vue.use(obj)对象obj中需要提供一个 install 函数在 Vue.use(obj) 时，会自动调用该 install 函数，并传入 Vue构造器三.示例:1.局部祖册组件2.全局祖册组件3.通过Vue.use()来注册在其他页面中，均可以直接使用page-tools(上诉就是全局注册的完整写法)小结:Vue.u...

转载 trycatch 不能捕获运行时异常_面试官：用一句话描述 JS 异常是否能被 try catch 捕获到 ?...

关于trycatch的运行机制当程序运行到try catch里面时，如果未报错，则忽略catch中的代码，若报错，则不执行try报错内容后面的代码，转而执行catch中的代码。什么时候try catch 才能捕获到异常？能捕捉到的异常必须是线程执行已经进入 try catch 但 try catch 未执行完的时候抛出来的1，当语法错误时，不能捕获因为语法错误是在语法检查阶段就报错了，线程执行尚未进入 try catch 代码块，自然就无法捕获到异常。 例如：try{ a.

原创 解决element-ui使用 table+ 分页插件索引只在当前页面排序的问题

前言这篇文章主要向大家介绍解决element-ui中的分页插件索引只在当前页面排序的问题。,主要内容包括基础应用、实用技巧、原理机制等方面，希望对大家有所帮助。如果你遇到的问题是这样：点击下一页排序还是从1开始，看到这里，那么恭喜你，我刚解决这个问题1.解决方案如下代码：<el-table :data="roles"> <el-table-column label="序号" width="120" type="index" :index="indexC.

原创 vue中的侦听器watch

一.为什么要用侦听器:虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。二.侦听简单类型:当我在输入框中按顺序输入12345时通过侦听器侦听后打印出来的数据如下图:代码如下:三.深度监听第一个输入框默认值是小苍,当我分别在两个框中都输入1时效果如下:代码如下:deep把d...

原创 数组转化成树(非递归)

// [// { 'id': '3129', 'pid': '', 'name': '总裁办' },// { 'id': '312a', 'pid': '', 'name': '行政部' },// { 'id': '312b', 'pid': '', 'name': '人事部' },// { 'id': '312c', 'pid': '', 'name': '财务部' },// { 'id': '312d', 'pid': '312c', 'na...

原创 .sync和v-model的区别

两者共同点v-model的本质<!--v-model写法--><my-component type="text" v-model="value"><!--展开语法糖后的写法--><my-component type="text" :value="value" @input="value = $event.target.value"><!--默认针对原生组件input事件，但是如果子组件定义了针对事件model: {

原创 Vue中的.native修饰符

.native 是什么？.native - 监听组件根元素的原生事件。主要是给自定义的组件添加原生事件。比方说:你想在某个组件的根元素上绑定事件，直接使用 @click=''function' 是不生效的，我们可以添加.native修饰符 @click.native=''function''...

原创 Vue中$router和$route的区别

1.$router对象$router是VueRouter的一个对象，通过Vue.use(VueRouter)和Vu构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由，包含了许多关键的对象和属性。以history对象来举例：$router.push({path:'home'})，本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录$router.replace({path:'home'})，//替换路..

原创 Vue中.sync和v-model的区别

.sync和v-model的区别v-model <!--父组件--> <template> <!--v-model 是语法糖--> <Child v-model="model"></Child> <!--相当于下面的代码--> <!--v-model的默认行为是input,默认prop是value--> <Child

原创 理解svg-icon的工作原理

目标理解svg-icon组件的工作原理； 如何把它用到新项目中？要点svg-icon是一个全局组件，在src/icons/index.js中定义并注册成立全局组件。在main.js中引入了它额外需要[email protected]的配合，及对应的vue.config.js中的配置。它的使用格式<svg-icon icon-class="文件名"/> 。这里的文件名就是在src/icons/svg下的文件名如何在新项目使用svg-icon组件 步骤1.安装依赖npm

原创 数组的常用方法(1)

1. push() 方法定义: push() 方法,向数组末尾添加新元素, 并返回新长度, 会改变原数组的长度。实例:let arr = [1,2,3,4,5]console.log(arr.push(8)) // 6console.log(arr) // [1,2,3,4,5,8]2. pop() 方法定义: pop() 方法,移除数组的最后一个元素，并返回该元素,会改变原数组的长度。实例:let arr = [1,2,3,4,5]console.log(arr.pop(..

原创 路由守卫的小用处

话不多说,直接上图分析:一.导入所需的功能模块:第一二行分别导入路由模块和vuex模块,第三四行导入的模块是一个有进度条效果的小组件,具体使用可以去搜索NProgress,二.白名单第六行何为白名单?就是简单理解就是跟黑名单反义词,黑名单里面的内容时不允许被打扰和访问了的,白名单就是相反可以访问和被打扰的三.全局前置守卫第八到三十行都是路由守卫的部分,它有三个值分别是from(从哪来),to(到哪去),next(接下来想干嘛).注意:next:它是一个函数 ...

原创 首次加载依赖组件

原创 Vue 前端路由工作原理

一.前端路由介绍: 路由就是指随着浏览器地址栏的变化，展示给用户的页面也不相同。 传统的网页根据用户访问的不同的地址，浏览器从服务器获取对应页面的内容展示给用户。这样造成服务器压力比较大，而且用户访问速度也比较慢。在这种场景下，出现了SPA(单页面架构)。 SPA(单页面架构),指的是应用一个主页面,通过动态替换DOM内容并同步修改url地址来模拟多页面应用的效果.切换页面的功能由前端脚本来完成,而不是后端渲染完毕后前端只负责显示.二....

原创 购物车结算案例

一.界面样式以及案例需求如下:二.源码:三.实现思路:主要运用到 v-model 数据视图双向绑定和 computed 计算属性两个技术点,1.定义数据手机价格(mobilePrice)和手机数量(mobileNumber)以及电脑价格(computerPrice)和电脑数量(computerNumber)和运费(sendPrice).这些数据都运用 v-model 进行数据绑定2.定义计算属性手机价格小计(mobileCount),电脑价格小计(computerCo...

原创 购物车渲染案例

一.案例需求:1.书籍有选中与取消选中的功能,然后每本书籍右上角都有删除按钮,点击就会将书籍删除,效果如下图所示:二. 源码:1.html部分2.js部分:3.css部分:三.技术讲解:1.主利用 vue 框架和 element 组件库完成页面布局,然后主要利用css的 hover 属性和transform动画属性完成书籍和右上角删除按钮的选择与否效果,2.运用axios请求数据,3.运用splice方法操作数组完成删除效果4.运用calssN...

原创 Vue 前端路由工作原理

一.前端路由介绍: 路由就是指随着浏览器地址栏的变化，展示给用户的页面也不相同。 传统的网页根据用户访问的不同的地址，浏览器从服务器获取对应页面的内容展示给用户。这样造成服务器压力比较大，而且用户访问速度也比较慢。在这种场景下，出现了SPA(单页面架构)。 SPA(单页面架构),指的是应用一个主页面,通过动态替换DOM内容并同步修改url地址来模拟多页面应用的效果.切换页面的功能由前端脚本来完成,而不是后端渲染完毕后前端只负责显示.二....

原创 对象与数组的互相转换

一.数组转对象:二.对象转数组:

原创 数组转化成树

后端接口返回的数据一般是平铺的数组结构，而不会是树形结构，例如下面的平铺数组结构：data =[ {id:"01", name: "张大大", pid:"", job: "项目经理"}, {id:"02", name: "小亮", pid:"01", job: "产品leader"}, {id:"03", name: "小美", pid:"01", job: "UIleader"}, {id:"04", name: "老马", pid:"01", job: "技术leader"},...

原创 总结15个数组相关的API

1.find:在数组内部, 找到第一个符合条件的数组成员,找到就返回,找不到就返回null2.map: 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果,它不改变原来的数组，并返回一个新数组3.join:将数组转换为字符串,在不改变原数的情况下返回一个新的字符串.4.reverse: 将数组中的元素颠倒顺序,会改变原来的数组5.concat:用于连接两个或多个数组,不改变原来的数组，返回一个新的数组6.splice :从数组中添加/删除项目，然后返回被删除或是添加的项目.

原创 总结十个常用vscode的快捷键

tab 退格键crlt+s 保存crlt+p 转到Ctrl + F 查找 FindCtrl+Home 转到文件开头Ctrl+End 转到文件末尾ctrl+` 切换终端Ctrl+/ 切换行注释ctrl+shift+p 显示所有命令shift +tab 前进键

原创 Vuex知识点汇总

如何使用全局state 直接使用： this.$store.state.xxx; map辅助函数： computed: { ...mapState(['xxx']), ...mapState({'新名字': 'xxx'})} 如何使用modules中的state 直接使用： this.$store.state.模块名.xxx; map辅助函数： computed: { ...mapState('模块名', ['xxx']), ...m...