　　　SakuraZr-CSDN博客

原创学习记录——用vue写一个简单的todoList案例

ps：大概是在学习怎么用webpack搭建vue脚手架之前写的。用了Bootstrap框架定义样式啥的todoList案例新建一个文件夹，然后在里面新建index.html打开命令行工具执行 npm init -y然后下载vue ：npm install vue -S当前文件夹内会生成一个node_modules文件，找到里面的vue.js 路径如下：去index.html里引入：<script src="./node_modules/vue/dist/vue.js">&lt

2021-03-20 11:46:20 411 1

原创学习记录——Vue单页面和组件（全局组件、局部组件）

template：模板，最终会作为页面结构出现在页面中，根标签下只能有一个div，全部内容都写在这个div里边，如果在这个div同级下再写一个div会报错script ：组件相关的配置style：样式相当于理解成，整个vue文件就是一个组件认识vue的单文件组件搭建符合vue单文件组件的开发环境单文件组件：vue为了更加形象去编写组件(html,css,js)，发明了一种新型文件类型xxx.vue，通过vue-loader进行webpack的打包成js文件template标签下只能有一个

2021-03-20 10:07:39 2903

原创学习记录——vue结合webpack搭建脚手架

现在所有的逻辑需要在一个html里面写希望完整的目录结构将vue工程化也就是将目录区分开asset静态资源conponents公共组件utils工具方法router路由views页面等等问题2：vue的逻辑都是在一个newVue里面写的解决：逻辑可以分开写xxx.vue单独抽离这个逻辑，div、style、script都能存在webpack结合vue搭建完整的脚手架结构更完整，逻辑更清晰，打包上线，工程化vue-loader实现加载 xxx.vue文件相关插件w

2021-01-30 00:04:47 295 3

原创 History属性

转载：https://developer.mozilla.org/zh-CN/docs/Web/API/HistoryHistory 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。属性History 接口不继承于任何属性。History.length 只读返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡加载的一个页面中，这个属性返回1。History.scrollRestoration允许Web应用程序在历史导航上显式地设置默认滚动恢复

2021-01-28 23:00:29 761

原创 new的模拟实现

转自：https://www.cnblogs.com/jztan/p/12397423.htmlnewnew 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一function Animal(name) { this.name = name;}Animal.prototype.sayName = function() { console.log("I'm " + this.name);}var cat = new Animal('Tom');console.l

2021-01-14 01:02:08 192

原创 webpack常见插件和loader及作用

loaderwebpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。常见loaderstyle-loader：将CSS添加到DOM的内联样式标签style里css-loader：允许将CSS文件通过require的方式引入，并返回CSS代码less-loader：处理lesssass-loader：处理sasspostcss-loa

2021-01-12 23:35:40 716

原创学习记录——简单总结cookie、sessionStorage和localStorage的区别

转自：https://blog.csdn.net/weixin_42614080/article/details/90706499cookie能存储内容较小，在4k左右，一般用作保存用户登录状态、记住密码，记住账号使用。不清除的话会一直存在，可以设置过期时间自动清除，设置的时候可以设置在不同的域下面。每次在和服务端交互都会放在header里面，所以若是储存太多会影响性能。localStoragelocalStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorag

2021-01-11 21:47:59 81

原创学习记录——vue指令

vue指令在模板中可以直接访问data和methods中的内容，必须通过指令的方式，指令可以是js的表达式。常见指令：v-html 绑定data中的值到innerHTML中识别html标签v-text 与{{ }}含义相同不识别标签v-bind 把标签的属性(attribute)跟data中的数据进行绑定,可以简写用冒号:v-on 绑定事件监听器，简写用@，v-on:click=”方法的名字”简写成@click=”方法的名字”v-for 循环v-if 根据表达式的值有条件的渲染

2020-12-29 19:55:00 106

转载学习记录——hooks基本使用

学习于：https://blog.csdn.net/sinat_17775997/article/details/89087266react hooks官网Hooks 是一项新功能提案，可以在不编写类的情况下使用 state(状态) 和其他 React 功能。useStateimport React, { useState } from 'react';function Test() { const [count, setCount] = useState(0) const [

2020-12-27 20:21:45 191

原创学习记录——vue基本使用

Vue：渐进式javascript框架官网：https://cn.vuejs.org/通过模板语法来实现dom的渲染操作的是虚拟dom数据驱动视图（数据改变试图就跟着改变）摒弃了原始的dom操作双向绑定Vue的基本使用步骤：1. 需要提供标签用于填充数据2. 引入vue.js库文件3.可以使用vue的语法做功能了4. 把vue提供的数据填充到标签里面（指的是第一步提供的标签）<div id='app'> {{msg}} </div>{ { } }插值表达

2020-12-25 19:15:25 174

原创学习记录——ES6语法（5）：模板字符串、startsWith()和endsWith()、repeat()、Set数据结构

String的扩展方法模板字符串ES6新增的创建字符串的方式，使用反引号定义。可以解析变量、换行、调用函数。 // let name = `这是一个模板字符串`; // console.log(name); let name = `张三`; let say = `hello,我的名字叫${name}`; console.log(say); let result = { name: 'zhangsan',

2020-12-24 19:59:48 188 2

原创学习记录——ES6语法（4）：扩展运算符、Array.from()、find()、findIndex()、

Array的扩展方法扩展运算符（展开语法）可以将数组或者对象转为用逗号分隔的参数序列 let ary = [1, 2, 3]; //...ary //1,2,3 console.log(...ary); //1 2 3 相当于如下 console.log(1, 2, 3); //1 2 3 let arr = ['a', 'b', 'c']; console.log(...arr); //a b c使用扩展运算符将数组拆分成以逗号分隔的参数序列以

2020-12-24 19:38:29 206 1

原创学习记录——ES6语法（3）：箭头函数、剩余参数

箭头函数ES6中新增的定义函数的语法 () => { } //箭头函数是用来简化函数定义语法的 ()=>{} const fn = () => { console.log(123); } fn(); //123函数体中只有一句代码，且代码的执行结果就是函数的返回值，函数体大括号{ }可以省略。 //函数体中只有一句代码，且代码的执行结果就是函数的返回值，可以省略大括号 function sum(num1, num2)

2020-12-24 19:06:43 206 1

原创学习记录——ES6语法（2）：解构赋值（数组解构、对象解构）

解构赋值ES6中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构。数组解构let arr = [1, 2, 3]let [a, b, c] = arr或者//数组解构允许我们按照一一对应的关系从数组中提取值，然后将值赋值给变量let [a, b, c] = [1, 2, 3];console.log(a);console.log(b);console.log(c);数组解构允许我们按照一一对应的关系从数组中提取值（严格按照顺序来），然后将值赋值给变量等号右

2020-12-23 09:44:53 303 1

原创学习记录——ES6及相关语法（1）：let、const

ES6ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。ES6实际上是一个泛指，指ES2015及后续的版本。为什么使用 ES6 ?每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方，比如：① 变量提升特性增加了程序运行时的不可预测性② 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码ES6新增语法letES6中新增的用于声明变量的关键字具有块级作用域、不存在变量提升、暂时

2020-12-22 21:03:51 191

原创学习记录——flex常见属性详解

父元素属性flex-direction (设置主轴的方向)主轴与侧轴在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列 x轴和y轴默认主轴方向就是x轴，水平向右默认侧轴方向就是y轴，水平向下flex-direction属性决定主轴的方向（即项目的排列方向）。主轴和侧轴都是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，而子元素是跟着主轴来排列的。属性值说明row默认值，从左到右row-reverse从右到左co

2020-12-21 21:54:28 366

原创学习记录——flex布局

flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性都将失效。子元素可以横向排列，也可以纵向排列。flex布局原理简单说就是通过给父盒子添加display：flex 属性，来控制子盒子的位置和排列方式。<!DOCTYPE html><html lang="en"><head>

2020-12-20 20:25:44 99

原创学习记录——webpack基本使用（2）：Loader，处理css、es6转es5语法、图片，服务器环境devServer

webpack出现的目的：前端不止有单页面还有多个页面多页面开发的痛点：跳转到一个新的页面加载的时间很长开发困难，不容易维护模块化不好处理通过前端工程化(webpack)就能解决多页面开发痛点的问题Loader加载器：js文件 png文件等打包成一个js文件，不同的文件（css/png等）需要不同的loader来加载。相关配置：Module.expores = { //key:value Module:{ //模块 Rules:[ //规则 { Test:’/\

2020-12-19 13:07:36 279 2

原创学习记录——webpack基本使用

webpack是一个node的包，主要功能是构建前端的开发环境核心功能：转换commonjs，加载非js资源，提供插件功能下载 npm install webpack webpack-cli -Dwebpack-cli 解析一些命令：webpack-config命令行工具执行 npx webpack index.js(要打包的文件) -o dist.js(要打包的dist文件)index.js：let a = 10;function sum() { return a + 10;

2020-12-18 21:08:48 152 1

原创学习记录——redux模块拆分和redux-thunk

redux的模块拆分根据独立的模块可以拆分出单独的reducer合并reducer：redux自带的一个方法combineReducers，将拆分的reducer最后合并成一个大的reducerredux-thunk：可以在reducer进行异步操作下载：npm i redux-thunk -Sstore/index.js：import { createStore, combineReducers, applyMiddleware } from 'redux'import thunkMi

2020-12-17 20:45:27 217

原创学习记录——redux和组件结合

redux：管理项目中的状态三大原则单一数据源state是只读的使用纯函数来修改state （reducer）重要概念state：整个应用的状态action：描述如何修改state的对象，并且这个对象必须要有type属性reducer：修改state的纯函数，接收旧的state、action，返回新的statestore：使用action来描述“发生了什么”，和使用reducers来根据action更新state的用法。store就是把它们联系到一起的对象。一个redux应用只能有

2020-12-16 19:55:38 220

原创学习记录——redux

本质上是一个单独的库，可以抽出来使用也可以和react配合使用主要是管理项目中的状态下载：npm install redux -S什么时候使用你有着相当大量的、随时间变化的数据你的state需要有一个单一可靠数据来源你觉得把所有state放在最顶层组件中已经无法满足需要了使用初始化仓库：src/store/index.js//初始化仓库//1.导入一个方法生成仓库实例import { createStore } from 'redux'//2. createStore要

2020-12-16 19:35:00 76

原创学习记录——react-router-domt路由知识点

BrowserRouter：路由系统根节点，必须要有且只能有一个HashRouter：路由系统根节点，必须要有且只能有一个Switch：它的子元素只能是Route或者Redirect，功能是只匹配一个路由，只要匹配成功就不再继续匹配Route：路由与页面的一一对应关系 <Route path="/home" component={Home} /> <Route path="/detail" render={()=>Detail} />path：路径comp

2020-12-15 20:06:54 205 1

原创学习记录——react路由封装

封装一个路由，以后我们再使用的时候，不用一个一个写Route那些，只需要调用自己写的方法，并且只需要改动一个文件引入需要的组件就可以了。views文件夹下新建router文件夹，里面新建RouterView.js和router.config.jsrouter.config.js配置路由需要的组件以及路径import Home from '../views/Home'import Find from '../views/Find'import Video from '../views/Video'

2020-12-15 19:41:34 594 1

原创学习记录——react路由 react-router-dom基本使用

下载 npm install react-router-domBrowserRouter as Router：as关键字，用来给导入的变量设置新的名字BrowserRouter：最外层的组件，可以理解为一个容器，用来放Route、Link，里面只能有一个节点Switch：包裹Route，匹配与当前访问地址匹配的RouteRoute：用来匹配浏览器的路径Link:相当于a链接Redirect重定向，在输入的路径没有与之匹配的组件的时候，自动匹配Redirect标签里设置的组件Na.

2020-12-14 21:03:13 101

原创学习记录——react生命周期

参考：https://www.jianshu.com/p/b331d0e4b398生命周期函数框架中提前设置好的在一些关键时刻会执行生命周期函数的逻辑需要我们自己编写实例期contructorcomponentWillMount：初始化数据（相当于vue里的created）过期render（仅仅产生虚拟dom）①render之后得到了一份虚拟dom②ReactDom.render()只有这个方法将虚拟dom转换成真实domcomponentDidMount：已经将虚拟dom

2020-12-11 19:53:52 88

原创学习记录——react类似百度搜索的小练习（数据筛选）

先在state里模拟一个数据，用于搜索。然后写一个input框，添加onChange监听事件，当我们输入内容的时候，会自动去匹配数据，如果包含一样的字就显示出来。然后要做的是在input框输入值的同时，遍历listDog数组，看有没有输入的那个值。如果有的话，显示出包含那个值的所有元素，如果没有则返回一个空数组。默认刚打开页面是空的。可以先封装一个回调，注意在回调里的this的指向问题。可以写一个button来观察this知识点-改变this指向的三种方法方式1：把方法变成剪头函数名.

2020-12-11 19:25:30 264

原创学习记录——react的css模块化

css模块化css模块化，意味着每一个组件里面的样式都是独立的，互相不会影响的。比如在index里设置一个样式，在son再设置一个样式，它们的class类名都是一样的，那么直接写肯定是会相互影响的，就需要css模块化。然后到index.js里：随便给哪个元素加个className到index.css里随便写个样式：.active{ background-color: skyblue; }然后到Son.css里：写一个一样类名的样式.active{ background-

2020-12-11 19:09:36 233

原创学习记录——深拷贝浅拷贝

浅拷贝：只拷贝一层第二层没有拷贝Object.assign() Object.create() es6中的解构赋值深拷贝 : 整个的数据都是新的不论基层都是新的数据JSON.parse(JSON.strinfiy(数据))const defaultState = [ { key: '1', name: '路飞', age: 20, }, { key: '2', name: '鸣人'

2020-09-22 21:25:15 175

原创学习记录——react的跨级传值React.createContext

React里面的api：React.createContext （通过这个api完成跨级传值）里面有如下：Provider 外层生产数据（数据的生产者）Consumer 内层消费数据（数据的消费者）这两个都是组件作用：方便祖先组件与后代组件（中间隔了好多层组件）传值也就是通过React.createContext()创建一个Context对象，这个Context对象包含两个组件和< Consumer />...

2020-09-14 16:56:46 761

原创学习记录——react组件实例

类组件内的成员可以访问this，this指的就是当前组件实例组件实例和组件的调用有关，每次调用组件的时候都会生成新的组件实例组件就是独立的存在组件实例上挂在了很多跟组件相关的属性和方法...

2020-09-09 11:43:09 214

原创学习记录——react组件内部的状态state、setState

类组件内部都会有相关的状态，通过改变状态就可以更新视图类比vue中的data写法：state = {show: true}//es7写法类似vue中的data写法 state = { show: true }通过组件实例就可以获取到组件状态 this.state.show改变状态让视图更新我们应该使用组件实例上的方法 setState去改变组件状态注意：state有多个状态的时候改变其中一个状态别的状态不会受影响会合并如果setState放在同.

2020-09-09 11:28:14 345

原创学习记录——react受控组件和非受控组件，操作dom（ React.createRef()）

受控组件和非受控组件受控组件：主要应用于表单元素。受控值得是表单中的值，和状态绑定有受控组件，也有非受控组件。非受控的意思是表单的值不与状态绑定受控组件通过受控方式取值，可以实时的去拿，就像vue里的v-model，可以动态获取值。前提是，input框里的值要绑定到state里去。打开页面查看：非受控在react中，我们可以通过ref来获取dom元素用法：在需要获取的dom元素标签中使用ref=’xxx’使用this.refs.xxx就可以获取到这个dom元素了打开浏览器查看：如果

2020-09-08 15:05:45 282

原创学习记录——react传入模板（children）

传入模板（children）在组件中间写要传入的虚拟dom在子组件中展示 {this.props.children}比如想要传递一段代码到子组件里。父组件Home.js：子组件Children3.js：接受父组件里的代码，使用 this.props.children...

2020-09-07 11:44:54 272

原创学习记录——react的子父传值

react的子父传值和vue一样，在父组件中定义一个回调，在子组件中触发这个回调比如子组件中有一个班button按钮，当我们点击这个按钮的时候会传一个值到父组件里**父组件Home.js：**首先在父组件定义一个回调回调函数里有一个形参，接收的就是子组件传过来的值子组件Children2.js：总结：父组件传递一个函数子组件内部接收（props）并触发该函数达到传值目的注意：props不可被修改！...

2020-09-07 11:34:38 136

原创学习记录——react的父子传值

react的父子传值、子父传值父传子：利用props 组件的属性（后面 redux 仓库也是使用props去处理数据）父组件Home.js引入子组件，并将父组件想要传的数据绑定给子组件子组件children.js

2020-09-07 10:49:04 91

原创学习记录——react组件和环境搭建

react组件和环境搭建使用脚手架搭建开发环境npm install create-react-app -g 下载全局的脚手架create-create-app -V 查看版本号create-react-app project(项目名字) 创建项目下载完后会有一个project文件夹，里面的结构目录如下：进入project项目文件后，执行npm run eject可以暴露出react的相关配置文件npm start启动项目react中的组件函数式组件创建的时候声明一个函数必须返

2020-09-04 12:19:17 252

原创学习记录——认识react及基本使用、jsx

认识react及基本使用合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计，将会带来全新的写作体验；在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式进行展示；增加了图片拖拽功能，你可以将本地的图片直接拖拽到编辑区域直接展示；全新的 KaTeX数学公式语法；增加了支

2020-09-04 11:34:29 170

空空如也

空空如也