2020年07月_Carol小朋友

原创 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 3408

原创虚拟DOM和diff算法

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

2020-07-30 15:41:56 223

原创 require和import的区别

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

2020-07-30 14:31:19 426

原创 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 811

原创前端命名规范（待完善）

项目命名全小写，用_隔开例： 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 165

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

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

2020-07-15 16:22:37 3013

原创 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 68958 3

原创一些好用的插件

主题插件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 200 1

原创 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 56176 3

原创 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 592

原创四种常见的登录方案

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

2020-07-08 10:22:33 9006 1

Carol的小星球