- 博客(26)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 按下鼠标中键跳转新的页面
当我们用鼠标中键点击一个带href属性的a标签时，我们会发现它会跳转到新的页面。此时即使添加preventDefault属性也没有用。因为对于a标签，当用中键点击时，会默认从新窗口打开链接要想阻止这一行为，我们可以将a标签转换为其他标签如span，再给span添加click属性。比如，当我们使用vue的router-link标签创建路由标签时，默认创建的是a标签<router-link :to="{ path: tag.path, query: tag.query, fullPath: tag.
2020-12-09 21:42:46
1551
原创 vue中的this.$el
Vue 实例使用的根 DOM 元素比如我动态生成router-link<router-link :to="{ path: tag.path }"v-for='tag in visitedTags':key='tag.path'@click.prevent.native="openMenu(tag,$event)">{{tag.title}}</router-link>openMenu (tag, e) { console.log(this.$el)}控制台输出
2020-12-08 22:09:44
4447
原创 遍历数组for in 和for of
我们在遍历数组和对象的时候常常用到for in如下所示在这里插入代码片此外如果我们要对数组值进行判断，可以用for oflet arr = [{ a: 1 }, { b: 2 }]for (var item of arr) { console.log(item)}输出结果为
2020-12-07 15:28:50
543
原创 element组件中el-tree树形控件的使用
我们在用element进行项目开发的时候，有时会要用到el-tree树形控件（比如我们对权限进行分配的时候），下面介绍关于el-tree常用的属性和方法基础的树形控件结构<el-tree :data="rightList" :props='treeProps' show-checkboxnode-key='id' default-expand-all :default-checked-keys='defkeys' ref='treeRef'></el-tree>其中dat
2020-12-02 23:51:12
4263
原创 浏览器的cookie，session和token介绍
随着响应式web应用的兴起，我们在浏览网站是常常需要进行登录，验证用户信息。但是http请求是无状态的，为了实现用户验证，我们需要将http请求中添加请求信息，实现用户登录。常用的方法有cookie，session，以及token技术cookie和sessioncookie是由服务器产生的，存放在浏览器的用于实现用户身份验证的文件。session是用户访问服务器时，服务器生成的用于辨别用户的文件。当我们通过...
2020-11-27 16:55:46
1361
原创 vue自定义指令vue.directive的使用
在我们进行vue开发的时候，vue本身提供的指令有时并不能满足我们的需求，我们需要用到自定义指令，而vue也很好的为我们提供了自定义指令的方法。vue.directive比如我们自定义一个focus指令Vue.directive('focus', { inserted: function (el) { el.focus() }})当然，我们也可以注册局部指令directives: { focus: { // 指令的定义 inserted: function (
2020-11-25 19:48:32
238
原创 vue中指令的参数和修饰符
我们在进行vue开发的时候，常常用到vue指令，为了更好理解vue指令，我们先了解vue的指令的语法结构vue指令指令 (Directives) 是带有 v- 前缀的特殊 attribute（属性）指令的参数一些指令能够接收一个“参数”，在指令名称之后以冒号表示，如<a v-bind:href="url">...</a>指令的参数为href，参数值为urlvue指令的动态参数除了直接使用参数外，我们还可以将参数用方括号括起来，形成动态参数<a v-bind:
2020-11-25 19:38:08
675
原创 vue实现路由权限控制
我们后管理项目中经常需要对路由权限进行判定，不同的身份可以访问不同的路由。实现的大体思路很简单，将路由分为基本路由和用户路由，基本路由所有用户均可访问，用户路由是当前用户能够访问的独有的路由。我们可以通过router中的addRoutes方法，动态向router中添加路由。为了解具体实现方法，我们先从实现用户登录功能开始用户登录实现其实实现用户登录方法很简单，首先，当我们第一次访问服务器时，获取服务器返回值的token信息，将其储存在本地cookie或者sessionStorage中，当我们再次向
2020-11-24 18:04:03
3734
原创 vue组件transition实现组件页面过渡效果
我们运用vue中的内置组件transition能够实现页面过渡效果，使页面更加美观。<transition name='fade' mode='out-in'> <!-- 组件数据缓存效果 --> <keep-alive :include='cacheViews'> <router-view :key='key'></router-view> </keep-alive></transition>关于tran
2020-11-22 16:51:27
1462
原创 路由文件中有斜杠/goods和无斜杠goods的区别
我们在编写路由文件router.js的过程中，难免需要进行路由嵌套。像这样{ path: '/goods', component: Layout, redirect: 'noredirect', meta: { title: '商品管理', icon: 'chart' }, children: [ { path: 'list', component: () => import('@/v
2020-11-22 15:38:50
580
原创 vue中文本框自动获取焦点
在vue中要使文本框自动获取焦点可用如下代码实现this.$nextTick(_ => { this.$refs.newKeywordInput.$refs.input.focus()})其中this.$nextTick是页面重新渲染完成之后才会执行的回调函数。javascript执行机制可以查看参考这篇文章js执行机制...
2020-11-20 00:54:32
1517
转载 blob:http地址原理及生成方法
blob 其实是 h5 表征的 Blob 对象数据，具体请看文档。我们可以使用 Blob 对象隐藏真实的资源路径，在一定程度上可以起到数据的加密性，更多的是为了干扰爬虫。比如日常使用的一些音频，视频，图片，我们都可以使用其 Blob 二进制数据流来表征数据，而非使用 uri，就像经常用到的 image src 的 dataUrl。要使用 blob 来表征数据资源，需做到以下两点：1、服务端返回的为资源的二进制数据2、前端接收到二进制数据后，使用 URL.createObjectURL(blobDat
2020-11-19 15:50:43
6162
原创 element-ui中el-upload图片上传组件
在项目开发中经常需要用到图片上传，element-ui方便的为我们提供了图片上传组件el-upload。el-upload官方文档如下面代码所示<el-upload:action="uploadUrl":on-preview="handlePreview":on-remove="handleRemove"list-type="picture"class="avatar-uploader":headers='headerObj':on-success='handleSuccess'&
2020-11-19 14:17:45
2887
原创 vue组件添加事件的时候需要加上native
我们在给vue组件添加事件的时候，有时需要添加native。当我们想在vue根组件监听原生事件的时候，我们可以使用v-on的修饰符native比如，我们给router-link标签添加cilck事件，如果不加native，事件是不会发生的，因为默认是进行路由跳转，而native就能够给组件绑定原生对象。<el-input v-model='listquery.name' placeholder='请输入商品名称' style='width: 150px' clearable class='fil
2020-11-18 10:59:01
1043
原创 export2excel.js实现将页面表格导出到excel中
最近遇到需要将页面中的table数据导出的情况，发现export2excel能够实现合格功能，因此分析了其中代码，加深自己的理解。下面是我分析之后完成的代码，添加了一些注释方便大家理解。/* eslink-disable */// 需要引用xlsx和file-saveas两个依赖import XLSX from 'xlsx'import { saveAs } from 'file-saver'// 将数据导出为excel// var table = document.querySelector
2020-11-18 01:37:51
1933
2
转载 element-ui中样式无法直接修改
转载自vue-loader官方文档我们在开发过程中常常需要修改element-ui中的样式。有时候我们发现在style中添加了scoped，则样式无法修改，去掉scoped后样式能够正常生效。为了了解其中的原因，我们需要先了解scoped这个属性的作用。一：scoped的作用和原理scoped的作用：当 style标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不需要任何 polyfill。它通过使用 PostC
2020-11-16 00:29:49
460
原创 element组件中loading的使用
我们在利用vue做项目的时候常常需要加载数据，如果从后台加载的数据较多，加载时间比较长的话，添加一个加载页面常常使得我们的项目更加美观。el-element组件库很方便的为我们提供了页面加载的组件。比如我们加载表单中的数据时， 给其添加v-loading属性<el-table:data="goodsList"style="width: 100%" stripe border highlight-current-row v-loading='loading' element-loading-t
2020-11-15 17:20:48
10529
原创 vue中的插槽slot用法（个人总结）
在我们使用vue组件的时候，通常需要向组件传递内容，向这样<alert-box> 这是一个插槽</alert-box>这时候我们就需要用到slot元素。插槽基本使用父组件向子组件传递内容<div id="app"> <alert-box>有bug发生</alert-box> <alert-box>有一个警告</alert-box> <alert-box></alert
2020-11-15 01:26:42
774
原创 el-element布局控件layout中的el-row和el-col
在使用element组件中，layout布局控件能够很好的帮我们对页面进行布局。其中最常用到的就是栅格基础布局。如下所示<el-row :gutter='40'> <el-col :xs="12" :sm="12" :lg="6">第一个</el-col></el-row>对于el-row，其常用属性和方法下表参数说明可选值gutter栅格间距type布局模式，可选flexgutter栅格间距对
2020-11-13 12:00:06
4663
原创 el-element中导航菜单的使用el-menu
在进行vue开发的时候，我们不可避免会使用到导航菜单，element方便的为我们提供了导航菜单组件，我们可以轻松创建自己的导航菜单。不过el-menu属性和方法复杂多样，在此只列举常用的属性和方法，更多的使用说明可以参考官方手册element官方使用说明<el-aside :width="iscollapse ? '64px' : '200px'"> <div class="toggle-button" @click='toggleCollapse'>|||</div&
2020-11-13 00:52:41
7905
原创 require.context()的用法
在做vue项目的时候，常常需要导入大量的模块，此时一个一个用import导入就不适，require.context()会遍历文件夹中的文件，将对应的文件进行导入。require.context()接收三个参数。require.context(directory, useSubdirectories, regExp)directory: {String} 为读取文件的路径useSubdirectories： {Boolean} 为是否读取子文件的内容，true表示读取子文件中的文件regExp：匹配
2020-11-12 15:46:40
1825
原创 运用钩子函数或者插件解决vuex刷新页面数据丢失问题
在使用vuex过程中，我们刷新页面时，vue生命周期重新运行，store中的数据会重新加载，导致页面数据丢失的问题。 这在我们开发过程中是不希望看到的，要解决这个问题，主要的思路就是当我们刷新页面之前，先将数据暂存到sessionStorage中，我们刷新页面加载数据时，从sessionStorage中获取数据，这样就不会造成数据丢失，大致有两种方法。第一，通过生命周期钩子函数，在app.vue中添加如下代码<template> <div id="app"> &.
2020-11-10 14:10:56
464
原创 解构赋值
可以从数组中获取值let ary=[1,2,3];let [a,b,c]=ary;console.log(a);//输出1console.log(b);//输出2console.log(c);//输出3解构不成功的话返回undefinedlet ary=[1,2,3];let [a,b,c，d，e]=ary;console.log(a);//输出1console.log(b);//输出2console.log(c);//输出3console.log(d);//输出undefined
2020-09-06 16:14:19
61
原创 var 和let const 区别
varletconst函数级作用域块级作用域块级作用域变量提升无变量提升无变量提升值可修改值可修改值不可修改let arr = []; for (let i = 0; i < 2; i++) { arr[i] = function () { console.log(i); } } arr[0]();//输出为0 arr[1]();//输出为1for循环时每次都会生成一个块级作用域，使用let，则每个块级作...
2020-09-06 14:50:32
135
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人