独滕的博客

原创 为什么 React 要使用 className 来代替 HTML 中的 class

React 不使用 class 并不是技术问题，而是哲学问题。React 一开始的理念就是与浏览器的 DOM API 保持一直而不是 HTML，因为这样会和元素的创建更为接近。在元素上设置 class 需要使用 className 这个 API：const arr = document.createElement("div")arr.className = "hello" ...

原创 腾讯云对象储存-图片上传-删除图片

对象储存对象存储是腾讯云提供的一种存储海量文件的分布式存储服务，用户可通过网络随时存储和查看数据。腾讯云 COS 使所有用户都能使用具备高扩展性、低成本、可靠和安全的数据存储服务。对象储存文档基本概念下面通过几个名词概念，帮助您进一步了解腾讯云对象存储 COS：存储桶（bucket） ：是对象的载体，可理解为存放对象的“容器”。一个存储桶可容纳无数个对象。对象（Object）：是对象存储的基本单元，可理解为任何格式类型的数据，例如图片、文档和音视频文件等。地域（Region）：是腾讯云托管机

原创 `this.$router`路由传参和`this.$route`获取参数

this.$router和this.$route的区别this.$router:表示全局路由对象，里面包含属性push()，可以在任意页面实现路由跳转，任何页面都可以调用它的 push(), replace(), go() 等方法。this.$route:表示当前路由对象，里面包含属性name path query params等，可以从对象里获取一些数据。this.$router的push方法//字符串this.$router.push('home') //对象this.$router.

原创 Vuex刷新数据消失问题

Vuex刷新数据消失问题问题产生的原因：因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。解决方案所以这些数据要想存储就必须存储在外部，例如：Local Storage、Session等浏览器提供的API中，可以将数据存储在硬盘上，做持久化存储。HTML5提供了2种在客户端存储数据的新方法：localStorage没有时间期限，除非将它移除，sessionStorage即会话，当浏览器关闭时会话结束，有时间期限。 之前，这些都是由

原创 vue-element-admin（基础篇）

vue-element-admin（基础篇）vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，可以快速搭建企业级中后台产品原型目录结构├── build // 构建相关  ├── config // 配置相关├── src

原创 wx云开发练习

wx云开发介绍小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务。开发者可以使用云开发快速开发小程序、小游戏、公众号网页等，并且原生打通微信开放能力。开发者无需搭建服务器，可免鉴权直接使用平台提供的 API 进行业务开发。优势：快速上线专注核心业务独立开发一个完整的微信小程序学习成本低，不需要学习新技术无需关注系统运维数据安全能力概括：储存数据与文件运行后端代码扩展能力打通微信生态基础概念云开发提供了一个 JSON 数据库，顾名思义，数据库中的每条记录都

原创 call 和 apply 方法和区别 （面试题）

call 和 apply 方法和区别定义：apply：调用一个对象的一个方法，用另一个对象替换当前对象.B.apply(A,arguments),即A对象应用B对象的方法call： 调用一个对象的一个方法，用另一个对象替换当前对象。B.call(A, args1,args2);即A对象调用B对象的方法。相同点：1.方法的含义是一样的，方法功能是一样的2.第一个参数的作用是一样的。不同点：1.call可以传入多个参数2.apply只能传入两个参数，所以第二个参数通常是以数组形式传入

原创 vuex 学习笔记（待更新）

vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vue

原创 3-11 vue脚手架小练习

vue脚手架Vue CLI API 在vue的官方文档中安装建议使用cmd 命令行工具进行全局安装npm install -g @vue/cli可以用这个命令来检查其版本是否正确：vue --version创建项目vue create hello-world// vue create 若创建不成功出现以下问题可以尝试在cmd中输入set-ExecutionPolicy RemoteSignedVue CLI 新闻案例app.vue<template>

原创 nodejs 学习笔记

readFile 和 writeFile这是node.js提供的一个的模板里的函数。使用前要先引入模板var fs = require("fs")// require 用来引入所需模板readFile 读取文件readFile方法是将要读取的文件内容完整读入缓存区，再从该缓存区中读取文件内容，这是同步方法，格式：var fs = require("fs")fs.readFile('aa.json','utf8',(err,data)=>{ if(err){

原创 node.js基础

node.jsNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时（运行环境），如浏览器也是js的运行环境，Node 也是JS的运行环境，但是将JS代码的应用场景扩展到了服务器端补充:JavaScript 是 Web 的编程语言。是一种解释型语言，是客户端语言。JavaScript定义了网页的行为HTML 定义了网页的内容CSS 描述了网页的布局js的组成 ECMAScript（ES） : 负责翻译，为js的核心，解释器。DOM (Document

原创 移动端基础物理像素、分辨率、逻辑像素、设备像素、缩放、ppi视口、meta

移动端基础物理像素 像素点移动端设备的屏幕都是由一个个点组成的，每个屏幕上的点一定是有限的，现在技术还做不到无限个点，这些点可以叫做像素，或者叫物理像素。分辨率每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表达形式是分辨率。屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容纳的像素个数就越多，图像显示就越精细1px是否=一个物理像素在早期的屏幕也就是普通屏、标清屏中1css像素 = 1个物理像素随着Retina（视网膜屏）等技术兴起，能够将更多的物理像素点

原创 css3学习重学习笔记，简易走马灯案例、3D导航栏案例、

html5概念html5定义html标准的最新版本，是html的第五次重大修改。增加了离线储存机制。html5拓展：语义化标签、本地储存、兼容特性、2D、3D、动画、过渡、css3特性、性能与集成、html5的现状：绝对多数新的属性，都已经被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性，并不是所有浏览器都支持html5.html5新增语义化结构标签header --头部标签nav --导航标签article --内容标签section --块级标签

原创 微信小程序开发初初识

微信开发者工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html问题启动页无法出现二维码，无法连接手机。解决方法拔出网线，手机与电脑用同一个网络，可以用手机热点或者电脑的网络共享新建项目当符合以下条件时，可以在本地创建一个小程序项目:需要一个小程序的 AppID；如没有 AppID，可以选择申请使用测试号。登录的微信号需要是该 AppID 的开发者；需要选择一个空目录，或者选择的非空目录

原创 函数的学习

this 的指向this的指向是在我们调用函数的时候确定的，调用的方法不同决定了this的指向不同。调用方法this指向普通函数window构造函数实例对象，原型对象里的方法也是指向实例对象对象方法指向所属对象事件绑定绑定事件对象定时器window立即执行windowfunction foo(){ console.log("this",this);}//var arr = [1,2,3,foo];//arr[3](

原创 js操作Dom元素，jquery操作Dom元素相关知识点

DomDom是文档对象模型。在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 :文档本身就是一个文档对象所有 HTML 元素都是元素节点所有 HTML 属性都是属性节点插入到 HTML 元素文本是文本节点注释是注释节点js Dom操作获取元素1.根据id获取Dom元素：getElementByIddocument.getElementById('id')2.根据标签名获取：getElementdocument.getElementBy

原创 php连接mysql，mysqli_fetch_all()和mysqli_fetch_assoc()的区别

原创 js 基础 内置对象和方法 简单数据和复杂数据的传参

JavaScript中的对象分为三种：自定义对象、内置对象、浏览对象。内置对象JavaScript提供了多个内置对象：Math、Date、Array、String。MathMath对象不是构造函数，它具有数学常数和函数的属性和方法，跟数学相关度的运算可以使用Math中的成员。属性/方法名功能Math.Pl圆周率Math.floor（）向下取整Math.ceil()向上取整Math.round()四舍五入版，就近取整.注意-3.5结果是-3Mat.

原创 js基础简易总结

js组成部分javaScriot由三大部分组组成：ECMAScriot（JavaScript语法）、DOM（页面文档对象模型）、BOM（浏览器对象模型）ECMAScript：是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，往往被称为JavaScript或JScript，但两者都是ECMAScript语言的实现和扩展。ECMAScript：规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准DOM：是文档对象模型，是w3c组织推荐的处理可扩展标记语言的标

原创 Js基础for、while循环基本用法，附有简易案例。

JavaScript 基础循环for循环语法结构for(初始化变量; 条件表达式; 操作表达式 ){ //循环体}初始化变量 是初始化的一个计数器，需要var关键字来声明，这个变量可以用来记录和控制循环次数条件表达式 是用于判定是否符循环条件，返回值为true时就继续循环，否则退出循环。操作表达式 每次循环必定执行，用于确定循环是否执行。案例 for(var i=0;i<=5;i++){ document.write(`这是第${i}次

原创 javaScript 运算符解析 、if判断、switch语句学习

javaScript基础学习运算符算数运算符+加号10+20=30-减号10-50=-40*乘10*20=200/除10/5=2%取余数（取模）9%5=4基本用法var res=1+1console.log(res)console.log(2+2)浮点数的计算，浮点数值的最高精度是17位小数，进行计算时的精准度远不如整数var ulr=0.1+0.2 结果是0.30000000000000004递增和递减运算符递增

原创 精灵技术(sprite)，什么是精灵技术，是做什么的，笔记

精灵技术(sprite)为什么需要精灵技术？当一个用户访问一个网站时，需要网页向服务器发送请求，网页上的每张图片都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图当做修饰，当网页中图像过多时，服务器就会频繁的接受和发送请求，这将大大降低页面的加载速度。为了有效减少服务器接受和发送请求的次数，提高页面加载速度，css精灵技术出现了。精灵技术其实是将页面中的一些背景图整合到一张大图中,然而，各个网页元素通常只需要精灵图中不同位置的么某个小图，要精确定位到精灵图中的每个小图这样

转载 百度网盘无法安装，一闪而过，双击无反应，问题解决步骤方法简单

把百度网盘的EXE程序放到一个新建的文件夹，文件夹名称任意，使用360压缩软件直接解压，鼠标右键BaiduNetdisk.exe创建桌面快捷方式，双击快捷方式就可以使用了

原创 元素和文字的显示和隐藏技术详解代码案例

元素的显示与隐藏displaydispaly：none； 隐藏对象 display：block； 除了转换成块级元素以外，还有显示元素的意思。特点是隐藏后，不再保留位置a{ width: 50px; height: 50px; text-align: center; line-height: 50px; background-color: greenyellow;

原创 盒子模型 学习理解

盒子模型1页面布局的本质首先利用CSS设置好盒子的大小，然后摆放盒子的位置。最后把网页元素比如文字图片等等，放入盒子里面。以上两步 就是网页布局的本质2.盒子模型概念：就是html页面中的布局元素看做是一个矩形盒子，一个成容器的容器盒子模型有元素的内容、边框、内边距、和外边距组成盒子里面的文字和图片等元素的内容区域盒子的厚度是 盒子的边框盒子的内容与边框的距离是内边距(类似单元格的cellpadding)盒子与盒子之间的距离是外边距(类似单元格的cellspacing)3.盒子边

原创 页面布局须知重点记，元素的布局定位模式 position 属性

定位 (position)为什么要使用定位？可以是实现某元素显示在其他元素上面，可以固定盒子在屏幕的某个位置三种布局的机制的上下顺序：标准流在最底层----浮动的盒子在中间层-----定位的盒子在最上层定位也是布局的一种方式，有两部分组成：定位=定位模式+边偏移我们定位的盒子是通过偏移来移动位置的在css中，通过top、bottom、left、right元素定义元素的边偏移：(方位名词)定位模式(position)通过 position 属性定义定位模式，语法：选择器{position：

原创 今日分学习笔记，网页制作准备，须知点。

网页制作前期准备工作欲先善其事，必先利其器。 先把我们的前期准备工作做好， 我们本次采取结构与样式相分离思想。创建 study 目录文件夹 (用于存放我们这个页面的相关内容)study目录内新建images 文件夹 用于保存图片。新建index.html 首页html 文件（以后我们的网站首页统一规定为index.html)新建style.css 样式文件。 我们本次采用外链样式表。将样式引入到我们HTML页面文件中。样式表写入 清除内外边距样式，来检测样式表是否引入成功。css属性书

原创 总结浮动元素float知识点。

浮动元素floatcss布局的三种机制分别是普通流（标准流）、浮动和定位1.标准流块级元素会独占一行从上向下排列。行内元素会按照顺序排列，从左往右排碰到父级元素则会自动换行2.浮动让盒子从普通流中浮起来，主要让多个块级盒子一行显示3.定位将盒子定在浏览器的某个位置浮动为什么需要浮动？它可以实现多个元素一行显示，而之前学的行内块（inline-block）也可以实现但会有空白间隙，也不可以实现空盒子左右对齐[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-

原创 新手初识 css复合选择器

css的复合选择器主要有五种 CSS选择器分为 基础选择器 和 复合选择器 ，但是基础选择器不能满足我们实际开发中，快速高效的选择标签。而复合选择器可以选择更准确更精细的目标元素标签。复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的复合选择器主要有五种1.后代选择器概念：后代选择器又称为包含选择器作用：用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。基本格式： 父级 子级{属性:属性值;属性:属性值;}.

原创 css选择器的主要作用

每一个css样式由两部分组成，形式：css选择器{设置样式}css选择器指向需要添加样式的对象，设置样式就是设置自己需要的想要的样式css选择器主要作用如果想要用css为html页面中的元素添加样式，就需要用到css选择器，css设置样式都是通过css选择器进行控制。css选择器就是用于指向需要css作用的标签，让css样式知道自己需要到那个标签上去。CSS的选择器分为两大类：基本选择器和扩展（高级）选择器。基本选择器：标签选择器：针对一类标签ID选择器：针对某一个特定的标签使用类选择器

转载 SGML、HTML、XML 和XHTML的区别

总结，SGML、HTML、XML 和XHTML的区别?SGML：(Standard Generalized Markup Language，标准通用标记语言)，SGML具有非常复杂的文档结构，主要用于大量高度结构化数据的访问和其他各种工业领域，在分类和索引数据中非常有用。但是它不适用于Web数据描述。HTML：(Hyper Text Markup Language)，超文本标记语言，他继承了SGML的很多优点，但是html是一种界面技术，只使用了SGML中很少的一部分标记，为了便于在计算机上实现，HTM