- 博客(30)
- 收藏
- 关注
RSS订阅原创 有关JSON.stringify()、JSON.parse()的用法小结
最近由于项目原因，经常和后端小哥进行前后端联调。对于前段来说要正确的传数据给后端非常重要。首先我们要知道后端需要什么样的数据，如果没有传对数据的话，那么前后端都会报错。传数据通常是要传一系列的键值对或者某个值，从而能进行后端操作。这里给大家介绍下两种关于数据转换的方法。JSON.stringify()、JSON.parse()JSON.stringify()JSON.parse()解释将对象、数组转换成字符串从一个字符串中解析出json对象用法JSON.stringi
2021-09-14 17:29:26
259
转载 解决CSS浏览器兼容性问题的4种方案
为什么会有浏览器兼容性问题？还不是因为浏览器厂商太多了！Chrome，Frirefox，Safari，Edge，IE6，IE7，IE8，IE9…360安全浏览器，qq浏览器，世界之窗，TT，搜狗，opera，maxthon（傲游）……关键是不同厂商，甚至同一厂商不同版本，对同一段CSS的解析效果也不一致，这就导致了页面显示效果不统一，也就带来了兼容性问题。多么希望Chrome能够一统江湖啊~~目前各浏览器市场份额浏览器这么多，我们也不可能每一个都要去兼容，对于用户量一般的产品，把主流浏览器的适配
2021-07-14 00:07:55
3925
原创 两种定时器，setInterval和setTimeout
定时器是js中基础的一种api，下面我们来简单分析下两者的区别setInterval 计时器这个计时器的特点是可以重复使用， <script type="text/javascript"> var calc=()=>{ var now=new Date(); console.log(now) } var timer=null; timer=setInterval(calc,1000); </script>上述代码，设置的是每过
2021-07-13 18:28:01
222
原创 数组转字符串的方法（3种）
数组转字符串的方法（3种）方法转化后类型用法特点toString()string将数组转换成一个字符串默认用“,”隔开toLocaleString()string把数组转换成本地约定的字符串默认用“,”隔开join()string将数组元素连接起来以构建一个字符串可以随意设定分隔符下面我们看下情况1、toString() <script type="text/javascript"> var a=[1,2,3,4,5,6,7,
2021-07-09 15:36:47
58758
原创 vue中的路由和嵌套路由
vue中的路由是实现spa的基础 spa:一个项目只有一个html之前实现页面跳转，需要用到a 现在用router-link替换1、基本路由①首先在body中设置相关的路由 <div id="app"> <ul> <li> <router-link to="/index"> 主页 </router-link> </li> <li> &l
2021-06-17 15:37:59
118
原创 vue中的组件嵌套
关于嵌套组件，我们用一个案例来演示①定义模板，父模板first，还有两个子模板，并且写内部占位符 <!-- 定义模板 --> <template id="first"> <div> <ul> <li @click="tempA='secondA'">这个是first的A</li> <li @click="tempA='secondB'">这个是first的B</li> &l
2021-06-17 11:11:38
1200
原创 vue中的动态组件
动态组件可以用于一些页面，这里我们用常见的账号登录&手机验证码登录页面来实现动态组件。①编写HTML并且创建component动态组件 <body> <div id="login"> <ul> <li @click="msg='account'">账号登录</li> <li @click="msg='message'">短信验证码登录</li> </ul>
2021-06-17 09:01:54
133
原创 vue中组件的定义
在某些场景，往往需要我们动态切换页面部分区域的视图，这个时候内置组件component就显得尤为重要。1.定义组件（方法一）①定义组件 // 定义组件 <script> var vheader=Vue.extend({ template:'<div><h2>{{msg}}</h2></div>', data(){ return { msg:'这个是v-header的标签' } } })
2021-06-16 18:45:10
438
原创 css的居中方式
CSS居中布局是常见的一个问题，是初级前端需要面对的问题之一。在了解CSS如何实现居中布局之前，我们先来了解一些概念。1、行内元素①和其他元素都在同一行②高，行高及外边距和内边距部分可以改变③宽度只与内容有关④行内元素只能容纳文本或者其他行内元素⑤常用内联元素：a,img,input,lable,select,span,textarea,font2、块级元素①总是在新行上开始，占据一整行②高度，行高以及外边距和内边距都可控制③宽度始终与浏览器的宽度一样，与内容无关④可以容纳行内元素和
2021-06-15 15:19:30
837
原创 var、let和const三者用法解读
最近和某前端工程师谈到一些面试的问题。根据某前端在面试实习生的时候，问了一些基础的问题。结果却不尽入人意。其中注意到一个问题就是 var 、let 还有 const 这三者的区别.一、var声明的变量会挂载在window上，而let和const声明的变量不会：复制代码var a = 100;console.log(a,window.a); // 100 100let b = 10;console.log(b,window.b); // 10 undefinedconst c = 1
2021-06-14 21:11:31
270
原创 JS中基础api的使用
在JS编程中，我们经常会对于一些数据进行处理，比如对数字内数字的长度进行改变，切割，分开字符串等等。这些工作基础JS中包含了一些API 可以给大家进行相关的操作。1、“ .concat() ” 合并数组此方法将两个不同的数组进行合并，保持原有的数组不变，返回一个新的数组<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>API</title>
2021-06-11 18:17:04
1603
原创 基础vue实现简单的选项卡功能
选项卡是前端常见的一种形式。在一个页面中实现多内容的切换。在实际的应用中也是比较常见的。对于vue初学者来说，这样的页面也是练手的好题目。下面一组代码，就能够实现基础的选项卡功能。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0
2021-06-11 09:32:08
957
原创 Vue基础指令介绍
Vue 作为前端常用的框架，运用广泛，对于刚刚接触vue的同学来说，和原生HTML+CSS+JS的编写方式有所区别。1.插值绑定文本插值的方式十分简单，只要用双大括号将要绑定的变量、值表达式括住就可以实现，vue将会获取计算后的值，并且以文本的方式将其展示出来。...
2021-06-10 16:00:25
87
原创 Vue中组件的应用以及分页面的编写
组件作为vue.js开发中是十分重要的一环，很多的电商购物车项目都会在分页面的时候运用到组件的原理，尤其是动态组件，用的十分广泛。在某些场景，往往需要我们动态切换页面部分区域的视图，这个时候内置组件component就显得尤为重要。component接收一个名为is的属性，is的值应为在父组件中注册过的组件的名称。<component :is='view></component>下面是一个常见的分页面的页面这样常见的页面可以称为分页面。点击左侧的项目，就会跳转到右侧的
2021-06-07 17:23:47
308
原创 浅谈MVVM和MVC的区别
模型—视图——视图模型（Model-View-ViewModel，MVVM），本质上是MVC（模型—视图—控制器）的改进版，其最重要的特性是数据绑定（data binding），此外还包括依赖注入，路由配置，数据模板等一些特性。从MVC到MVVM模型—视图—控制器（Model-View-Controller，MVC）模式，在Web 1.0 时代曾被广泛应用于Web架构中，然而其诞生的时间却比Web早几年。最初，MVC被应用于桌面程序中，在PSP、JSP等脚本语言诞生之后，也逐渐成为Web开发的主流模式。
2021-06-01 15:59:34
203
3
原创 mongoDB中“增删改查”以及基础的数据库应用小结
mongoDB是前端学习中主要的数据库案例，这个数据库是典型的非关系型数据库。非关系型数据库所以性能非常高，而且不需要经过SQL层的解析。可扩展性同样也是因为基于键值对，数据之间没有耦合性，所以非常容易水平扩展。关系型数据库可以处理更加复杂的数据关系和处理，能够保持数据的一致性是关系型数据库的最大优势。以下是mongoDB数据库的一些使用方法：使用方法：1、新建一个数据文件，一定要是英文。最好放置在主目录下2、打开数据库 mongod --dbpath （数据文件地址）3、使用数据库使
2021-05-01 16:26:37
211
原创 node.js笔记小结（二）
1.fs模块相关操作1.1读文件fs.readdir(文件地址,成功以后的回调函数)fs.readdir(__dirname,(err,files)=>{console.log("文件已读取")})1.2写文件写文件 fs.writeFile(‘文件名字’,数据,(err)=>{成功以后的回调})fs.writeFile('my.txt','hello world',(err)=>{ if(err) throw err; console.log('文件已写入'
2021-04-29 20:02:02
77
原创 node.js笔记小结（一）
1.什么是node.jsNode.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript 运行在服务端的开发平台。2.node和java 和php有何区别...
2021-04-28 18:44:58
115
原创 ES6相关内容笔记（三）
1.ES6模块化将一组模块（及其依赖项）以正确的顺序拼接到一个文件（或一组文件）中的过程。模块化优势:①比较利于团队协作②防止变量污染③ES6的模块化既可以用在客户端又可以用在服务器。2.包管理工具包管理工具npm(node package manager)，之前的开发不利于进行包(库文件、框架)管理，因为每一个包有可能会有不同版本，如果合作开发的时候，每一个人都有可能按照自己的喜好，使用某一类版本。有可能造成项目代码冲突或者代码崩溃。node自带的有一个包管理工具npm。npm相当于把所
2021-04-26 14:40:46
73
原创 ES6相关内容笔记（二）
1.箭头函数①箭头函数没有arguments概念，只有剩余参数②箭头函数不可以当做构造函数使用，也就是说。不能使用new命令③箭头函数中的this，指向的是定义的时候所在的对象，不是使用的时候所在的对象 var stu={ name:'zs' } var fn=()=>{ console.log(this); } fn(); fn.call(stu);2.this指向问题普通函数中的this：指向window事件函数中的this:指向的就是
2021-04-16 17:34:00
63
原创 JS方法——统计字符串中出现最多的字符
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>统计字符串中出现最多的字符</title> </head> <body> </body> <script type="text/javascript"> var str='abdgdbcaethbganmugthaesqszaphfdvwd';
2021-04-15 09:37:22
299
原创 ES6相关内容笔记（一）
1.var 和 let 区别var和let都是用于对于变量声明的操作但是let的声明与var相比会严格很多①let作为块级作用域，声明的变量作用域在所在的"{}"中，或者找到最近的{②let对于作用域内的同一个变量不可重复声明，会产生报错③let没有变量提升的概念，而var有变量提升的概念④let暂时性死区：在一个代码块内，如果有某个变量，会绑定该区域，不再受外界的影响⑤var声明以后 let不能声明，声明也会存在重复声明报错的情况⑥和let类似的声明const，声明值不可以改变的量 其余
2021-04-14 12:55:10
64
原创 ES6相关练习题
1、var和let区别？Var和let都是声明变量的作用。但是是有区别的，var的声明是在全局变量的声明，let的声明也是let块级作用域:{就是代码块}向上寻找距离该变量最近的开始的{ 作用范围就是该{}之内。Let没有变量提升的概念；let有暂时性死区：在一个代码块内，如果有某个变量，会绑定该区域，不再受外界的影响2、分析代码执行结果？var a=123;if(true){a=‘zsh’;let a;}答：代码会报错Var a 是在全局变量上进行声明的，因此if判断语句是可以使用v
2021-04-14 08:48:00
540
原创 JS高级相关内容（三）
本篇章将会整理一些JS里面经常会在面试中遇到的问题1.get和set这个是指写入和读取同步的一个方法，用户可以通过相同的函数但是不同的方法来得到相关的值，类似于innerHTML的操作。<script> var circle={ r:20, // get 方法名 获取值 get aaa(){ return Math.PI*this.r*this.r; }, // set 方法名 设置值 set aaa(value){
2021-04-12 17:00:14
62
原创 JS高级相关内容（二）
一张图看懂prototype和proto,和构造函数和对象的关系构造函数Product，new一个实例对象p，实例对象可以通过构造函数构造相关内容。构造函数product可以通过prototype属性去找到原型product.prototype。实例p也可以通过__proto__去获取到原型的。在JavaScript中，几乎所有的对象都是Object类型的实例，它们都会从Object.prototype继承属性和方法。...
2021-04-12 10:08:37
41
原创 JS高级相关内容(一)
JS高级内容中比较重要的是关于构造函数的内容说到构造函数，最先想起的是基本对象的创建。比如：// 基本对象 var stu={ name:'zs', age:12, eat:function(){ // 在基本对象内部this指向的是当前的对象 console.log(this); console.log('晚上吃了什么') } }以上创建了一个基本的对象，那么我们如何去调用这个对象呢？ stu.ea
2021-04-11 10:43:14
100
原创 最简单的数组去重方法——indexOf()
数组去重是面试中常见的问题之一，这次通过indexOf（）这个方法的调用从而达到数组去重的效果首先了解到indexOf 这个方法是可返回某个指定的字符串值在字符串中首次出现的位置。如果某一个字符串在指定的数组中没有过，那么indexOf将返回-1 这个值。那么这也说明了，当返回-1时也是第一次出现这个值，将所有返回-1的索引值都保存在新数组中，这样就可以得到去重后的数组了。 <meta charset="utf-8"> <title>数组去重</title&g
2021-04-09 16:05:01
1057
原创 px、em、rem以及%的区别介绍
PXpx像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。PX特点IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。**EM**em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。EM特点em的值并不是固定的；em会继承父级元素的字体
2021-04-09 13:47:41
257
原创 display:none 和 visibility:hidden 区别小结
display:none 和 visibility:hidden这两个方法一般都常用于前端的页面编写的布局上。但是根据不同的业务需求还是有不一样的使用特点区别1：如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏；给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。<!DOCTYPE html><html> <head&g
2021-04-09 11:41:43
404
原创 基于JavaScript的冒泡排序方法
冒泡排序（Bubble Sort），是一种计算机科学领域的较简单的排序算法。它重复地走访过要排序的元素列，依次比较两个相邻的元素，如果顺序（如从大到小、首字母从Z到A）错误就把他们交换过来。走访元素的工作是重复地进行直到没有相邻元素需要交换，也就是说该元素列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端（升序或降序排列），就如同碳酸饮料中二氧化碳的气泡最终会上浮到顶端一样，故名“冒泡排序”。下面是基于js的冒泡排序写法<!DOCTYPE html>&l
2021-04-09 10:08:43
133
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人