- 博客(55)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 JS封装缓动动画效果函数
JS封装缓动动画效果函数JS动画效果原理:添加一个定时器，每多少毫秒调用一次可以使盒子运动一次 // 封装缓动动画函数，两个参数第一个缓动对象，第二个目标位置 function animate(object, target) { clearInterval(object.time);//清除之前调用的定时器 object.time = setInterval(function () { //步长值:(目标位置
2020-12-14 11:11:54
239
2
原创 JS节流阀
节流阀节流阀的理解：节流阀的理解:简单的讲节流阀是做一个限制让事件不能重复触发，就好像一个木马只能一个人骑，木马的状态是无人骑的（flag=true）当有人 以后木马开始工作，工作了就不能再让另一个人上了所以就要关闭栅栏（flag=false） 当木马一圈转完以后换下一个人 所以栅栏门打开（flag=true）这样如此反复确保一个木马只能有一个人骑让我们看一下没有节流阀的事件通过代码让我们理解节流阀·····首先让我们的节流阀设置成打开的状态 // 设置节流阀为开门状态
2020-12-14 11:06:11
1487
原创 transform之transale
CSS3tranform中的transale详解tranform中transale的作用是平移1. transaleX(0px)2. transaleY(0px)3. transaleZ(0px)4. transale(xpx,ypx)5. transale3D(xpx,ypx,zpx)transalex在水平方向移动，值为正数右平移，负数左平移-transaleY(0px)在垂直方向移动，值为正数向下移动平移，负数向上平移-transaleZ(0px)口述难以理解，可以理解为他是你与
2020-12-08 17:35:36
305
原创 Vue3和Vue2的响应式（个人学习）
Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与proxy handlers (en-US)的方法相同。Reflect不是一个函数对象，因此它是不可构造的。与大多数全局对象不同Reflect并非一个构造函数，所以不能通过new 运算符对其进行调用，或者将Reflect对象作为一个函数来调用。Reflect的所有属性和方法都是静态的（就像Math对象）。通过这些方法就可以实现vue3简单的响应式。
2022-08-23 16:09:32
318
原创 初学Vue3（个人学习）
创建一个包含响应式数据的引用(reference)对象js中操作数据: xxx.value模板中操作数据: 不需要.value一般用来定义一个基本类型的响应式数据在html模板中使用setup定义的数据直接使用即可，在操作setup中数据的时候需要使用count.value来获取操作。
2022-08-23 15:06:02
347
原创 认识一下TypeScirpt吧！
TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScriptTypeScript的作者是安德斯·海尔斯伯格，C#的首席架构师。它是开源和跨平台的编程语言。TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以运行在TypeScript环境中。...
2022-08-17 17:07:23
265
原创 ES6—管道运算符
JS中得管道运算符。Unix 操作系统有一个管道机制（pipeline），可以把前一个操作的值传给后一个操作。这个机制非常有用，使得简单的操作可以组合成为复杂的操作。许多语言都有管道的实现，现在有一个提案，让 JavaScript 也拥有管道机制。JavaScript 的管道是一个运算符，写作|>。它的左边是一个表达式，右边是一个函数。管道运算符把左边表达式的值，传入右边的函数进行求值。x |> f// 等同于f(x)管道运算符最大的好处，就是可以把嵌套的函数，写成从左到右的链式表
2021-12-15 16:15:04
2598
原创 Vue （第三节 响应式原理）
Vue 响应式原理目录Vue 响应式原理前言一、数据驱动1.数据驱动2.响应式核心原理vue2响应式原理vue3响应式原理Vue3 的proxy和Vue2 的Object.defineProperty的对比3.观察者模式：二、模拟Vue响应式原理Observer完善defineReactive方法CompilerDep类前言Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工
2021-06-04 10:21:06
530
4
原创 React (8 组件间的通讯)
React ——组件之间的通讯在我们使用React开发项目的时候组件之间的通讯是必不可少的，组件之间的通讯大概分为以下几种：父子组件之间的传值兄弟组件的传值多层嵌套组件的传值一、父子组件之间的通讯父组件向子组件传递参数import React from 'react';import ReactDOM from 'react-dom';import reportWebVitals from './reportWebVitals';// 子组件class Son1 extends
2021-05-28 19:16:43
208
4
原创 React （7 生命周期函数）
React 生命周期函数在react中，生命周期函数指的是组件在加载前，加载后，以及组件更新数据和组件销毁时触发的一系列方法。react组件从创建到销毁需要经历以下几个过程：首先是组件初始化阶段——（(initialization)）在这个过程中组件的构造函数的数据已经初始化好了，如props、construtor、supersuper(props)用来调用基类的构造方法( constructor() ), 也将父组件的props注入给子组件，功子组件读取(组件中props只读不可变，state
2021-05-28 15:18:13
395
1
原创 React （6 踩坑）
踩坑——React双向数据绑定踩坑——React父子组件传值，父组件调用setstate子组件不更新一个评论案例父组件index.jsimport React from 'react';import ReactDOM from 'react-dom';import './css/index.css'import Content from './js/Content';import Form from './js/Form';class App extends React.Compon
2021-05-26 19:45:44
153
原创 React (5 组件三大实例属性之state)
对state的理解state是组件实例的三大核心之一state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）强烈注意：1、组件中render方法中的this为组件实例对象2、组件自定义的方法中this为undefined，如何解决？a、强制绑定this通过函数对象的bind（）b、箭头函数c、class的实例方法3、状态数据不能直接修改。初始化state通过一个切换来了
2021-05-25 20:06:37
211
6
原创 React (4 JSX语法)
React.js JSX语法表达式const text ='我是一条内容'const dom=( <div> <h1>{text}</h1> </div>)ReactDOM.render( dom, document.getElementById('root'));const num=10const dom=( <div> <h1>{num+10}</h1> <
2021-05-25 16:57:26
168
原创 React.js （3 react JSX ）
JSX全称JavaScript XMLreact 定义的一种类似于XML的JS扩展语法JS+XML本质是React.createElement(component,props,…children)方法的语法糖作用：用来简化创建虚拟DOM标签名任意：HTML标签或其他标签jsx语法规则：定义虚拟dom时，不要写引号。标签中混入JS表达式的时候需要用{}样式的类名指定不要用class，要用className。内联样式，要用style={{key:value}}的形式去写。必须只有一个
2021-05-25 15:25:51
130
原创 React.js (2 react脚手架)
初始化react脚手架使用react脚手架可以加快我们开发的效率，react脚手架 用来帮助程序员快速创建一个基于react库的模板项目react提供了一个用于创建react项目的脚手架：create-react-app项目的整体技术构架为：react+webpack+es6+eslint使用脚手架开发项目的特点：模块化、组件化、工程化创建项目并启动全局安装npm i -g create-react-app创建项目create-react-app hello-reacthel
2021-05-25 15:03:37
142
原创 React.js（1 了解React）
学习React.js（1 了解React）React是一个用于构建用户界面的javaScript库，起源于facebook的内部项目，后续在13年开源了出来特点：声明式你只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI基于组件组件时React最重要的内容，组件表示页面中的部分内容学习一次，随处使用使用React可以开发Web应用，使用React可以开发移动端，可以开发VR应用React基本使用npm i react新建挂载点<div id
2021-05-24 19:31:53
168
2
原创 Vue 动态组件 & 异步组件（is 、keep-alive、异步组件、处理懒加载）
动态组件 & 异步组件动态组件 is+keep-alivevue可以通过is来动态切换组件。<component v-bind:is="currentTabComponent?currentTabComponent1:currentTabComponent2 "></component><button @click="currentTabComponent"> 切换 </button>import currentTabComponent1
2021-05-24 17:28:20
595
3
原创 后台项目权限设计-RBAC
传统权限从下面的图片可以知道传统的权限是通过对每个用户进行权限分配设置的，但是这种方式已经不适合目前企业的高效管控权限的发展需求，因为每个人都要单独去设置权限RBAC基于此，RBAC的权限模型就应运而生了，RBAC(Role-Based Access control) ，也就是基于角色的权限分配解决方案，相对于传统案，RBAC提供了中间层Role（角色），其权限模式如下RBAC实现了用户和权限点的分离，想对某个用户设置权限，只需要对该用户设置相应的角色即可，而该角色就拥有了对应的权限，这样一来，
2021-05-20 10:55:20
424
原创 后台项目实现多语言切换
初始化多语言包本功能使用国际化 i18n 方案。通过 vue-i18n而实现。首先安装国际化的包 npm i vue-i18n第二步 ，需要单独一个多语言的实例化文件import Vue from 'vue' // 引入Vueimport VueI18n from 'vue-i18n' // 引入国际化的包import Cookie from 'js-cookie' // 引入cookie包import elementEN from 'element-ui/lib/locale/lan
2021-05-20 10:26:43
1881
1
原创 element动态主题的设置
element动态主题的设置我们想要实现在页面中实时的切换颜色，此时页面的主题可以跟着设置的颜色进行变化简单说明一下它的原理： element-ui 2.0 版本之后所有的样式都是基于 SCSS 编写的，所有的颜色都是基于几个基础颜色变量来设置的，所以就不难实现动态换肤了，只要找到那几个颜色变量修改它就可以了。 首先我们需要拿到通过 package.json 拿到 element-ui 的版本号，根据该版本号去请求相应的样式。拿到样式之后将样色，通过正则匹配和替换，将颜色变量替换成你需要的，之后动态
2021-05-20 10:20:27
1102
2
原创 后台项目实现页面全屏功能
全屏插件的引用全屏功能可以借助一个插件来实现首先我们来安装全屏插件npm i screenfull然后封装一个全屏显示的插件<template> <!-- 放置一个图标 --> <div> <!-- 放置一个svg的图标 --> <svg-icon icon-class="fullscreen" style="color:#fff; width: 20px; height: 20px" @click="...
2021-05-20 10:16:36
493
原创 vue-element-admin后台项目的导入和导出的实现
vue-element-admin导入组件封装模板和样式首先封装一个类似的组件，首先需要注意的是，类似功能，vue-element-admin已经提供了，我们只需要改造即可excel导入功能需要使用npm包xlsx，所以需要安装xlsx插件 npm i xlsx将vue-element-admin提供的导入功能新建一个组件，位置： src/components/UploadExcelimport CommonTools from './CommonTools'import UploadEx
2021-05-19 19:55:15
2377
8
原创 腾讯云（2）实现图片上传、删除。
注意，上述的参数我们在本次开发过程中，直接将参数放置在前端代码中存储，但是腾讯云本身是不建议这么做的，因为 敏感信息 放在前端很容易被捕获，由于我们本次是测试研发，所以这个过程可以忽略正确的做法应该是，通过网站调用接口换取敏感信息
2021-05-14 15:03:00
1018
1
原创 腾讯云的使用（创建存储桶）。
配置腾讯云Cos第一步，我们必须先拥有一个腾迅云的开发者账号请按照腾讯云的注册方式，注册自己的账号这里是引用第二步，实名认证选择个人账户填写个人信息扫描二维码授权然后手机端授权初次体验领取免费产品选择对象存储COS点击0元试用开通服务，然后登录对象存储台，创建存储桶。设置存储桶的权限为公有读，私有写设置cors规则AllowHeader 需配成 *因为我本身没有域名，所以这里设置成 * ，仅限于测试，正式环境的话，这里需要配置真实的域名地址这样
2021-05-14 14:30:49
3545
原创 Vue 过滤器 filters
Vue 过滤器 filtersVue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：//使用 前面的是变量后面的是过滤器，最终的结果是将前面的变量加工后展示出来{{ message | capitalize }}//在 `v-bind` 中使用<div v-bind:id="rawId | formatId"
2021-05-11 14:21:40
208
原创 回忆和重温一下自己忘记的知识
1、Css中calc、support、media各自的含义以及用法？CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。.div { width: calc(100px + 50px);}CSS中的@support主要是用于检测浏览器是否支持CSS的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。但是这里有一点需要注意的是：@supp
2021-05-11 14:10:09
108
原创 自定义指令
Vue自定义指令简介Vue的自定义指令在注册的时候是不需要加"v-“的，但是在使用时需要加上"v-”可以使用Vue.directive(‘dir_name’,{})来注册全局指令，实例：// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})el：指令所绑定的元素，可以用来直
2021-05-08 18:38:54
146
原创 this.$router和this.$route的区别
this.$router :全局路由对象，任何页面都可以通过此方法 调用 push(), go()等方法。一般用于路由跳转。例如：this.$router.push(路由)//跳转this.$route :表示当前正在用于跳转的路由器对象。可用来接收当前路由，显示其name、path、query、params等属性。例如：this.$route.name//当前路由的名字区别：1.this.router是全局∗∗路由对象∗∗任何页面都可以调用2.this.router 是全局 **
2021-05-06 10:41:15
2887
原创 【web安全】HTTPS原理全解析
HTTPSHTTPS保证了我们传输过程中的传输安全。今天就解析一下HTTPs到底是非对称加密还是对称加密。首先先介绍一个场景那就是我们不进行加密我们明文传输会怎么样呢？如果我们明文传输的化我们的数据就会跑在网络上，如下图所示如果黑客从中间接入的化我们的数据（用户名、密码、交易数据等）就很容易被窃取所以明文传输显然是不可取的。然后我们看一下对称加密，首先介绍一下什么是对称加密，对称加密会有一个密钥k，客户端通过密钥k进行加密 服务端通过密钥进行解密拿到数据这样的加密是否就是可取的呢？如下图所示
2021-05-05 20:25:55
278
5
原创 云函数 （4）tcb-ruoter
云函数 （4）tcb-ruoter使用原因：1、微信小程序云开发云函数有个数限制2、代码层级结构清晰，底层数据库操作函数可复用3、还原真实前后端交互过程一、安装npm install --save tcb-router二、引入const TcbRouter = require('tcb-router');三、创建实例exports.main = async (event, context) => { const app = new TcbRouter({ event }
2021-04-27 20:16:58
243
原创 云开发（3）云函数本地调试
云函数/云函数本地调试云函数是云开发其中一项基础能力，在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码。云函数个数免费版云函数数量上限为 50写完自己的原函数后，可以通过云函数的本地调试来进行调试，调试没有问题了就可以上传云端，对于解决bug查找bug是很好用的使用像调试自己的哪一个云函数就直接右键开启本地调试即可。就是这样一个页面此时运行自己的云函数就是在本地运行不是再云端给运行了。可以调试没问题后再传到云端，有时候会弹出一个错误解决方法：右键点击你
2021-04-27 19:09:01
1028
原创 云开发（2）增删改查（SDK）
云开发的增删改查（SDK）配置：注意事项cloud.init({ traceUser: true,//开启日志 env: "wbw-9gpqknzwb95c2748"//环境ID})首先调用获取默认环境的数据库的引用const db = cloud.database()增//get 插入一条let res= await db.collection('text').add({ data:{ // _id: 'todo-identifiant-aleatoire', //
2021-04-27 18:58:28
348
原创 云开发（1）使用云开发入门
云开发（1）使用云开发入门创建一个云开发小程序项目创建完成后就是这个样子的打开云开发控制台点到设置里面可以看到自己的环境ID,一般都会自动创建一个，可以自己创建在环境名称可以切换环境接下来就是配置云环境了，需要在app.js中加入env配置自己的环境ID使用云开发数据库1、创建集合首先开通微信小程序的云开发环境，然后打开云开发控制台，添加集合。像这样添加字段就可以了现在添加了一些数据，那么如何获取数据呢？1、创建一个云函数注意：在创建的云函
2021-04-27 17:42:52
748
原创 Vuex学习（1）
VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化当有一些公共的数据需要影响到多个组件的时候就需要用到vuex了。使用Vuex管理数据的好处：能够在 vuex 中集中管理共享的数据，便于开发和后期进行维护能够高效的实现组件之间的数据共享，提高开发效率存储在 vuex 中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新传统的组件传值都是通过porps和$e
2021-03-29 17:41:51
91
原创 Vue单文件组件传值router-link
组件的传值不同于我们之前的？传值，他需要用到vue规定的传值方法我们在index.js文件中定义的路由规则中，多了一项name值这起到了我们的连接作用index.jsconst routes = [ { path: "/list/:id", name: "List", component: List, }, ]List.vue<router :to="{name:'List',params:{id:1}"> 这样实现传值1.6.7.
2021-03-18 19:58:51
171
原创 Vue打包最简单的方法（vue脚手架）
使用步骤：第一步安装vue-clinpm i -g @vue/cli可以在PowerShell中安装也可以在vscode中安装。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xQKv85VZ-1616068342537)(file:///C:\Users\Administrator\Documents\Tencent Files\2048474970\Image\C2C\Y@0C_UDS7I8S7FE2R6`XKGO.png)]安装完成后第二步：创建vue项目
2021-03-18 19:52:52
788
原创 webpack打包工具简单使用
webpack–打包工具1.6.1 打包工具最本质的打包第一步：安装特定版本旧版本：npm install -save-dev webpack -D 后面加上-D是表示开发时使用，上线后就不再使用。如果使用webpack4+版本还需要安装一个webpack-cli的插件npm install --save-dev webpack-cli -D整体安装:npm i webpack webpack-cli -D第二部：配置模式为开发模式module.exports = { m
2021-03-18 19:50:17
381
原创 Vue路由
1.5 Vue路由1.5.1 router-link标签的使用。<router-link to="写routers中定义的组件名称"></router-link> 是Vue-router.js中的组件类似于a标签 to就相当于href1.5.2 $mount代替el:"" // 将当前 vue 实例挂载到 app dom 上，代替了el:"#app"let app = new Vue({ router, }).$mount("#app");
2021-03-18 19:48:48
66
原创 Vue的基础组件
1.4 Vue基础组件1.4.1组件注册语法： Vue.component("自定义组件的名称", {这个括号内可以写实例里面的内容，例如data（值必须是一个函数）、methods、computed、watch等但是不可以写el。1、props可以定义一些数据、接收一些数据他的值可以是字符串、数字、对象、数组等，也可以是数据类型。2、template：的值是我们自定义组件所需要的代替的html代码。}）1.4.2对于props的命名问题：在props命名的时候可以使用驼峰的方式进行
2021-03-18 19:46:49
642
原创 Vue面试题持续更新......
1.Vue的特点是什么？1、国人开发的一个轻量级框架。2、双向数据绑定，在数据方面更为简单3、试图、数据、结构分离，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作4、组件化、方便封装和服用5、虚拟dom：dom操作时非常消耗性能的，不再使用原生的dom操作节点，极大的解放了dom操作2.Vue中父子组件时如何传值的？1、子组件通过事件调用向父组件传值在子组件中，利用 $emit 触发 父组件传递过来的方法的时候，可以将子组件的数据当做参数传递给父组件2、父组件向子组件传值第
2021-03-18 19:44:30
417
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人