- 博客(57)
- 收藏
- 关注
RSS订阅原创 vue3中的setup
1、setup是vue3中的一个，值为一个；2、setup是所有（组合API）的基础，组件中所用到的等都需要在setup中进行配置；
2022-07-31 22:54:39
9880
1
原创 Vue3简介
1、性能得到了显著的提升；（打包大小减少了41%、初次渲染提速55%、更新渲染提速133%、内存减少54%）2、源码的升级①、使用Proxy代替defineProperty实现响应式；②、重写虚拟DOM的实现和Tree-Shaking；3、Vue3能够；①、CompositionAPI（组合API）setup配置、ref和reactive、watch和watchEffect、provide和inject等；②、新的内置组件Fragment、Teleport、Suspense等；...
2022-07-31 21:49:52
368
原创 vue中的一个重要插件——vuex
概念专门在vue中实现集中式状态（数据）管理的一个vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间的通讯方式，且适用于任意组件间通讯；
2022-07-20 15:23:07
2096
原创 vue脚手架配置代理
当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端服务器）；配置简单，请求资源的时候直接发送给前端即可(8080)；不能配置多个代理，不能灵活控制请求是否使用代理；缺点配置略微繁琐，请求资源时必须加前缀；，而且可以灵活控制请求是否走代理；...
2022-07-18 19:05:06
399
原创 vue中的动画效果与过渡效果
动画与过渡效果添加的1、进入的整个过程都能响应的样式2、离开的整个过程都能响应的样式3、进入的起点4、离开的起点5、进入的终点6、离开的终点。
2022-07-15 20:43:58
823
转载 计算机网络模型
1、本章的学习内容是掌握OSI七层结构模型，结合生产，数学模型以及生产的简化、熟悉TCP协议与IP协议的组成。2、重点了解的内容是掌握各层间对应的生产工具，以及掌握封装与解封装的实际生产过程版权声明本文为优快云博主「上单carrry」的原创文章原文链接httpshttpshttpshttpshttpshttpshttps。...
2022-07-15 13:01:40
151
原创 组件中定义以及解绑自定义事件
1、自定义事件是一种组件间的通讯方式，适用于：子组件==>父组件；2、使用场景：A是父组件，B是子组件，B想给A传递数据，那么就要在A中给B绑定自定义事件（事件的回调是在A中）；3、绑定自定义事件：第一种方式：在父组件中或第二种方式：使用ref ps：如果想让自定义事件只触发一次，可以使用once修饰符或$once方法；4、触发自定义事件：this.$emit('atguigu',this.test)；5、解绑自定义事件：this.$off('atguigu')；6、组件上也可以绑定原生DOM事
2022-07-14 10:59:32
407
原创 浏览器本地存储
localStorage.setItem方法用于添加一个本地缓存数据，接收两个参数，为key-value类型；①、当value数据类型为数字类型时，会自动转换为字符串类型进行存储；②、当value中的数据类型为对象类型时，需要使用JSON.stringify()函数将其转换为字符串类型进行存储；localStorage.getItem()方法接收一个参数key，用于读取数据；JSON.parse()方法用于将对象字符串转换为对象类型；localStorage.removeItem()方法接收一个
2022-07-14 09:43:58
1911
原创 组件化编码流程--Todo-list案例
组件按照功能点进行拆分，命名不要与html元素冲突；考虑好数据的存放位置，数据是一个组件在使用，还是一些组件在使用； 放在组件自身即可；放在他们共同的父组件上（状态提升）从绑定事件开始；（1）父组件==>子组件进行通信；（2）子组件==>父组件进行通信（要求父组件先给子组件传递一个函数）；（1）v-model绑定的值不能是props传过来的值，因为props是不可以修改的；（2）props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但是不推荐这样子做；...
2022-07-12 16:59:47
810
原创 vue中的插件与scoped样式
能够实现很多强大的功能，例如：定义过滤器、定义自定义指令、定义混入、给原型上添加方法等，只需要在插件文件中定义，并在main.js中引入插件；功能：用于增强vue本质：包含install方法的一个对象，install可以接收多个参数，第一个参数为vue，第二个以后的参数是插件使用者传递的参数；对象.install = function(vue,option){ ... }Vue.use()...
2022-07-10 19:59:29
274
原创 单文件组件
一个文件中只包含1个组件，例：school.vue；需要使用ES6模块化的知识，将vue文件暴露一个接口可供其他文件调用；（1）分别暴露：export const school = Vue extend({ ... })（2）统一暴露：const school = Vue extend({ .... }) export {school} const school = Vue extend({ ... }) export default school，可简写为： export de
2022-07-10 15:50:16
609
原创 组件化编程之组件基础
1、实现应用中局部功能的代码和资源的集合；2、每一个功能模块都是组件，每一个组件包括html、css、js三个文件；1、组件没有el属性，初始定义的时候没有确定专门为哪个容器服务，可以随时被其他组件或vm调用，“组件就是一块砖，哪里需要哪里搬”也就是说一个html中包含有多个组件；在script标签中编写，可以包含template属性用于添加显示在页面的html结构，例：template:` ... `，例：const school = Vue.extend({ ... })data要写成函数式；原理：因为
2022-07-10 15:17:36
371
原创 vue中的自定义指令
在vue实例中使用该属性申明自定义指令，在directives中申明自定义指令有两种方法，一种就是使用函数的形式（更加简单便捷），另一种就是使用对象的形式（能够定义更加精细）；（1）第一个参数为element：实质上为使用该属性的真实DOM；（2）第二个参数为binding：是一个对象，包含value属性值等；（1）指令与元素成功绑定时调用：实质上就是对象形式的bind函数；（2）令所在模板（例：id为root中）发生重新解析时：实质上就是对象形式的update函数；指令与元素成功绑定时调用指令
2022-07-10 08:41:23
586
原创 vue的生命周期
1、生命周期又名 生命周期回调函数、生命周期函数、生命周期钩子；2、是vue在特殊时期（挂载完毕）为我们调用的一些函数；3、生命周期函数的名字是固定不可修改的；4、生命周期函数的this值指的是 vm 或 组件实例对象；完成初始化（数据代理、数据监测）之前调用，无法通过vm访问到data中的数据、methods中的方法；是数据代理、数据监测的创建之前，不是vm的创建之前，这里的this为vm；完成初始化，能够通过vm访问data中的数据、methods中的方法；完成模板的解析，生成虚拟DOM，但是还未生成真
2022-07-10 08:41:12
190
原创 vue中的内置指令
单向绑定解析表达式，v-bind:xxx简写为:xxx双向数据绑定，v-model:xxx简写v-model遍历数组、对象、字符串；绑定事件监听，可简写为@，例：@click="..."条件渲染（动态控制节点是否存在）条件渲染（动态控制节点是否展示）向其所在的节点中渲染文本内容与插值语法的区别：如果文本中原本存在内容，则会替换掉原本的内容，而插值语法不会ps：text是new Vue中定义的一个变量能够向指定节点中渲染html结构的内容，与v-text类似，都能够替换节点
2022-07-10 08:40:57
603
原创 vue中过滤器的使用
Vue.filter(name,callback) 或 new Vue({ filter:{...} }){{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"使用管道符 | 进行分割，直接使用data中的数值，管道符后再接过滤器进行操作{{time | setTime}}：time是传入的时间参数，setTime是过滤器的名字，它会将time作为参数val传入到过滤器setTime(val)中，最后将return结果替换掉整个插值语法；当调用的时候传入了参数，第一
2022-07-10 08:40:26
603
原创 收集表单数据
使用v-model收集表单的数值，实现双向绑定，默认收集的就是value值，type为checkbox复选框的时候，默认收集的是布尔值，表示是否选中；收集value值，用户输入即为value值；收集到的是value值，要给标签属性设置value值当未设置value值：收集到的是多选框是否选中的布尔类型数值，即true或false当设置value值：（1）初始值为非数组类型：收集到的是布尔类型，true或false；（2）初始值为数组类型：收集到的是value的值组成的数组； 二、v-
2022-07-09 15:30:49
384
原创 vue实现数据监测（响应式）
前期没有的数据变量，想在后期添加并且使其跟其他变量一样都是响应式的，也就是说：跟其他变量一样存在set和get方法，可以使用Vue.set或vm.$set实现。响应式：修改元素的值，页面会重新更新显示新的数据；（1）用于实现后期在页面添加一个响应式的数据；（2）接收三个参数：目标对象target，添加元素的key，添加元素的value；（3）注意：目标对象不能是vm或vm._data，只能给_data中的对象添加；例：vm.$set(vm.student,"sex","男"); //给vm下的一个stude
2022-07-09 15:02:46
451
原创 vue中的列表渲染
使用v-for实现循环遍历列表获取的每一个值循环列表中每一项的唯一值，可以是设置的唯一值(id)，也可以是索引值（1）使用变量p接收所遍历数组的每一个元素；（2）使用p和index接收所遍历数组的每一个元素和索引值； 使用value和key接收对象的数值和key 使用char和index接收字符串的字符和索引 1、vue实现代码转化为DOM的过程中，是先将代码转换为虚拟DOM，再将虚拟DOM转换为真实DOM；2、而将虚拟DOM转为真实DOM的过程中，会对比key相同的两个节点虚拟DO
2022-07-09 11:31:43
306
原创 vue实现条件渲染
使用v-show和v-if实现条件渲染，使用的优先级为：如果节点显示隐藏的变化频率很快，就使用v-show，因为v-if会不停的删除创建节点，影响速度底层实现是使用了display:none取值为true 或 false，默认为true，取值也可以使用表达式（1===1），只要表达式的最终结果为布尔类型例： 取值与v-show类似，可以取true或false，取值为false时，会完全删除，而不是设置display例：......
2022-07-09 10:29:43
541
原创 :class修改样式
可以将需要动态绑定的样式和不需要动态绑定的样式分开定义，分别使用:class和class关键字定义；后接一个字符串为表达式，能够获取到在data中定义的变量，可以实现通过修改变量修改样式； （1）:class后接一个字符串，适用于要绑定样式的类名不确定，需要动态指定；（2）:class后面的字符串表示的是一个表达式(定义在data中)，可以通过methods中定义方法修改data定义的表达式实现class属性的修改；后接一个数组名，适用于要绑定的样式个数和名字都不确定，使用一个数组存储样式 适用于绑定的样
2022-07-09 10:18:26
1027
原创 vue中的监视属性
如果刚开始确定监视对象，在vue中可以直接使用watch属性实现监视 监视属性中的函数，能够通过获取newValue和oldValue的值，进行监视到属性改变后的一些操作；接收两个参数：newValue：表示新的值oldValue：表示改变前的值实现初始化的时候调用一次监视函数handler，默认为false如果刚开始不确定监视的对象，就可以后续再使用这个实现监视 watch默认监视单层属性的改变，想实现监测多层结构需要使用deep属性watch:{ "numbers.a":{ ... } } //numb
2022-07-09 09:59:37
2811
原创 vue中的计算属性
1、computed中存储计算属性，要通过已有的属性计算得来，计算属性使用一个对象存储，包含get和set方法；2、计算属性中的get和set方法中的this都是vm；3、计算属性是一个属性，当使用插值语法调用它时，不可以加括号(因为它不是一个方法)第一次调用之后会进行缓存1、初次读取计算属性的时候；2、当get中用到的数据发生改变的时候；当手动修改计算属性时，调用set方法，例：vm.fullName="李-四"确定计算属性只需要调用get方法，而不需要调用set方法手动修改；......
2022-07-09 09:08:31
2769
原创 vue中的事件处理
（1）、使用v-on:xxx绑定事件，或者@xxx 绑定事件，例：@click=“函数名”，函数写在vue实例的methods中（2）、函数后面加括号可以直接传参，默认传参event，手动传参需要使用$event占位，不然会默认不传参event （1）、通过methods调用的函数最终会成为vm的一个属性，但是没有get和set方法，因为函数定义之后就不需要修改了；（2）、methods中定义的函数this指向为vm 或 组件实例化对象 ( 箭头函数除外，箭头函数指向为window )用于阻止默认行为例：@
2022-07-09 07:22:25
725
原创 Vue中的数据代理
通过一个对象，代理对另一个对象的改变 接收三个参数：操作的对象名、添加的属性名(key)、添加的属性值对象（1）、value 属性的数值（2）、enumerable 是否能够枚举(遍历)，默认为false，添加的属性不可以遍历；改为true就能够实现遍历（3）、writable 是否能够被修改，默认为false（4）、configurable 控制属性是否能够被删除，默认为false 通过设置第三个参数对象中添加get和set方法实现get:funct
2022-07-09 07:00:44
235
原创 Vue基础知识
渐进式：自底向上，简单的可以仅引入核心库，复杂的可以引入丰富的插件1、采用组件化模式，提高代码复用率，且代码更好维护2、声明式编码：提高代码复用率，开发人员不需要直接操纵DOM(与之相对的命令式编码)3、使用虚拟DOM+优秀的Diff算法，尽可能的复用DOM节点1、new一个Vue实例与容器是一一对应的关系，而且开发中只能有一个vue实例，但是会配合组件一起使用（也就是说可以定义多个组件）；2、{{xxx}}中的xxx只能写表达式(是一个能够赋值给变量的数据)，且能够读取到data中的所有属性；3、一旦da
2022-07-09 06:45:01
233
原创 js作用域与作用域链
一、作用域1、全局变量的作用尽量少使用全局变量①、共同操作同一个变量<script> var num=0; function add(){ num++ console.log(num) } function remove(){ num-- console.log(num) } add(
2022-04-08 16:49:23
256
原创 js解析引擎执行js代码的步骤
浏览器包括渲染引擎和解析引擎，解析引擎主要负责解析js代码一、语法分析js解析引擎首先会先扫描所有的代码，查看代码是否存在语法错误，如果代码存在语法错误，程序立即报错，不会继续执行；如果未发现语法错误，则进入代码正式处理中的预解析（预编译）阶段；二、代码正式处理1、预编译阶段全局执行代码：①、创建全局对象GO，建立一个存放全局变量的仓库；②、找到变量申明，提升变量申明，将变量存储在全局仓库中；③、找到函数申明，提升函数申明；js是单线程的语句，会解释一行执
2022-04-08 16:11:50
414
原创 function 函数
一、函数的基本注意事项function函数的名字也是一个标识符，通过关键字function申明一个函数function 函数名(){ 代码块 }二、函数基本用法1、形参与实参1、形参与实参可以有无数个，实参按照顺序赋值给形参；2、实参个数不一定要与实参个数相同，没有实参赋值的形参默认数值为undefined；3、arguments能够获取到实参列表的数据，也能够更改数据；4、形参数据类型是由实参的数据类型决定；<script> fun
2022-04-08 09:17:39
21913
1
原创 条件循环语句
一、for循环<script> for(var i=1;i<=10;i++){ console.log("第"+i+"次运行"); }</script>break、continue关键字在for循环中的使用<script> for(var i=1;i<=10;i++){ if(i==5){ break;.
2022-04-06 20:12:41
164
原创 JavaScript条件分支语句
一、if..else语句<script> var score = 75; if(score > 70){ if(score > 80){ console.log("优"); }else{ console.log("良"); } }else if(score>60){
2022-04-06 16:46:32
414
原创 javaScript赋值运算符
将某个值或者变量的值赋值给另一个变量一、= 直接赋值<script> var num = 10; var num2 = num;</script>二、+= 、 -= 、 *= 、/=变量本身加/减/乘/除一个数值最后赋值给自己<script> var num = 10; num += 10; //num == 20 console.log(num);
2022-04-06 15:38:38
892
原创 JavaScript逻辑运算符
一、逻辑与(&&)、或(||)、非(!)用法：1、&&：两边均为true，结果为true，有任意一边为false，结果为false；2、||：任意一边为true，结果为true，两边均为false，结果为false；3、！：结果取反；1、与 &&<script> console.log(true && true); //true console.log(true
2022-04-06 15:14:43
610
原创 JavaScript比较运算符
比较运算符的本质是比较两个数字的大小并返回一个布尔值true或者false；一、数字类型<script> console.log(2>1); console.log(2<1); console.log(2>=1); console.log(2<=1); console.log(2!=1); console.log(2==1); console.lo
2022-04-06 13:11:33
687
原创 Javascript运算符与数学运算公式
一、加号 +<script> //隐式转换 console.log(2+true); //true -> 1，结果为3 console.log(2+false); //false -> 0，结果为2 console.log(2+undefined); //undefined -> undefined，结果为NaN console.log(2+null); //nul
2022-04-06 10:25:38
2175
原创 数字类型以及类型转换
一、数字字面量在js中没有整数和浮点数之分，所有的数字都是浮点数1、8进制以数字0、0o或者0O开头的数字表示8进制例：010 = 8、0o11 = 9、0O12 = 102、16进制以数字0x或者0X开头的数字表示16进制例：0x10 = 16、0X11 = 173特殊的数字字面量：Infinity：无穷大（可以是负的无穷大）NaN：不是一个数字变量可以用$符号作为变量名，变量名区分大小写js中使用var定义的变量本身没有数据类型
2022-04-05 15:26:38
1306
原创 js 基础知识
一、基础用法1、var 用于申明变量js语言使用<script></script>包裹，一般写在body中，可写于任何位置（但是不建议）<body> <script> var a = 1; </script></body>2、console.log() 控制台输出<body> <script> var a = 1; co
2022-04-01 11:07:44
137
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人