- 博客(61)
- 收藏
- 关注
RSS订阅
原创 辉太郎看前端(博客目录导航)
前言人的一生，有许多事情，是需要放在心里慢慢回味的，过去的就莫要追悔，一切向前看吧 任何打击都不足以成为你堕落的借口，即使你改变不了这个世界，你却依然可以改变自己，选择条正确的路永远走下去。你多学一样本事，就少说一句求人的话。javascriptfor in 和for of的区别数据类型及检测原型原型链手写递归深拷贝箭头函数和普通函数的区别promise的介绍继承解构赋值var,let,const的区别待更新。。。VUE相关面试题
2021-01-08 14:39:37
654
4
原创 辉太郎看前端(AES解密加密)
前言需要下载crypto-js，有加密解密用到的iv和keynpm install crypto-js代码function encrypt(data,key,iv) { //key,iv：16位的字符串 var key1 = CryptoJS.enc.Latin1.parse(key); var iv1 = CryptoJS.enc.Latin1.parse(iv); return CryptoJS.AES.encrypt(data, key
2021-06-01 15:50:41
149
原创 辉太郎看前端(实现多人物单选)
前言做项目时遇到的一个问题这会记录下来。html部分<p class="juveniles_list"> <span v-for="(item,index) in list" :key="index" :class="{activespan: index === isShow}" @click="activespan(item,index)" > {{ item.patient_name }} </
2021-05-06 18:48:54
132
原创 辉太郎看前端(在Linux或Mac OS终端或Windows Git Bash中生成公私钥)
前言生成公私钥是为了让我们在上传时，更加方便步骤在Linux或Mac OS终端或Windows Git Bash, 执行ssh-keygen命令生成SSH公钥和私钥ssh-keygen -t rsa填写SSH密钥存放目录, 或直接回车存在在默认位置:直接回车输入SSH密钥的使用密码并记住, 每次下载和上传时会用到此密码; 或直接回车不设置密码输入使用密码（两次一致）查看ssh密钥cat ~/.ssh/id_rsa.pub复制密钥到
2021-03-26 14:48:50
128
原创 辉太朗看前端(mac本的环境配置及快捷键)
前言：之前开发一直用的是window系统，突然接触mac本有点不习惯，接下来去看看吧！node环境的安装；vue环境的安装；webpack环境的安装；对vue脚手架的桥接(以备公司出现不同脚手架项目)；终端中常用的命令；安装node环境的安装https://blog.csdn.net/m0_37896739/article/details/83545890vue的安装安装最新的版本npm install -g @vue/cli桥接vue脚手架2
2021-03-25 12:49:47
136
1
原创 辉太郎看前端(xss，sql，CSRF)
前言网络安全也是开发过程中我们必须要考虑的。xssxss全称(cross-site scripting)，xss攻击方式是攻击者往web页面里边插入恶意html或者javascript代码。CSRFCSRF全称(Cross Site Request Forgery)，即跨站请求伪造，是一种常见的Web攻击。CSRF攻击过程的受害者用户登录网站A，输入个人信息，在本地保存服务器生成的cookie。然后在A网站点击由攻击者构建一条恶意链接跳转到B网站，然后B网站携带着的用户cookie信息
2021-03-12 12:24:43
145
1
原创 辉太郎看前端(vue3中计算属性的使用)
前言计算属性是基于它们的反应依赖关系缓存的，计算属性只在相关响应式依赖发生改变时它们才会重新求值。computed的使用需要导入import { computed } from 'vue'在setup()中使用(相当于vue2中的beforeCreate和created)需要将函数名return出去代码演示<template> <div> <p>基本数据{{hmsg}}</p> <p>计算属性处理过的数
2021-03-02 20:04:10
281
1
原创 辉太郎看前端(vue3如何构建响应式对象)
前言在vue3中有两种构建响应式对象的方法：reactive和ref在使用之前需要导入import { reactive,ref } from 'vue'reactivereactive直接传入一个对象state，这个对象就是proxy拦截对象把state对象return出去在template和js中通过state.msg来调用ref使用ref直接声明一个proxy响应式对象msg把msg这个响应式对象return出去在template中可以直接使用{{msg}}在j
2021-03-02 16:29:06
1135
原创 辉太郎看前端(link与@import的区别)
前言link与@import都是我们在使用css样式时用到的，虽然都是引入css样式，但是它们还是有区别的。link使用场景<head> <!-- link是标签，引入外部样式表 --> <link rel="stylesheet" href="./a.css"></head>@import使用场景<head> <style> /* @import 在css环境中 导入外部css *
2021-02-24 20:48:20
136
原创 辉太郎看前端(查找出字符串或数组中出现次数最多的字符)
前言利用字符串中的方法charAt()，返回指定下标位置的字符字符串 // 1.统计次数 var str = 'XMLHttpRequest'; // 创建了一个空的对象，存储字符串中的每个字符。属性：每个字符，属性值：该字符出现的次数 var obj = {}; for (var i = 0; i < str.length; i++) {// 遍历字符串 var chars = str.charAt(i);// chars代表字符串的每
2021-01-21 16:24:49
185
原创 辉太郎看前端(js异步宏任务和微任务)
前言宏任务：setTimeout，setInterval，Ajax，DOM事件微任务：Promise，async/await。优先级：微任务执行要比宏任务要早。注： 同步任务会和微任务按照出场顺序先后执行，最后执行宏任务。同步和异步同步是阻塞式的加载只有一个任务完成后才会执行下一个任务。异步不会阻塞代码的执行。同步案例console.log('123')alert('阻塞')console.log('等待中。。。。')异步案例console.l
2021-01-20 20:41:28
136
1
原创 辉太郎看前端(js中的this指向问题)
前言在使用函数时，我们通常会把this指向弄不清除，今天就一起来看看吧！this出现的情况普通函数中的this指向。箭头函数中的this指向。class声明的函数中this的指向。通过call(),apply(),bind()改变后的this指向在对象中调用函数时的this指向。案例 //普通函数 function fn(){ console.log(this) //指向window } fn() //class函数class Prom {
2021-01-20 19:57:57
114
原创 辉太郎看前端(闭包及this指向问题)
前言闭包在我们javaScript中是常用的，在使用时我们一定要注意this指向的问题。接下来我们一起去看看吧！闭包闭包的产生函数作为返回值被返回函数作为参数被传递。作为返回值被返回作为参数被传递什么是闭包要理解闭包，首先理解javascript特殊的变量作用域，变量的作用于无非就是两种：全局变量，局部变量。javascript语言的特殊处就是函数内部可以读取外部作用域中的变量。我们有时候需要得到函数内的局部变量，但是在正常情况下，这
2021-01-20 16:10:23
162
原创 辉太郎看前端(去重，补零，格式化，排序)
前言常见的几种方法数组去重function unique(arr) { //判断传进来的是不是一个数组 if (!Array.isArray(arr)) { console.log('type error!') return } var array = []; for (var i = 0; i < arr.length; i++) { //判断数组中是否存在 if (array .ind
2021-01-19 21:07:50
168
1
原创 辉太郎看前端(js如何操作DOM)
前言当页面被加载时，浏览器会创建页面的文档对象模型。domke’yi获取元素操作内容操作属性增删改查DOM的遍历
2021-01-19 17:16:43
120
原创 辉太郎看前端(src与href的区别)
前言都是用来指向外部资源文件的属性。src的使用src是source的缩写，指向外部资源的位置，指向的内容会被嵌入到页面中当前标签所在位置。用于替换当前元素位置。一般在img，script，iframe中有。加载时在页面加载时，会停下对后续文档的处理，直到src的内容加载完毕。例如script标签引入的js文件，我们一般会放在页面最后边，这样不会影响浏览器对页面的加载。如果放到head标签中，我们可以利用window.onload实现js文件的最后加载。href的使用h
2021-01-19 14:15:36
165
1
原创 辉太郎看前端(BFC的简单理解)
前言BFC其实就是块级格式化上下文的意思，简单理解呢？就是给设置成一个独立的布局环境，让内部布局不受外部的影响，他也不会去影响外部。BFC就是一种css布局方式。BFC如何实现overflow：auto/hidden; overflow属性的值为auto或hidden时盒子就会成为BFC。position:absolute/fixed; position的值为absolute或fixed时盒子也会成为BFC。float:left/right; float的值为left或者rig
2021-01-18 19:40:20
179
1
原创 辉太郎看前端(vue-pc端的图片上传)
前言使用到的组件使用的是element-ui中的upload组件用到了组件中的那个方法:action="imageUrl"图片上传到后台的地址:headers="headers"由于没有走axios请求，需要设置header头。:on-success="handlePreview"上传成功后的回调list-type 文件列表的类型效果页面代码 <el-upload class="upload-demo" :action="imageUrl" :heade
2021-01-15 21:38:38
259
原创 辉太郎看前端(javascript防抖函数)
前言防抖的目的是为了减少不必要的计算，不浪费资源，只在适合的时候再进行触发计算。防抖函数定义在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。实现原理函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清除上一次的定时器，并设置另一个定时器，直到函数请求停止并超过时间间隔才会执行。使用场景搜索：每输入一个字符就会执行一次，这就可以使用防抖。vue中
2021-01-14 17:27:36
158
原创 辉太郎看前端(javascript节流函数)
前言节流函数在实际应用中，还是很多的，接下来我们一起去看看吧！节流函数定义规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效； 典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。实现原理其原理是用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段，如果是，则执行，并更新上次执行的时间戳。应用场景拖
2021-01-14 16:52:51
126
原创 辉太郎看前端(vue中的路由守卫)
前言在路由的跳转的时候，有一些特定的钩子函数会被执行在这些函数中我们可以通过自己的逻辑来改变路由跳转路径。钩子的参数是一个回调函数，回调函数有三个参数分别为 to from nextto 对象 去哪儿from 对象 从哪来next 函数 next() == next(true) 继续执行不写next==next(false)终止执行next(路由)跳转到某个路由全局路由守卫定义在全局，也就是main.js中，语法为：router.beforeEach((to,from,nex
2021-01-13 21:15:40
307
1
原创 辉太郎看前端(清除浮动的几种解决方式)
前言为什么使用浮动？为什么要清除浮动？清楚浮动有几种解决方案？浮动-使用浮动是因为在html中有时候会遇到几个块元素并排的问题，所以就会使用到浮动。浮动案例<body> <ul> <li class="list"></li> <li class="list"></li> <li class="list"></li> <li class="
2021-01-11 20:48:20
160
原创 辉太郎看前端(vue中的过滤器filter)
前言在说过滤器时，我们要从概念，使用，方式等几个方面入手去说首先过滤器是格式化文本输出。过滤器分为：全局过滤器和局部过滤器。优先级： 全局过滤器和局部过滤器重名时，会采用局部过滤器。全局过滤器全局过滤器在多个实例以及组件中使用语法：Vue.filter("名"，function(形参){默认的第一形参就是调用过滤器的变量})定义位置：一定要在vue实例化之前定义或在main.js中定义。代码展示//字符串首字母大写Vue.filter("big",function(
2021-01-11 16:16:57
149
1
原创 辉太郎看前端(小程序的生命周期函数)
前言小程序中的生命周期函数分为两种：全局生命周期函数(app.js中的生命周期函数)局部生命周期函数(在单个页面中的生命周期函数)全局生命周期函数(app.js中)App({ //全局只触发一次，在用户首次打开小程序时触发 onLaunch: function () { }, //监听小程序的显示，也就是小程序从后台进入前台时触发 onShow(){ }, //监听小程序的影藏，也就是小程序从前台进入后台时触发 onHide(){ },// 监听小程序的
2021-01-10 18:47:39
140
原创 辉太郎看前端(小程序组件封装)
前言组件封装可以让我们复用代码，减少代码量。我们去看看吧！封装步骤在根目录新建文件components在文件夹下新建要定义组件的文件夹，会生成.wxml，.wxss ，.json .js文件图片在子组件的wxml中定义排版<swiper indicator-dots='true' indicator-active-color='#ff5777' autoplay='true' circular='true'
2021-01-10 18:06:10
89
原创 辉太郎看前端(vue项目完成后优化打包)
前言是对hash路由的打包优化。对于前端而言，写代码还是比较容易的，难的呢？就是优化，接下来一起去看看简单的优化吧！优化为了减少代码体积以及没有必要的代码，比如console.log() ,本地图片的压缩。打包在根目录新建vue.config.js，并导出一个对象module.exports = {} publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用 outputDir: 'dist', // 生产
2021-01-09 15:32:29
243
原创 辉太郎看前端(自定义指令)
前言vue中有系统提供的指令，也可以自定义指令，当我们需要操作低层元素时，可以自定义指令。自定义指令在定义时，不用加v-，使用时要加v-。自定义指令分两种，全局自定义指令和局部自定义指令。自定义指令全局自定义指令全局自定义指令我们可以定义在main.js中，其使用的语法为Vue.directive(‘指令名’， function(){需要的指令钩子函数})局部自定义指令定义在组件中的export default{}中语法：directives:{指令名：{需
2021-01-08 20:37:15
161
1
原创 辉太郎看前端(vue自定义组件)
前言组件，在vue中有系统提供的组件，例如：keep-alive，router-link，以及router-view。我们也可以自定义组件。自定义组件概念一个.vue页面就是一个组件。主要包括3个部分：界面展示template、业务实现script、界面布局style。特性：重用性，可指定性，互操作性，高内聚性，低耦合度。好处：组件可以拓展HTML元素、封装可重用代码代码展示<template> <div></div>
2021-01-08 17:22:13
121
1
原创 辉太郎看前端(vue数据双向绑定)
前言双向数据绑定是难点，也是面试时，提问极高的问题，接下来一起去看看面试话述话述vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图实现步骤observer 主要是负责对 Vue 数据进行数据劫持，使其数据拥有 getter 和 setter 方法指令解析器负责绑定数据和指令，绑定试图更新方法watcher 负责
2021-01-07 13:58:03
322
1
原创 辉太郎看前端(移动端图片上传)
前言图片上传一直是一个难点，今天带大家去看看吧！效果实现组件的使用在实现效果时，用到了vant中的van-action-sheet(动作面板组件)，van-uploader(图片上传组件)，van-button(按钮)，用到的图片上传中的一个回调函数after-read代码演示样式排版<van-action-sheet v-model="imgShow" cancel-text="取消" @cancel="onCancel"> <p c
2021-01-06 10:48:38
251
2
原创 辉太郎看前端(路由的理解)
前言路由分为两种前端路由和后台路由。前端路由是由程序员自己定义的，一个路由对应一个页面，在后台不会真实存在。在vue中路由有两种hash路由和history路由两种。hash路由hash路由的原理：hash路由是根据url中的hash值来判断路径不同根据事件onhashchange来感知hash的变化，再根据不同的路径在显示不同的数据hash值在地址栏上#后面的就称为hashhistor路由history路由是根据h5新增的两个堆栈函数 history.pushSt
2021-01-05 19:43:01
379
4
原创 辉太郎看前端(query和params)
前言query和params都是一种传参方式，只是有些许不同而已。在说两者之前，我们首先要知道$router和$route的是什么。$router和$route$router 是路由操作对象，用来操作路由，比如要跳转页面我们就会用到$router。$route 是路由读取对象，用来读取我们路由跳转时携带的参数。query和params在路由中的定义query的参数可以在地址栏中拼接，定义时没有也没有关系。params的参数是路由的一部分必须要有，也就是必须定义。//query传
2021-01-05 19:09:28
302
2
原创 辉太郎看前端(移动端独立开发项目前期配置)
前言移动端我们要用到多环境开发，axios,vant,rem,跨域。配置项目配置多环境变量在package.json里的scripts中配置serve,stage,build,通过--mode xxx来执行不同环境。 通过npm run serve 来启动本地。 通过 npm run stage 来打包测试。 通过npm run build 来打包生产"scripts": { "serve": "vue-cli-service serve --open", "stag
2021-01-04 15:22:50
244
原创 辉太郎看前端(数据类型)
前言es5中的数据类型和es6中的数据类型。数据类型基本数据类行(值类型)Number,String,Null,Undefined,Boolean,Symbol(es6中新增的数据类型)引用数据类型Object包含(object,Array,function,Date)运算符 = 用于赋值 == 用于判断，只会判断值是否相同 === 用于判断是否全等，即值和数据类型都相同。数据类型的判断typeof检测全部数据类型值类型 let a; let
2020-12-27 20:35:00
236
2
原创 辉太郎看前端(原型原型链)
前言原型和原型链是构造函数和实例对象的一种关系说法。原型每一个函数都有一个prototype属性，被称之为显示原型。每一个实例对象都有一个__proto__属性，被称之为隐式原型。每个实例对象的隐式原型__proto__指向自身构造函数的显示原型prototype。constructor每个prototype原型都有一个constructor属性，指向关联它的构造函数原型链从实例对象自身开始查找，找不到去原型__proto__(__proto__指向函数的原型prototype)
2020-12-27 19:38:42
159
原创 辉太郎看前端(利用promise封装wx.request())
前言封装wx.request()，可以让我们在使用时更加方便，减少代码量。封装步骤再根目录新建一个env文件夹，在内部新建js文件，配置接口环境。文件图在js文件中导出我们配置的接口环境。module.exports={ //开发模式 devBaseUrl:"开发环境的域名", //测试 catchBaseUrl:"测试环境的域名", //线上 proBaseUrl:"生产环境的域名"}注： 前边的变量名，可以自定义。在根目录新建http文件夹，在里边
2020-12-18 20:46:27
1238
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人