- 博客(44)
- 收藏
- 关注
RSS订阅原创 React-类组件仓库-Redux
store.dispatch(props)就是将props传入到reducer中的action，而reducer中的state就是数据，在index.js文件中可以看出，最开始是undrfined的，然后令他等于defaultsate就是默认数据，然后其返回值，也会改变数据仓库的默认值，首先在store.js文件中创建默认数据，然后定义reducer函数，让后面引入index.js文件的其他文件，在使用store.dispatch的时候能够使用，
2022-10-17 17:26:01
495
原创 React-useCallback
useCallback也是一样的。1.我们在定义函数组件的时候时常在函数体内定义一些内嵌函数，这些内嵌函数会在组件每次重新渲染的时候被重新定义，如果它们作为props传递给了子组件的话，即使其它props的值没有发生变化，它都会使子组件重新渲染，而无用的组件重渲染可能会产生一些性能问题。简而言之useCallback就是把我们在函数组件内部定义的函数保存起来,当组件重新渲染时还是使用之前的,就不会被重新定义一次。当前定义的函数，并在下次组件渲染的时候返回之前定义的函数而不是使用新定义的函数。
2022-10-14 11:38:08
475
原创 Vue3.0-Teleport
to的值可以指定body 这样就是在body渲染新的div，也可以指定index.html中的div，id就是#，class就是.下面就是teleport实现模态弹窗。
2022-09-20 22:44:32
211
原创 Vue3-生命周期函数
在Vue3.x中，新增了一个setup生命周期函数，setup执行的时机是在beforeCreate生命函数之前执行，因为在这个函数中不能通过this来获取实例的；同时为了命名的统一，将beforeDestory改名为beforeUnmount，destoryed改名为unmounted。Vue中每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁、这就是一个组件所谓的生命中周期。Vue2.x中的生命周期。来访问组件的生命周期。
2022-09-20 22:32:59
891
原创 Vue3.0-监听属性
注意：监听reactive定义的响应式数据的时候，会强制开启深度监视并且oldvalue无法正确获取。监听reactive定义的响应式数据的某一个值的时候：deep 配置有效。与Vue2.x中的watch配置功能一直。
2022-09-20 22:27:57
481
原创 DOM-事件代理
无论事件触发时 是不是目标对象的监听器 在监听器内部的事件对象event中都可以访问这个事件的目标对象，利用这个特点去绑定事件给父级元素来代理子级元素的业务。这种设计就是事件代理。事件代理：网页设计中一种设计思想 利用事件对象中引用的目标对象这个技术来实现的。
2022-09-19 02:10:05
110
原创 js-闭包
比如函数内部有一个对象，内部的函数引用了这个对象，返回这个函数 然后外部作用域，也可以通过这个闭包操作内部的对象，因此函数调用完毕之后本该释放的对象内存空间，由于外部作用域还在，因此内部的对象就不会释放，而后面的代码又没有再次操作过这个内部的对象了，这个对象的会一直占用内存，但是却没有被使用这就是内存泄漏。垃圾回收：浏览器定期的轮询内存，看这个占用内存的对象，还有没有能力被别人访问到，没有人引用它了，内存就释放了它的空间，不然就会占用这个内存，内存泄漏（浏览器的内存管理机制：垃圾回收 引用计数）
2022-09-19 01:36:57
85
原创 Vue3.0-计算属性computed
然后在template标签中要使用计算结果的地方使用{{name}} 就可以使用最后的返回值了。retrun 返回值，也就是计算结果。Vue3.0中的computed的功能与2.0中的计算函数功能一样。在引入之后，设计箭头函数。
2022-09-16 23:17:42
241
原创 Vue3.0-ref、reactive实现setup函数中的响应式数据
ref函数可以让在setup函数中的数据实现响应式数据，其基本原理就是监听了value值的改变，然后劫持value的setter和getter函数。因此，如果实现的响应式数据，是一层又一层的引用数据的的话，会一直监听，劫持，这样效率就会非常的低下。所以，一般情况下ref函数实现的响应式数据就是基本数据。引入：案例：这样就实现了点击按钮，在页面没有刷新的情况下，图片完成了切换。
2022-09-16 23:11:33
239
原创 Vue3.0-setup函数
第一种是正常的在script中使用setup函数，然后给出数据、方法的返回值就可以使用对应的数据、方法，这种情况下，vue2.0中的生命周期函数，data，methods、计算属性，监听器等都可以正常使用，但是data和setup两个的优先级，setup优先级更高。第二种是在script标签中将setup当成一个属性，这是setup的一种语法糖，添加进去，然后再script中不再需要像setup函数一样需要返回对应数据、方法，组件中所有用到的：数据、方法等等，都要配置在setup中。
2022-09-16 22:56:59
515
2
原创 VueX 全局状态(数据)管理库
VueX是Vue团队为了方便组件之间的数据共享,借鉴了redux，用来来实现vue组件全局状态(数据)管理的一种机制.使用VueX易于开发和后期维护上都有很大的好处，引入方式：在下载脚手架的时候，可以选择引入，VueX中一共有5个对象可以使用：一、State1.State:创建state状态,状态就是那个存数据的对象2.组件中访问数据二、Getter1.Getter：类似组件中的计算属性，用来对创库数据进行计算，它会传入state对象供我们操作。
2022-09-15 00:55:39
224
原创 vue-网络代理
在vue项目中，经常需要将后端数据请求到vue项目中然后拿来使用并显示到页面上，但是后端服务器与我们的vue测试服务器是不一样的，因此我们请求数据的时候，往往需要进行跨域请求，如果后端是在egg框架上写的，那么就需要给egg框架配置跨域请求，这样就可以然后配置router，以及返回数据这样就可以得到了。这样在controller文件和router文件中分别配置，就完成了，这时，vue主页加载完成后，就会将返回的对象打印在控制台中，这完成了vue的前后端的初步交互。这样也一样完成了前后端的初步交互。
2022-09-09 20:14:35
577
原创 vue-组件的自定义事件
当满足条件后，直接调用this.$emit("事件名"，fn接受的形参)就可以返回给父组件了,这个时候父组件的fn就会运行.Box1组件是事件源 myevent是Box1组件绑定的事件类型 fn是Box组件上面绑定的监听器。myevent由Box组件内部自己设计 什么时候触发:就在watch监听器里面写，fn要 myevent触发了就会运行 myevent事件什么条件下才会触发呢?事件源 target 事件类型type 监听器handler。
2022-09-08 01:22:36
127
原创 Vue-插槽
在vue中插槽就是子组件写上一个slot标签，然后父组件在使用子组件的时候，使用双标签，然后再双标签之中可以进行填充标签，比如HTML的标签，填充的标签，就在子组件的插槽中显示出来。在这个例子中，就显示了slot插槽数据的使用。
2022-09-08 00:52:50
194
原创 Vue中CSS相关技术
vue文件中可以出现多个style标签 凡是添加了scoped属性的,里面的选择器就会被修改 没添加scoped属性的就不会被修改。全局样式的写法:1.在.vue文件中的style中写的样式 打包后就是全局样式 2.写一个css文件 在项目中导入就是全局样式。如果全局样式出现了相同的选择器. 就看是哪个最后打包引入项目 哪个的优先级就最高。并且为添加了scoped的style中的样式选择器上添加一个属性选择器。把当前组件模板中的每一个元素添加一个相同的哈希值命名的属性名。
2022-09-08 00:38:45
100
原创 组件的属性的类型验证
这一个propos就是详细声明，其中一个数组包含了string和number两个数据类型，就是titile能够接受的数据类型，如果不是这两个类型中的一个，vue还是能正常运行只是会报出警告。这便是父组件和子组件，其中props:["title"] 就是组件的属性的简单声明。而且也可以将属性再划分为对象，添加一个default 写上默认值。组件的属性可以有多个只是在例子中只写了一个。
2022-09-06 22:45:59
121
原创 Vue脚手架下载和Vue-单文件组件
首先创建一个Vue项目，这一次的Vue项目不再使用cdn而是去npm社区下载vue脚手架，来在.vue文件中进行。注册的组件名不能跟vue中原生DOM重名，如onclick,注册的名字是驼峰，使用的时候就用连字符。4. 进入项目文件夹: cd app1 //进入项目文件夹,也可以直接在项目文件夹中打开终端。注册的组件使用的时候可以是双标签也可以是单标签：如果有插槽(参考博客：还没写）必须使用双标签。npm run build //生成的打包文件在dist中 用于项目上线。@代表了src目录的意思。
2022-09-06 22:11:34
1224
原创 Vue计算属性，过滤器，侦听器
computed是vue的计算属性，是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新上面代码就使用了computed去进行计算，拼接然后得到完整的用户输入名字在上面代码运行时，会发现，当点击获得完整名字按钮后，再改写两个输入框中的内容，下面的box的内容不需要进行其他操作也会跟着改变，因为computed的每一个计算属性都会被缓存起来，只要依赖发生变化，就会重新进行计算，并且渲染。
2022-09-05 16:47:54
231
原创 Vue-条件渲染和循环渲染
条件渲染一共有两个v-if 和 v-show当设置为false时，他们都会使对应标签在浏览器中消失，true的时候都会出现，而两个条件渲染方法，虽然都是让标签在浏览器中消失，却有所不同。
2022-08-31 19:35:23
785
原创 Vue-样式绑定
实现效果就是点击后消失，再次点击出现。而上述案例中，一共用了几个知识点和DOM操作中的onclick是一样的然后再和data同级中写methods，再在里面编写函数，实现具体功能。
2022-08-31 18:47:39
191
原创 Vue的基础指令
{{}}是一种插值表达式 会执行js语法执行环境上面的{{hello}}就是将，Vuue对象中的data对象中的hello的值传入到div中去，前提是得用el去选中元素，选中元素就和dom操作的元素选择是差不多的，id用#，class用 . ，当然，hello也可以是对象，数组，函数等其他数据，导出数据方式，和js中的对应导出方式一样。............
2022-08-29 18:39:44
140
原创 Node.js模块
在上面的代码完成后，在对应文件夹路径输入cmd，唤出文件框，然后输入node 文件名.js然后就可以在浏览器的网址输入框，输入 http:// IP地址:端口号/路径 就可以了。
2022-08-07 16:22:29
147
原创 Canvas画布
stroke()开始绘制图形，将当前定义的所有路径，都绘制出来(在使用该方法前，页面并不hi绘制图形出来)在body标签中，使用canvas标签，然后可以通过css来设定宽高，背景颜色等。在上述代码中，使用canvas标签，设定一个固定宽高的画布，然后选中该画布，进行一系列的操作。moveTo开始定义一条新的子路径，该方法去欸的那个了线段的起点；五个参数分别为圆心x坐标，圆心y坐标，起始角度，结束角度，是否顺时针(可选）除了本身给定的方法绘制矩形，用线条绘制也可以绘制矩形出来，只是会较为麻烦。...
2022-07-22 18:53:34
181
原创 DOM-通过方法，关系获取节点
提示：在学习DOM操作时，需要有一定的js，H5,CSS基础。1、通过id来获取标签节点 document.getElementById() 2、通过类名来获取标签节点 document.getElementsByClassName()3、通过标签名来获取标签节点 document.getElementsByTagName()4、通过标签种的name元素的值来获取标签节点 document.getElementsByName()5、获取符合选择的某个标
2022-07-14 16:58:14
376
原创 ES6-类
js是一个基于面向对象设计的单线程的静态脚本语言.面向对象 ( 类 实例对象 继承 封装 多态 )基于面向对象设计 本质没有继承 类 等等语法 但是按照自己的语法特征(原型)单线程 代码只能一个业务一个业务的执行静态 var a={}; var re=a*20;脚本语言 > 嵌入式语言 灵活声明一个类：因为js并不是一个面向对象的语言所以，这里的类实质上是一个函数每个类中包含了一个特殊的方法 constructor()，它是类的构造函数，这
2022-07-13 17:27:04
73
原创 ES6-string
string-includes string-startsWith string-endsWith string-repeat string-padEnd string-padStart 在字符串中使用变量
2022-07-12 18:35:45
54
原创 JS对象的基本概念
1.什么是对象在js中数据大概分为两种数据，基本数据和引用数据。基本数据有：num、string、undefined、null、boolean五大基本数据引用数据有：函数、对象、数组等所以 在js中对象就是一种引用数据，但是数组、函数等也可以称为一种特殊的对象，所以在js中除了五大基础数据，其他几乎都是对象。2.创建对象的方法2.1 直接声明一个对象var obj = { name:"jack", high:"185"
2022-05-20 16:41:34
1932
原创 CSS选择器
1.基础选择器1.1标签选择器如：div{ background-color: red; }就是将所有div标签选中，将其背景颜色改为红色。1.2 ID选择器首先，要使用id选择器必须给标签添加一个id属性，然后才能通过在style标签中通过#表示对应的标签的id属性如：body中写一个div标签：<div id="box">一个盒子</div>style中用id选择器选中它就用：#box{..
2022-05-18 16:44:09
344
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人