Starsྉ341-CSDN博客

原创字符串转换大小写(驼峰形式)

var str="element-ui-url";function data(str){ let stor=str.split("-"); for(var i=1; i< stor.length;i++){ stor[i]=stor[i][0].toUpperCase()+stor[i].slice(1); } return stor.join(""); }

2021-09-09 10:19:04 504 1

原创数组排序~

sort方法排序// 数组排序var arr=[1,5,7,9,16,2,4];arr.sort(function(a,b){ return b-a; //降序排列，return a-b; —>升序排列}) console.log(arr)打印结果为 [16, 9, 7, 5, 4, 2, 1]

2021-09-09 10:14:30 145

Array.prototype.shuffle = function () { var array = this; for (var i = array.length - 1; i >= 0; i--) { var randomIndex = Math.floor(Math.random() * (i + 1)); var itemAtIndex = array[randomIndex]; array[randomIndex] = ar.

2021-09-08 10:31:33 167

原创数组去重~

这种方式不考虑兼容性利用for嵌套for，然后splice去重var arr = [1, 9, 12, 15, 7, 16, 18, 1, 9, 15];function data(arr) { for (let i = 0; i < arr.length; i++) { // 先遍历一遍数组 for (let j = i + 1; j < arr.length; j++) { // 再次遍历数组 if (arr[i] =.

2021-09-08 10:11:49 128

原创 js字符串强制转数字

在接口要求必须是数字的时候+ 与Number 转换不了的时候我们就可以用parseInt(不带小数点)parsefloat(带小数点)

2021-09-07 11:47:32 510

原创转换带有年月时分秒时间

1在main.js中先引用注册// 在main.js引入过滤器Vue.filter('dateFormat', function (originVal) { const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate() + '').padStart(2, '0')

2021-09-07 10:12:41 92

原创项目遇到的问题

1 按钮切换问题1 : 一开始是设置了两个按钮来进行的v-if else 的判断点击一个所有的都会跟着改变因为是在el-table 里面循环渲染的解决方式 : 用一个button 按钮来进行判断就好了如何来区分渲染呢 : 定义一个js文件来进行区分 : 并导入在计算熟悉中定义然后就可以在自己所需要的文件内进行渲染导入所需要的文件computed进行渲染...

2021-09-05 15:54:43 139

原创打包去掉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 20:44:24 217

原创一起来看看路由吧(导航守卫)

咳咳~! 来了奥兄弟们1. 导航守卫可以控制路由的访问权限。示意图如下：2. 全局前置守卫每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制：3. 守卫方法的 3 个形参全局前置守卫的回调函数中接收 3 个形参，格式为：4. next 函数的 3 种调用方式参考示意图，分析 next 函数的 3 种调用方式最终导致的结果：5. 控制后台主页的访问权限...

2021-08-29 14:49:08 236

原创一起看看路由吧(常见用法)(2)

1. 声明式导航 & 编程式导航在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如： ⚫ 普通网页中点击链接、vue 项目中点击都属于声明式导航在浏览器中，调用 API 方法实现导航的方式，叫做编程式导航。例如： ⚫ 普通网页中调用 location.href 跳转到新页面的方式，属于编程式导航2. vue-router 中的编程式导航 APIvue-router 提供了许多编程式导航的 API，其中最常用的导航 API 分别是：① this.$router

2021-08-28 09:55:05 181

原创一起看看路由吧(常见用法)

1. 路由重定向路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：2. 嵌套路由通过路由实现组件的嵌套展示，叫做嵌套路由。3.声明子路由链接和子路由占位符在 About.vue 组件中，声明 tab1 和 tab2 的子路由链接以及子路由占位符。示例代码如下：3.1通过 children 属性声明子路由规则在...

2021-08-27 12:13:57 496

原创一起看看路由吧(基本用法)

vue-router 的基本用法1. 什么是 vue-routervue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1 在项目中安装 vue-

2021-08-26 16:06:03 133

原创一起看看路由吧(前端路由的概念与原理)

1. 什么是路由路由（英文：router）就是对应关系。2. 什么是前端路由通俗易懂的概念：Hash 地址与组件之间的对应关系。3.前端路由的工作方式1. 用户点击了页面上的路由链接2. 导致了 URL 地址栏中的 Hash 值发生了变化3. 前端路由监听了到 Hash 地址的变化4.前端路由把当前 Hash 地址对应的组件渲染都浏览器中结论：前端路由，指的是 Hash 地址与组件之间的对应关系！4. 实现简易的前端路由步骤1：通过标签，结合..

2021-08-25 18:09:16 201

原创自定义指令

1. 什么是自定义指令vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。

2021-08-24 16:17:05 1002

原创来讲讲插槽吧

1. 什么是插槽插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。可以把插槽认为是组件封装期间，为用户预留的内容的占位符。2. 体验插槽的基础用法在封装组件时，可以通过元素定义插槽，从而为用户预留内容占位符。示例代码如下：2.1没有预留插槽的内容会被丢弃如果在封装组件时没有预留任何插槽，则用户提供的任何自定义内容都会被丢弃。示例代码如下：2.2 后备内容封装组件时，可以为预留的插...

2021-08-22 15:07:00 253

原创动态组件~

1. 什么是动态组件动态组件指的是动态切换组件的显示与隐藏2. 如何实现动态组件渲染vue 提供了一个内置的组件，专门用来实现动态组件的渲染。示例代码如下：3.使用 keep-alive 保持状态默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的组件保持动态组件的状态。示例代码如下：4. keep-alive 对应的生命周期函数当组件被缓存时，会自动触发组件的 deac...

2021-08-21 13:22:38 166

原创生命周期&&生命周期函数

生命周期是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。注意：生命周期强调的是时间段，生命周期函数强调的是时间点...

2021-08-21 13:14:33 193

原创 px em rem 的区别

hello 大家好我们又见面了今天呢我们来一下 px em rem 他们三个的区别吧1.PX特点1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；3. Firefox能够调整px和em，rem，但是大部分的中国网民使用IE浏览器(或内核)。px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体...

2021-08-20 10:01:20 124

原创怎么来使用ref

ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象使用 ref 引用 DOM 元素如果想要使用 ref 引用页面上的 DOM 元素，则可以按照如下的方式进行操作:使用 ref 引用组件实例如果想要使用 ref 引用页面上的组件实例，则可以按照如下的方式进行操作：控制文.

2021-08-19 18:06:37 142

原创我们来看看this吧

全局环境下在全局环境下，this 始终指向全局对象（window）, 无论是否严格模式普通函数: 调用方式决定了 this 的值，即【谁调用 this 的值指向谁】，如下代码所示：普通函数没有明确调用者时 this 值为 window，严格模式下没有调用者时 this 的值为 undefined。<script> // 普通函数 function sayHi() { console.log(this); } // 函数表达式 let say...

2021-08-19 14:53:57 249

原创封装全局组价

封装在哪里: 1.我们建议封装在src下面components下面.vue文件 2.引入solt 插槽让用户能自定义内容 3. 就可以在对应的组件引入注册以标签形式使用了(这一步呢比较麻烦我们后面有更好的办法) <template> 左侧插槽 <div class="left"> solt插槽 name是对应的名称 <slot name="le...

2021-08-18 13:46:54 132

原创删除功能与添加功能遇到的问题

hello 今天我们来一起看看删除功能常见的小bug 与添加功能的细节优化吧~删除功能: 步骤: 交互效果1.点击表格删除按钮事件，显示弹框询问用户是否确定删除2.用户点击确定按钮之后进行删除操作（封装api，以备调用）3.用户点击取消按钮之后关闭弹框不进行任何操作elementUI中提供的弹出框删除功能逻辑实现 1提炼一个单独的删除功能 2.根据id...

2021-08-17 21:10:48 554

原创使用element的表单渲染

今天来记录一下使用element的渲染有点不同方便后续我的查找啊哈哈哈注意最重要的两个数据: 1. :data='' 要循环渲染那个数据的名称 2. prop='' 数据里面的每个数据项的名称<template> <el-table :data="list" style="width: 100%"> <el-table-column prop="d...

2021-08-16 10:53:41 203

原创表单校验规则

hello 我们一起来看看表单的校验规则吧~步骤: 1. 定义校验规则 2. 配置模板应用规则 (1)给表单设置 rules 属性是传入验证的规则 (2) 给表单设置model 属性是传入表单验证 (3)给表单中的元素(From-ltem) 设置 prop属性值是需要校验的字段名称 3. 最后我们需要手动兜...

2021-08-15 17:11:57 1157

原创异步 porps

测试方法 : 父子传递父组件:<template> <div> 父组件：{{ num }} //引用 // 绑定数据 <Son ref="refSon" :num="num" /> //点击事件 <button @click="changeNum">changeNum</button> </div></template>&lt.

2021-08-14 00:00:13 119

原创数组转成树状结构

hello 今天我来记录一下数组转成树状结构应用场景: 假如呢后端给我们返回一个平铺的数据而结构要求的是树状我们就可以用这套思维来完成咯~分析: 上下级[ {id:"01", pid:"", "name":"老王" }, {id:"02", pid:"01", "name":"小张" }, {id:"03", pid:"02", "name":"小小张" }, {id:"04", pid:"", "name":"老陈" } ]...

2021-08-13 20:13:49 462

原创构造函数和实例成员与静态成员

halo 大家好我是王小白又和大家见面了今天我们来简单了解一下构造函数与他身上的实例成员和静态成员吧1.构造函数也是一个普通函数，创建方式和普通函数一样，但构造函数习惯上首字母大写2.构造函数和普通函数的区别在于：调用方式不一样。作用也不一样（构造函数用来新建实例对象）3.调用方式不一样。普通的函数直接方法名加()即可构造函数的调用需要new关键字来实现 new 方法名()4.内部用this 来构造属性和方法代码演示:...

2021-08-12 20:05:47 272

原创使用reduce完成一个小功能

hole 大家好今天我学习了reduce()方法来做一个小案例巩固知识吧 ~! <script> var arr = [ { label: '男', value: 1 }, { label: '女', value: 0 } ] function f(arr) { // 写代码，得到 return arr.reduce((to, item) => { t.

2021-08-12 09:23:00 192

原创 v-model 与修饰符.sync 的区别

halo 大家好今天我给大家简单介绍一个二者的区别相同点 : 都是语法糖 1 都可以实现父子组件数据的双向绑定 2 原理都是在绑定的元素身上添加一个事件和对应的值原理 :1 v-model 等价于监听一个 value属性和一个input事件 !<com1 v-model="num"></com1> 等价于<com1 :value="num" @input="(val)=...

2021-08-11 23:23:28 217

原创数组的APi

1. push(): 添加到元素的尾部原数组 : const str =[1, 5, 20, 6, 7, 80]往最后添加 : str.push(123)打印结果 : console.log(str) // const str =[1, 5, 20, 6, 7, 80, 123]2. pop(): 取出最后一个原数组 : const str =[1, 5, 20, 6, 7, 80]取出最后一个 : str.pop()打印结果 : consol

2021-08-10 12:38:23 121

原创 Login登录流程

大家好 : 今天我总结了一个登录流程有什么不对的地方请多指教~!多少有点草率 ~~ 减量咯 We see you next time~

2021-08-07 23:26:50 478

原创跨域遇到的问题与解决方案

Hello, here is the blog of Wang Xiaobai welcome your arrival你好,这里是王小白的博客欢迎你的到来前言: 可以说跨域是前端避不开的话题我们会常常与他打交道在这里我总结几个问题希望你们能指出问题哪里有做的不足的地方需要改进我会努力谢咯~!1. 如何判断是否跨域呢 : 假设我们在 A 地址向B地址发起请求此时 A 和 B 的请求地址 :协议域名端口号不全相同的情况下则说明跨域。2....

2021-08-07 20:58:38 521

原创对象转数组

对象转数组代码实现 :<script> const obj = { 0: '男', 1: '女' } function f(obj) { let arr = [] for (let key in obj) { // console.log(key, typeof key) arr.push({ label: obj[key], value: key }) } return arr } const arr = f..

2021-08-05 17:40:35 55

原创数组转对象

数组转对象需求:1. 把对象里面的键和值颠倒放进一个新的对象中代码实现:<script>constarr=[{label:'男',value:0},{label:'女',value:1}]functionf(arr){letobj={}for(leti=0;i<arr.length;i++){obj[arr[i].value]=...

2021-08-04 21:00:53 208

weixin_56847152的博客