紫~阳-CSDN博客

原创微信小程序超出文本显示省略号

在做微信小程序的时候，遇到文本超出情况，我们通常希望把超出文本显示为省略号。单行文本有时候我们可以依靠截取字符串的长度显示，但是在不同情况下所要截取长度不同，而且有时候可能会遇到中英文连接在一起，这个时候依靠截取字符串的字数更是会造成不好的体验。-单行文本超出：(建议设置一个宽度，默认为100%).team-content {width: 500rpx;display:-webkit-box;-webkit-line-clamp:1;overflow:hidden;text-overflow

2021-12-08 19:59:34 3109 1

原创 vue中key的作用

文章目录一、key的作用二、原因分析1.vue是通过虚拟dom来表示描述真实dom的，在去更新视图之前，要对前后两个虚拟dom树进行分析，以得出它们的区别。如果不设置key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。看官网 https://cn.vuejs.org/v2/api/#key2.推荐设置key总结一、key的作用在数据变化前后，vue会得到两个虚拟do

2021-09-22 21:03:05 325 2

原创 vue面试准备笔记

核心原理MVVMmodel view viewmodel model模型，指后端传过来的数据 view视图，指看到的页面 view model视图模型，这个模式是连接桥梁将后端的数据转换为可见的页面，实现方式：数据绑定将看到的页面转换成后端数据，实现方式：DOM事件监听两个方向都实现，是双向绑定双向绑定原理：通过object.defineProperty来劫持各个属性的setter，getter，才数据发布消息给订阅者，触发相应的监听回调生命周期..

2021-09-19 21:20:31 243 3

原创 HTML/CSS面试准备笔记

实现垂直/水平方向居中利用定位position:absolutetop:50%left:50%margin-top:-(自身的高度一半)margin-left:-(自身的宽度一半)利用margin:auto利用display:table-cell利用display:flex;设置垂直水平剧中//父盒子设置display:flex;justify-content:centeralign-items:center垂直居中img{ ..

2021-09-19 21:19:08 127 3

原创 es6面试准备笔记

箭头函数箭头函数，this指向的不是window，是父级（可改变）不能使用arguments对象在vue3中setUp不能使用this不能用作构造函数，不能使用new命令，否则报错不能使用yield命令，因此箭头函数不能用作Generator函数解构赋值数组的解构赋值[a,b,c] = [1,2,3]console.log(a,b,c)[b,a,c] = [1,2,3]console.log(a,b,c)// 123// 213扩展运算符+解构赋值..

2021-09-19 21:17:49 237 3

原创 axios面试准备笔记

axios常见的响应状态码200 OK 请求成功。一般用于 GET 与 POST 请求201 Created 已创建。成功请求并创建了新的资源401 Unauthorized 未授权/请求要求用户的身份认证404 Not Found 服务器无法根据客户端的请求找到资源500 Internal Server Error 服务器内部错误，无法完成请求核心实现原理封装Ajax,实现Axios进行回调var Axios = { get: function(url)

2021-09-19 21:16:18 106 2

原创 vue启动遇到问题：Can‘t import the named export ‘watchWithFilter‘ from non EcmaScript module

在vue.config.js文件中添加以下代码configureWebpack: { module: { rules: [{ test: /\.mjs$/, include: /node_modules/, type: 'javascript/auto' }] } }如图所示

2021-09-15 15:54:17 1935 3

原创 Vuex核心的属性

- state定义需要管理的数组和对象、字符串- getter接收state作为第一个参数，而且getter的返回值会根据依赖缓存起来，只有getter的依赖值会发生改变的时候才会被重新计算- mutation更改store中的state状态唯一方法就是提交mutation，当需要改变state的值就要在回调函数中改变，而执行这个回调函数，就需要执行一个相应的调用方法store.commit必须同步执行- action可以提交mutation，在action中执行store.o

2021-09-14 21:15:15 80 2

原创 webpack:打包构建的流程

- 初始化参数配置文件和Shell语句中读取与合并参数- 开始编译根据参数初始化Compiler对象，加载配置插件，执行对象的run方法开始执行编译- 确定入口根据配置中的entry找出所有的入口文件- 编译模块调用所有配置的Loader对模块进行编译，再找到该模块的依赖的模块，在递归本步骤直到所有入口依赖的文件都本步骤处理- 完成模块编译得到每个模块被翻译后的最终内容以及它们之间的依赖关系- 输出资源- 输出完成...

2021-09-14 21:11:13 126

原创根据需求搜索并显示数据

组件样式代码：  <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> <el-tab-pane label="全部"></el-tab-pane> <el-tab-pane label="待审核" name="a0"></el-tab-pane>

2021-09-05 11:38:23 152

原创点击上下架

当碰到作品或者商品上下架并且禁用一些按钮时首先按后端获取的数值修改文字效果{{scope.row.publishState === 0 ? '下架' : '上架'}}当上架之后禁用某个功能添加一下功能//scope.row.publishState是后端获取的数据:disabled="scope.row.publishState === 1 ? false : true"需求：效果：代码： // 点击下架 soldout (row) { this.okgroun

2021-09-05 11:27:34 205

原创按需求输入审核

当后台想要获取用户输入的数值时代码如下 auditOpinion: { id: '', chkState: null, chkRemarks: '' }, // 点击审核 auditmethod (row) { this.dialogVisible = true this.auditOpinion.id = row.id }, // 点击确定审核通过 async aud

2021-09-05 11:08:53 94

原创打包优化：去掉console.log

在vue.config.js中，配置：chainWebpack(config) { config.optimization.minimizer('terser').tap((args) => { args[0].terserOptions.compress.drop_console = true return args })}

2021-09-01 15:14:57 115 1

原创 element的calendar日历组件的使用

首先我们可以在组件内使用或者创建一个组件因为这个组件可能功能复杂，所以这次我们重新创建一个组件名叫MyCalender.vue<template> <el-calendar v-model="curDate" /></template><script>export default { data() { return { curDate: new Date() } }}</script>

2021-08-31 15:30:30 845 2

原创 RBAC权限：按钮级控制

目的当员工A和员工B都可以访问同一个页面，但是同一个按钮，员工A可以按，员工B就不可以按。方法：自定义指令一、在main.js中,定义全局指令// 注册一个全局自定义指令 `v-allow`Vue.directive('allow', { inserted: function(el, binding) { // 从vuex中取出points, const points = store.state.user.userInfo.roles.points // 如果point

2021-08-30 22:33:37 390

原创路由重复：Duplicate named routes definition: { name: “settings“, path: “/settings/“ }

遇见的问题解决方法代码：// 重置路由export function resetRouter() { const newRouter = createRouter() router.matcher = newRouter.matcher // 重新设置路由的可匹配路径}然后我们调用这个方法import { resetRouter } from '@/router'// 退出的action操作logout(context) { // 3. 重置路由 resetRouter

2021-08-30 22:16:47 805 1

原创 RBAC权限：动态菜单

一、RBAC是什么?RBAC（Role-Based Access Control，基于角色的访问控制），就是用户通过角色与权限进行关联。简单地说，一个用户拥有若干角色，每一个角色拥有若干权限。这样，就构造成“用户-角色-权限”的授权模型。在这种模型中，用户与角色之间，角色与权限之间，一般者是多对多的关系。二、addRoutesvue-router对象中的addRoutes用户能访问到的页面（路由配置）必须是动态的，所以要先掌握一个可以动态添加路由地址的API代码在路由中先删除动态路由部分co

2021-08-30 21:50:26 577

原创 git本地版本回退

git log：该命令显示从最近到最远的提交日志。git log - -pretty=oneline：将只会显示提交的commit id号和对应的注释。(这里是两个-，Markdown显示两个-为一个-)利用git reset --hard id：根据 id 回退到指定的版本；我们已经根据 git log 或者git log - -pretty=oneline命令看到了所有的提交的信息，这个时候突然又发现不需要回退了，刚才那些消失的代码又要重新找回来了利用git reflog命令查找到你

2021-08-28 21:22:58 1148 2

转载 VUE生命周期

vue是每一个前端开发人员都绕不过的一个技术，在国内的市场占有量也是非常的大，我们大部分人用着vue, 却不知道他内部其实经历了一些什么。每个生命周期又是什么时候开始执行的。我们今天来详细的看一看首先，生命周期是个啥？借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些啥，我们今天来了解一下。语述了解之前，我们先贴上一.

2021-08-28 15:04:21 131 1

原创 cos组件上传

on-success:上传成功之后的回调before-upload：上传之前的检查：on-success=“handleAvatarSuccess”

2021-08-26 20:57:57 139 2

原创 vue组件之间传值

一、父传子父组件导入组件使用组件并设置变量给变量赋值子组件利用props接受然后使用数值二、子传父子组件利用$emit传值父组件二、ref方法比如清空验证结果

2021-08-25 21:27:50 121 5

原创如何在页面excel导入功能

一、excel导入功能-组件封装从vue-element-admin中提供的excel导入功能迁移到当前的项目中内容：安装包：npm install xlsx拷贝组件：将vue-element-admin提供的组件复制到我们自己的项目将它注册成全局组件import PageTools from './PageTools'import UploadExcel from './UploadExcel'export default { // 插件的初始化, 插件给你提供的全局的功能,

2021-08-25 16:24:30 361 5

原创列表转化成树形数据

// 把平铺的数组结构转成treeexport function tranListToTreeData(arr) { const newArr = [] const map = {} arr.forEach(item => { item.children = [] const key = item.id map[key] = item }) arr.forEach(item => { const parent = map[item.pid]

2021-08-25 15:52:37 193 3

原创 vue使用element中弹层close事件重置表单

在关闭弹层时，showDialog的值会变成false，它会触发弹层（el-dialog组件）的close事件所以我们添加对监听即可。<el-dialog :visible.sync="showDialog" title="弹层标题" @close="hClose"//close监听>然后在方法中清空表单比如： hClose() { this.formData = { type: '', pid: '', name

2021-08-25 15:44:49 818 3

转载 2021年前端 VUE 面试题

文章目录1、vue的生命周期2、Vue2.x 双向绑定原理3、Vue3.x 响应式原理4、v-for 为什么要加上 key5、Vdom的理解6、vuex 的结构，以及 actiion 和 mutation 的区别7、axios 的原理以及优点，如何终止 axios 请求8、vue 的缺点9、vue 和 react 区别10、computed 和 watch 区别，以及 computed 如何实现缓存和更新的11、hash 和 history 区别，分别是怎么实现的12、nextTick 作用和实现13.

2021-08-22 20:54:08 299 4

原创插槽：具名插槽和作用域插槽

文章目录一、插槽1.什么是插槽2.插槽的基础用法二、具名插槽1.基础用法2.给插槽提供内容三、作用域插槽1.基础用法一、插槽1.什么是插槽插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。2.插槽的基础用法在封装组件时，可以通过元素定义插槽，从而为用户预留内容占位符。示例代码如下：<template><p>这是MyCom1的p</p> <!-- 通过slot标签为用户内容

2021-08-19 19:36:40 1968 3

原创 Element的Table表格，序号的排列顺序

当我们用type="index"设置完序号之后第一页第二页每页的序号都是从一开始，想要每页都依次排序需要用到计算属性需要用的index属性 <el-table-column :index="handleIndex" label="序号" width="120" type="index" />然后计算每页页数乘以每页的个数减一，再加一 computed: { // 累加计算序号 handleIndex() { return this.pagePara

2021-08-16 20:10:08 1116 3

原创 mongodb连接本地mongo数据库失败:connect ECONNREFUSED 127.0.0.1:27017

在启动mongodb时遇到链接失败的问题实际上是数据库没有连接解决方法：用管理员启动powershell 然后输入 net start mongodb之后再连接启动服务器就可以了

2021-08-14 14:24:12 6511 8

原创数组和对象的解构赋值

一、数组传值let arr = ['张飞', '关羽', '赵云', '典韦', '张辽', '貂蝉']; // 数据解构赋值 let [a, b, c, d, e, f] = ['张飞', '关羽', '赵云', '典韦', '张辽', '貂蝉']; //a - 张飞 //b - 关羽 //... console.log( a, b, c, d, e, f );在赋值的时候是以一一对应的方式如果变量少（abc）值多（arr()）只取对应位置的值如果变量多（abc）值少（a

2021-08-12 16:32:58 214 3

原创数组练习题

学习目标：练习常用数组api题目1[“b”, “c”,“b”, “c”,“a”, “b”, “c”] 统计每个元素出现的次数,结果是： {a：1，b: 3, c: 3}let arr = ["b", "c","b", "c","a", "b", "c"] // 你的代码 ...let obj = arr.reduce(function(prev,cur){ if( cur in prev){ prev[cur]++ }else{ prev[cur] = 1 } r

2021-08-12 15:15:23 162 3

原创 vuex心得总结

1、Vue的基本使用1、安装vuex依赖包npm install vuex -S2、导入vuex包import Vuex from 'vuex'Vue.use(Vuex)2、Vuex核心概念StateMutationActionGetter2.1 State在vuex中唯一提供公共数据源，所有的数据都统一到Storeconst store = new Vue.Store({ state:{ count:0 }})组件访问State中数据的第一种方式this.$

2021-08-10 16:33:05 155 2

原创数组的方法

系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录系列文章目录一、字符串和数组之间的转换1.字符串转数组2.数组转字符串二、添加和删除数组项1.添加2.删除三、数组的操作1.遍历数组2.拼接数组3.合并（连接）数组4.裁剪数组5.自动 toString()三、数组的排序1.数组排序2.反转数组3.数字排序四、数组的其他方法一、字符串和数

2021-08-10 16:23:51 369 2

原创登陆到主页使用的组件和过程

一、登陆页面1.所使用的组件<el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="活动区域"> <el-select v-model=

2021-08-05 21:43:37 145 2

原创 element ui 简单应用：表单验证

表单验证的基本步骤共三步1、定义验证规则表单的验证在data()中补充定义规则：rules: {// 字段名1：表示要验证的属性// 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。// 数组中的多条规则会按顺序进行字段名1: [{ 验证规则1 },{ 验证规则2 },],字段名2: [{ 验证规则1 },{ 验证规则2 },],}比如一下代码 rules:{ username:[ {required:true,message

2021-08-04 20:10:33 366 2

原创 element ui 简单应用：table组件-自定义列插槽及作用域的使用

自定义列-插槽在element中的表单组件中往往会在其中插入一些按钮或者文字而我们通常会使用 <template> //按钮/文字 </template>自定义列-作用域插槽当我们要在插槽中要拿到数据，就用到了作用于插槽<template slot-scope="scope"> {{ transGender(scope.row.gender) }}</template>...

2021-08-04 19:56:10 1202 2

原创别样的1024

程序员节　　1024程序员节是广大程序员的共同节日。1024是2的十次方，二进制计数的基本计量单位之一。针对程序员经常周末加班与工作日熬夜的情况，部分互联网机构倡议每年的10月24日为1024程序员节，在这一天建议程序员拒绝加班。程序员就像是一个个1024，以最低调、踏实、核心的功能模块搭建起这个科技世界。1G=1024M，而1G与1级谐音，也有一级棒的意思。节日由来　　2002年，俄罗斯程序员Valentin Balt收集签名，向俄罗斯联邦政府请愿将9月13日设定为程序员节。2009年9月11日，

2020-10-24 15:59:03 197 15

空空如也

空空如也