- 博客(34)
- 收藏
- 关注
原创 vuex全局数据管理
1.actions与mutations相同点 :都是修改state数据2.actions与mutations不同点mutations:同步更新actions: 异步更新(例如你的数据来源于ajax)一定要记住只有你的ajax数据需要存入vuex,才需要在actions中发送ajax请求。如果不想存入vuex,还是在组件的created钩子中发送。actions语法如下(1)定义格式这个地方的载荷一般为ajax接口需要的参数,如果没有就不用传// 省略其他...
2022-09-24 21:52:03 410 1
原创 vue路由
前端路由和后端路由不是同一个东西,不要搞混淆url地址和后端逻辑的对应关系url地址和组件的对应关系1.前端中的路由 : 不同的路径对应加载不同的页面,且页面不会跳转路由的功能类似于tab切换,但是更加的高级,性能更好2.路由的工作原理 :监听网页hash值变化(1)修改网页的hash值hash值原本的作用是来做锚点定位的,它有一个特点就是页面不会跳转(2)给window注册onhashchange事件,监听hash值变化。
2022-09-23 21:18:42 235
原创 vue组件传值与生命周期钩子
使用步骤第一步:给子组件添加props属性(与data平级)作用:类似于声明变量,定义要接收的属性名第二组:在父组件中使用行内自定义 attribute传值注意点: prop中的属性不能有大写字母,不要使用驼峰命名。建议使用-作为分隔符。原因:行内自定义属性attribute不支持大写父子propsdataprops父组件App.vue1.组件本质相当于一个自定义标签,也支持v-for列表渲染2.组件语法要求很严格:v-for。
2022-09-20 20:17:43 933
原创 vue基础二
v-model.lazy : 在change时触发而非inupt时(失去焦点或enter键的时候才会绑定数据)v-model.number : 输入字符串转为有效的数字 (有效:能转数字就转,不能转就不转)v-model.trim : 去掉字符串首尾空格。
2022-09-17 20:25:01 606
原创 vue基础一
1.挂载点el作用 : 告诉vue实例,你要将data中的数据渲染到哪一个视图2.注意点(1)挂载点可以使用 id选择器(vue推荐使用) 类选择器 标签选择器开发中基本上都是id选择器,保证HTML标签唯一性如果你希望data中的数据能够对多个元素生效,可以将vue实例挂载到父元素中(2)如果选择器选中了多个元素,只会选择第一个元素(3)挂载点不能设置为html和body标签 (程序报错)
2022-09-15 20:23:05 2319
原创 Promise语法与事件循环Event Loop
promise本质不是控制异步代码的执行顺序(无法控制) ,而是控制异步代码结果处理的顺序promise本身只是一个容器,真正异步的是它的两个回调resolve()和reject()1.promise对象有三个状态.a. pending(进行中)b. fulfilled(已成功)c. rejected(已失败)2.Promise对象的状态改变, 只有两种可能:a. 从pending变为fulfilled此时应该执行 resolve();b. 从pending变为rejected。
2022-09-12 20:18:20 427
原创 npm包管理工具与ES6官方模块化规范
npm有两种含义 :第一种: 包管理工具node package manager第二种:npm网站代码托管平台1.npm全称node package manager官方推出的包管理工具不需要额外安装,安装node之后自带因为服务器不在国内,所以有时候安装特别慢,甚至无法成功2.npmhttps://www.npmjs.com/类似于gitthub,是一个全球免费的代码托管平台与github不同点github : 支持任何编程语言,任何平台npmjs : 只为nodejs服务初始化、安装、导入使用1.初始化:
2022-09-11 19:59:19 538
原创 nodejs 入门
1.Node.js官网地址:Node.js中文:API 文档 | Node.js 中文网1.Node.js 是一个构建于 Chrome V8引擎之上的一个Javascript 运行环境Node是一个运行环境,作用是让js拥有开发服务端的功能2.nodejs的作用 : 使用js语言开发服务器说大白话: 做后台事的,抢java和python饭碗1.npm全称node package manager官方推出的包管理工具不需要额外安装,安装node之后自带。
2022-09-06 20:15:51 398
原创 ajax axios框架使用
axios(阿克休斯) 官网 :axios是什么 : 一个js框架,用于发送ajax请求(底层使用XMLHttpRequest)为什么要学习axios : (1)后面vue课程,我们使用axios发送ajax请求 (2)大家今后实际开发也是使用axios发送ajax请求。......
2022-08-25 20:03:40 260
原创 ajax 服务器的概念&初识 Ajax
1.服务器就是提供某种服务的电脑(机器)(计算机)2.如何让电脑提供某种服务呢?安装软3.综上所述,服务器就是某些安装了特殊软件,可以提供某些服务的电脑。常见的服务器有以下几种数据库服务文件服务多媒体服务(音视频)邮件服务Web服务4.要想让你的电脑成为一台Web服务器,我们只需要安装对应的软件即可。浏览器和服务器之间的每一次交互,都是由三个部分组成请求(浏览器发起请求,服务器接收)处理(服务器处理这个请求)响应(服务器响应数据给浏览器)浏览器访问服务器的几种方式
2022-08-24 20:06:04 385
原创 JavaScript 高级 作用域&解构&箭头函数
作用域(scope)规定了变量能够被访问的“范围”,离开了这个“范围”变量便不能被访问,作用域分为全局作用域和局部作用域。
2022-08-23 14:28:32 148
原创 JavaScript 高阶技巧
对于字符串类型,浅复制是对值的复制,对于对象来说,浅复制是对对象地址的复制,并没 有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会 改变,而深复制则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。首先浅拷贝和深拷贝只针对想Object,Array这样的复杂对象,简单来说,浅拷贝只复制一层对象的属性,二深拷贝则复制了所有的层级。构造函数,原型函数,字面量对象中函数,dom事件函数。深拷贝:拷贝的是对象,不是地址。
2022-08-21 20:57:02 295
原创 JavaScript 进阶 深入面向对象
面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次 调用就可以了。面向过程,就是按照我们分析好了的步骤,按照步骤解决问题。面向对象是以对象功能来划分问题,而不是步骤。面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。编程思想-面向过程和面向对象的对比。
2022-08-20 21:00:39 255
原创 JavaScript 进阶 构造函数&数据常用函数
1.1 构造函数构造函数是专门用于创建对象的函数,如果一个函数使用new关键字调用,那么这个函数就是构造函数。创建对象有三种方式1.利用对象字面量创建对象2. 利用 new Object 创建对象3. 利用构造函数创建对象总结:使用new关键字调用函数的行为被称为实例化实例化构造函数时没有参数时可以省略()构造函数的返回值即为新创建的对象构造函数内部的return返回的值无效!注:实践中为了从视觉上区分构造函数和普通函数,习惯将构造函数的首字母大写。
2022-08-19 21:02:18 220
原创 Webapls 正则
正则表达式检测查找 test方法和exec方法有什么区别? test方法 用于判断是否有符合规则的字符串,返回的是布 尔值 找到返回true,否则false exec方法用于检索(查找)符合规则的字符串,找到返 回数组,否则为 null。...
2022-08-14 14:39:50 76
原创 Webapis Bom操作
这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作 DOM 而诞生的。这样所导致的问题是: 如 果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。⚫ 像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的。➢ href 属性获取完整的 URL 地址,对其赋值时用于地址的跳转。➢ search 属性获取地址中携带的参数,符号?...
2022-08-12 21:05:11 100
原创 Webapis Dom节点&移动端滑动
ECMAScript 中内置了获取系统时间的对象 Date,使用 Date 时与之前学习的内置对象 console 和 Math 不同,它需要借助 new 关键字才能使用。
2022-08-10 20:16:30 104
原创 Webapis Dom事件基础
就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为 绑定事件或者注册事件比如鼠标经过显示下拉菜单,比如点击可以播放轮播图等等。
2022-08-07 20:04:04 61
原创 webapis Dom获取&属性操作
webapis的作用和分类DOM(Document Object Model)是将整个 HTML 文档的每一个标签元素视为一个对象,这个对象下包含了许多的属性和方法,通过操作这些属性或者调用这些方法实现对 HTML 的动态更新,为实现网页特效以及用户交互提供技术支撑。简言之 DOM 是用来动态修改 HTML 的,其目的是开发网页特效及用户交互。变量声明有三个 var let 和 const我们应该用那个呢?首先var 先排除,老派写法,问题很多,可以淘汰掉…建议:const 优先。...
2022-08-06 21:03:42 96
原创 JS 基础第五部分 对象
对象是 JavaScript 数据类型的一种,之前已经学习了数值类型、字符串类型、布尔类型、undefined。对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。
2022-08-03 20:05:06 42
原创 js基础第三部分,for语句和数组
共同点都能实现多分支选择,多选1大部分情况下可以互换区别switch…case语句通常处理case为比较的情况,而if…else…语句更加灵活,通常用于(大于,等于某个范围)。switch语句进行判断后直接执行到程序的语句,效率更高,而if…else语句有几种判断条件,就得判断多少次switch一定要注意必须是===全等,一定注意数据类型,同时注意break否则会有穿透效果结论当分支比较少时,if…else语句执行效率高。...
2022-07-31 20:04:47 94
原创 JS基础第二部分
赋值运算符对变量进行赋值的运算符已经学过的赋值运算符=将等号右边的值赋予给左边,要求左边必须是一个容器其他赋值运算符+=使用这些运算符可以在对变量赋值时进行快速操作1.=赋值运算符执行过程?将等号右边的值赋予给左边,要求左边必须是一个容器2.+=出现是为了简化代码,比如让letnum=10,num加5怎么写呢?num+=5一元运算符自增符号++作用让变量的值+1自减符号--作用让变量的值-1比较运算符比较运算符。...
2022-07-29 21:03:27 293
原创 js基础第一部分
交换两个变量的值JavaScript程序不能独立运行,它需要被嵌入HTML中,然后浏览器才能执行JavaScript代码。通过script标签将JavaScript代码引入到HTML中.通过script标签包裹JavaScript代码一般将JavaScript代码写在独立的以.js结尾的文件中,然后通过script标签的src属性引入如果script标签使用src属性引入了某.js文件,那么标签的代码会被忽略!!!...
2022-07-28 20:43:23 66
原创 vw的含义和使用
因为加了弹性容器,里面所有的弹性盒子都会沿着主轴一行显示,不会换行。我们设计稿是iphone678是375px,vw把屏幕划分了100等份,则1vw=3.75px。vw永远是以视口的宽度为准。假如父盒子是200px,则1%是2px。--vw和vh一般不一起使用,不然做出来的盒子是长方形-->--宽度和高度分成了100等份-->vw就是视口的宽度,vw是个相对单位。拖动的时候,拖动的是tabs-list。1vw=1/100屏幕的宽度。...
2022-07-24 19:42:30 2869
原创 rem和less的含义和使用
移动端的适配方案flex+rem单位做适配效果(比如淘宝和小米移动端)当前市场最多flex+viewportwidth/vh单位做适配效果(比如B站移动端)新兴,马上的一个趋势让flex做布局(盒子摆放),让rem或者vw/vh实现网页元素的尺寸(宽度和高度)适配屏幕。......
2022-07-23 21:29:03 249
原创 flex布局之设置主轴方向
主轴默认是水平方向,侧轴默认是垂直方向修改主轴方向属性rowcolumn语法column;修改完毕,主轴是Y轴,侧轴是X轴。
2022-07-21 19:52:33 2378
原创 视口和flex布局
PC端屏幕大,网页固定版心端浏览器繁多,更多考虑兼容性问题。(布局浮动+定位+标准流)移动端手机屏幕小,网页宽度多数为100%,是适配手机屏幕宽度移动端则基本不需要考虑兼容性问题,放心大胆使用CSS新特性。...
2022-07-20 20:01:44 125
原创 空间转换3D和动画(简介)
3D坐标系比2D多了一个Z轴。透视的作用空间转换时,为元素添加近大远小、近实远虚的视觉效果语法800px;语法注意事项取值范围经常在800px~1200px之间。一定给添加透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离。translateZ的距离越靠近我们,盒子越大.z轴面对自己方向是正值,也就是值越大盒子越靠近我们....
2022-07-18 20:53:23 103
原创 变形 transform(2D)and 渐变
1.位移translatetranslate可以让盒子沿着x轴或者y轴来移动和margin的区别margin移动盒子影响其余的盒子。把其他人挤走。移动百分比时,是浏览器的百分比.位移translate移动盒子影响其他的盒子。不脱标。移动百分比时,是自身盒子的百分比.应用盒子水平和垂直可以让一个子盒子在父盒子里面水平和垂直居中。2.旋转rotate旋转可以让盒子旋转角度。如果是正度数,则是顺时针旋转如果是负度数,则是逆时针旋转3.缩放scale语法影响其他的盒子。...
2022-07-17 21:11:40 209
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人