自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

Carol的小星球

这是一个正在努力的程序媛的博客,记录一些学习前端的日常。

  • 博客(11)

原创 Vue中v-for为什么必须要key?为什么不能用index作为key?

首先要知道Vue以及React都使用了虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而他们都是通过diff算法来对比虚拟DOM前后的变化,从而更新节点。在交叉对比中,当新节点跟旧节点头尾交叉对比没有结果时,会根据新节点的key去对比旧节点数组中的key,从而找到相应旧节点(这里对应的是一个key => index 的map映射)。如果没找到就认为是一个新增节点。而如果没有key,那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射,另一种是遍历查找。相比而言。.

2020-07-31 15:34:12 270

原创 虚拟DOM和diff算法

虚拟DOM(Virtual dom),也就是我们常说的虚拟节点,它是通过JS的Object对象模拟DOM中的节点,然后再通过特定的render方法将其渲染成真实的DOM的节点。为什么要使用虚拟DOM呢,因为操作真实DOM的耗费的性能代价太高,频繁的操作DOM,会大量的造成页面的重绘和回流,出于性能优化的考虑,我们应该减少重绘和回流的操作。对虚拟节点的DOM操作,并不会触发重绘和回流,把处理后的虚拟节点映射到真实DOM上,只触发一次重绘和回流。我们都知道Vue是基于数据驱动的,数据变化之后,不会像jQue

2020-07-30 15:41:56 36

原创 require和import的区别

node编程中最重要的思想就是模块化,import和require都是被模块化所使用。遵循规范require 是 AMD规范引入方式import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法调用时间require是运行时调用,所以require理论上可以运用在代码的任何地方import是编译时调用,所以必须放在文件开头本质require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量import是解构过程,但是目

2020-07-30 14:31:19 56

原创 vue中通过v-for获取img src的问题

一开始我写法错误,想当然的认为应该是这样写:{ id:'1', src:'../assets/123.jpg') }但这样写我发现图片死活加载不出来,但是在网页调试中又看到路径是正确的,很疑惑。然后我就上网查原因,发现是src写法不正确,应该是下面这样写:{ id:'1', src:require("../assets/123.jpg") }...

2020-07-22 10:55:38 182

原创 前端命名规范(待完善)

项目命名全小写,用_隔开例: my_project_name文件命名小写开头、驼峰命名例:apiUtil.html目录命名全小写CSS命名1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background..

2020-07-16 15:38:43 31

原创 Vue项目报错:Uncaught SyntaxError: Unexpected token <

这个是我在index.html中引入一些JS库文件时产生的错误,当时我的JS文件放在了src目录下,后面查阅相关资料发现,Vue引入静态文件时,不能放在src目录下,需要放在与之同级的目录下,例如static,因为src目录下的资源只能import或require。...

2020-07-15 16:22:37 380

原创 VUE项目中引入JS文件的几种方法

在开发Vue项目的时候,有时需要使用一些非ES6格式的没有export的js库,可以有如下方法实现:1.在index.html页面使用script标签引入当然也可以使用cdn的地址。这样引入后的内容是全局的,可以在所有地方使用。<!DOCTYPE html> <html> <head> <title>Map</title> <meta charset="utf-8"> <meta

2020-07-15 15:15:14 432

原创 一些好用的插件

主题插件Atom One Dark Theme好看的主题Atom One Light Theme护眼主题通用插件Bookmarks代码标记,方便查找指令:shift + cmd + kBracket Pair Colorizer 2相邻括号颜色不同,方便查找代码作用域范围,可以与任何主题使用Code Runner代码运行,支持大部分语言Code Spell Checker单词拼写提醒,错误单词纠正Debugger for Chrome调试必备Git Historygit提

2020-07-08 16:01:31 48

原创 Router-Link详解

<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址,默认渲染为带有正确连接的<a>标签,可以通过配置tag属性生成别的标签。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的css类名组件的属性有:to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class1、to(必选参数):类型string/location表示目标路由的链接,该

2020-07-08 15:06:48 50

原创 Sass在Vue项目中的使用

简介Sass 是一个 CSS 预处理器。Sass 是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。Sass 完全兼容所有版本的 CSS。Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承、内置函数等等特性。Sass 生成良好格式化的 CSS 代码,易于组织和维护。Sass 文件后缀为 .scss。安装1. 安装依赖包vue的webpack项目中需要安装上node-sass、sass-loader和style-loadernpm install --

2020-07-08 14:17:54 14

原创 四种常见的登录方案

1.Cookie + Session 登录HTTP 是一种无状态的协议,客户端每次发送请求时,首先要和服务器端建立一个连接,在请求完成后又会断开这个连接。这种方式可以节省传输时占用的连接资源,但同时也存在一个问题:每次请求都是独立的,服务器端无法判断本次请求和上一次请求是否来自同一个用户,进而也就无法判断用户的登录状态。为了解决 HTTP 无状态的问题,Lou Montulli 在 1994 年的时候,推出了 Cookie。Cookie 是服务器端发送给客户端的一段特殊信息,这些信息以文本的方式存放在

2020-07-08 10:22:33 208

空空如也

空空如也

空空如也
提示
确定要删除当前文章?
取消 删除