- 博客(75)
- 收藏
- 关注
RSS订阅原创 10个有用的JavaScript单行代码
1.轻松滚动到顶部如果您想使用 JavaScript 代码创建一个滚动到顶部的按钮，方法 scrollTo() 将帮助您实现这一点。该方法可以接受两个坐标作为参数，即水平轴的像素（“x”）和垂直轴的像素（“y”）。因此，为了使该方法允许我们滚动到文档的顶部，您只需将两个坐标的值都设置为 0。就像下面的代码示例一样：
2023-02-01 09:16:50
430
1
原创 vue自定义指令
注意:vue3的全局概念与vue2不同,vue3中的全局概念不在同一个环境就都属于vue语法的全局环境,vue3全局指的是由一个createApp作为全局启动代码,完成多个vue实例的加载,此时对于这些vue实例而言全局环境为创建APP。可以看到下图的样式如果写在全局指令里,就会影响他的样式,因为指令是可以多次调用,但是每个对图片的样式设置是不同的,为了避免这种情况出现,不要在指令里对样式进行处理,而是在行内直接对样式进行添加绑定。看个小案例,有一个盒子,需要使用指令进行拖拽,如何完成那,详情代码如下。
2022-09-14 15:47:51
345
原创 vue的模板属性和渲染方法配置
template 的三种模板定义方案,第一种不能数据绑定,不推荐,一般使用都会采取剩余两种方案,注意template 是无意义标签,不会被渲染到页面。是一种概念,为将目标所需的UI听过数结构,虚拟的表示出来,保存在内存中,然后将真实的DOM与之保存同步,他是一种模式,没有一个标准的实现。使用template定义vue模板实例,优先级大于页面挂载,template构成的模板,最终会替换到。必须h来完成响应式关联,是vue在render 函数中提供的用于完成响应式关联的DOM构建工具。
2022-09-14 15:46:05
970
原创 Vue的应用方法，实例属性，实例方法
vue的一个应用程序开发时只能被挂载一次,不能反复挂载操作,所以unmount卸载就不能再。1.nextTick的作用是什么:将执行函数体延迟到页面DOM更新完成后执行。warnHandler可以在项目开发完成后,对真个vue的程序错误进行兜底。可以在控制台看到各种方法等等执行的时间线,默认值是true。unmount:卸载应用实例的根组件,页面容器也会被卸载。errorHandler:修改程序运行报错时的执行方法。是以new vue的方式完成对应容器的。errorHandler和。
2022-09-14 15:45:10
356
1
原创 如何创建自己的html快捷
第一步:建立新的html页面,增加自己需要常用的代码,写完后,选中所有的"",先选中一个".Ctrrl+D全部选中,在"前面添加\。第三步:将鼠标定位在第一个
2022-09-14 15:43:45
485
原创 vue2.0-3.0的区别
composition Api 语法(组合式)options Api 语法(选项式)+ common 模块语法脚本。vue的JS脚本根据应用场景分成如下几类。- node的ES环境。+ es 模块语法脚本。options Api 语法。- 浏览器的ES环境。+ 模块化环境的运行使用脚本。+ 浏览器使用的脚本文件。template 语法。template 语法。+ ES 模块语法脚本。
2022-09-13 19:26:32
376
原创 RESTFULL请求模式
动态路径知识在服务机器接口中构建路径解构,对应的动态路径的位置客户以填充任意数据。rest 参数规则: restfull请求模型下一种路径指向性构建规则,为后端提供统一接口后的功能区分操作。html接收地址,调用数据地址,动态路由采用模板字符串拼接的方式,使用传参的形式将id传递过来。通过为指定路径增加动态路径的方式来实现地址的区分。restfull 请求:约定的开发习惯.对相同的服务器请求地址赋予不同的请求类型的不同操作。建立userriuter.js页面接口,用于获取数据地址,以及数据请求类型。
2022-09-13 19:25:29
606
原创 Vue的应用方法，实例属性，实例方法
总结errorHandler和warnHandler可以在项目开发完成后,对真个vue的程序错误进行兜底。vue的一个应用程序开发时只能被挂载一次,不能反复挂载操作,所以unmount卸载就不能再挂载回去。1.nextTick的作用是什么:将执行函数体延迟到页面DOM更新完成后执行。可以在控制台看到各种方法等等执行的时间线,默认值是true。unmount:卸载应用实例的根组件,页面容器也会被卸载。warnHandler:修改程序运行警告是的执行方法。是以new vue的方式完成对应容器的。
2022-09-09 15:53:44
588
原创 computed计算属性
vue的计算属性 computed有缓存数据的效果,,利于减少性能的消耗,但是当真实数据(data)发生改变,计算属性才会更新。+ 计算属性的缓存是指在依赖变量未发生变换时，当前vue容器中多次使用不会重新执行方法，而是读取计算后的缓存结果。3. 通过计算属性的双向操作功能语法，可以将页面具有双向功能但逻辑不同的操作模拟成普通属性的双向功能。1. 可以将页面的相关复杂执行逻辑定义于计算中，页面以属性调用的方式简化模板语法的定义。
2022-09-08 15:37:05
970
原创 Vue中父子组件通信方式
使用this.$chidren也可以实现同步父改子,或者父获取子组件的属性值,this.$chidren返回的是一个数组,数组的顺序,是按照了组件在父组件的插入位置决定的。this.$parent返回的就是父组件本身,这种方式是利用父组件本身来修改自己的值,也可以实现多个子组件的值都发生改变.最后发现 用到父组件msgStr的值的两个子组件的值都发生了改变，父组件本身也发生了改变。子改父也可以采用this.$parent的方式修改父组件本身的值。第二种图片是在根路径中的（放在根路径中更加的方便）
2022-09-08 13:31:08
274
原创 使用axios 请求库结合iview组件做登录页面
我们需要在iview中去复制他的样式代码,但是由于他是个人团队维护,所以会出现小部分不能实现的问题,中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。我们只需在homeView黏贴我们复制过来的代码.可以使用接口来实现页面。模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。下述代码为自定义响应式拦截器处理方法。Axios，是一个基于。请求拦截,响应拦截的设置必须基于。它使用原生node.js。t 请求拦截器设置对象。的网络请求库，作用于。
2022-09-06 14:41:12
370
原创 Vue之路由简单运用
我们找到路由的父组件以及子组件还有页面,就可以简单地做个页面跳转了。这篇内容就是帮助同学们简单了解一下路由,并且知道怎么安装。打开文件夹 在路径栏里面输入cmd 打开cmd命令行。还会跳出一个选项 你可以输入y 回车 也可以直接回车。输入 vue create router-pro。问是否采用最基本的校验更新到package文件？问你eslint的语法规范选择哪种？我们选择保存的时候校验选择第一个。我们选择第一个最基本的格式校验。下面问你什么时候校验语法规范？...
2022-08-05 10:30:17
154
原创 vue组件provide和inject传值
provide放在父组件的,inject是放在子组件的,如果是爷孙之间传值,必须在子孙组件之间引入,才能让孙组件获取爷组件的值,兄弟之间传值建议利用事件总线的方法传值。注意点是他只能后代传值,兄弟之间是不可传值的,...
2022-08-05 10:27:15
722
原创 轮播图动态渲染
因为Vue在更新DOM是异步的,所以数据发生变化,Vue将开启一个异步更新,视图要等待数据变化完,在统一更新,我们点击事件获取的文本值就是发生变化前的,要解决这个问题就要使用。添加样式的时候一定要注意权重,因为是全局作用域,我们为了提高层级,可以添加scoped让他的作用域变成局部作用域,或者添加!下载图片放在你srcde assets中,并引入图片,这一步一定要注意你的引入地址是不是正确的,一般我们都会将图片放置在src.assets。在子组件添加父组件的props接口,方便我们获取。...
2022-08-04 18:09:55
1487
原创 vue脚手架安装
通过npm run build把写好的代码文件打包，会生成一个dist文件，dist文件的内容就是html 和 js 还有css，我们之前开发使用前端工程化，最后项目上线还是打包压缩成html js和css，最后再把dist里面的文件放到服务器的根路径下，启动服务器，就可以在本地跑起来了，如果是线上的服务器，那么就代表前端发布成功了。...
2022-08-03 21:14:34
253
原创 Vue的计算属性/侦听器/组件用法详解
但是单型数据流,只能父级穿给子级,如果要改变父亲的值,只能用自定义事件this.$emit()props父传子,注意点是加v-bind传的是变量,不加v-bind穿的是字符串。我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用。组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件名要是使用的驼峰写法,就要使用-来分割。注:顺序为组件优先new Vue,组件分为全局组件和局部组件。所有的实例都能用全局组件。...
2022-08-02 21:23:26
427
原创 vue的生命周期
Vue实例从创建到销毁就是生命周期,也就是从开始创建,初始化数据,编译末模板,挂载Dom-渲染,更新-渲染,卸载等一系列的过程,我们称这是Vue的声明周期.打印输出结果.可以看到beforeMount()的h1的data内容乜有渲染出到标签,而mounted()则渲染出来了,在vue实例化对象创建之后,能获取data的数据,比mounted速度更快,能更快的获取接口/请求数据.Vue组件销毁后,vue实例所有的东西都会解绑,事件监听器都会被移除,所有的子实例也会被销毁。Vue的data值改变了会触发。...
2022-07-29 18:30:57
552
原创 Vue.js 的基本语法与属性
Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统,如下,我们已经创建了第一个vue的应用,vue里面的数据与DOM已经建立了关联,所有东西都是响应式的.注意点是我们不在和HTML直接交互了,我们会将HTML通过Vue的el挂载点的方式将div挂载在Vue上,在通过{{}}的方式插值在元素上.这样简单地响应式交互就完成了。v-show在频繁切换的时候,因为是通过样式的控制,对性能的影响更小,适合频繁的切换。在使用v-for时必须提供key,要用字符串或者数值类型的值。...
2022-07-28 20:39:47
271
原创 map集合
但是这个键的范围不限于字符串，各种类型的值（包括对象）都可以当做键。ES6中的map类型时一种储存着许多键值对的有序列表，其中的键名和对应的值支持所有数据类型。给map添加数据，返回添加后的map（给已存在的键赋值后会覆盖掉之前的值）console.log(map.entries())//以键值对的方式。获取某个key的值，返回key对应的值，没有则返回undefined。console.log(map.values())//打印所有的值。console.log(map.keys())//打印所有的键。..
2022-07-27 18:33:38
1510
原创 Set 数据构造函数
Set数据结构,类似数组,所有的数据都是唯一的,没有重复的值,它本身是一个构造函数,主要是用来去重,但是必须转成真数组,我们来学习以下转真数组的两种方法.
2022-07-27 18:28:53
454
原创 项目练习:表格的查改功能
可以尝试着去写一下,这个练习可以尽量运用我们ES6的新增属性来实现,我将实现代码贴在下方,如果想不到也可以参考一下,非常锻炼我们工作中运用到的场景,为了可以更好的模拟,给亲们提个要求,一定要注意更新我们获取的是不是最新的数据,如何获取最新的数据?这些,在敲代码的时候一定要考虑到.第二个点击查看详情,能将desc的内容呈现在我们的页面上(可以利用我们的ID的唯一性来调用数据).在代码如何提高自己的能力,没有捷径,只有不停的内卷,多多练习,加油!第三个要求价格的总计,可以根据我们的筛选而跟着变化价格。...
2022-07-27 11:16:59
63
原创 node包依赖下载管理
分环境的原因:最后我们项目完成需要打包,为了提高性能,一般只打包开发环境,节约性能,而且如果生产环境下载过,注意点是开发环境在次下载,生产环境中的依赖包就会消失,只存在开发环境,但是并不影响我们的...
2022-07-26 21:28:14
1375
原创 ES6数组新增属性
forEach() 遍历数组对数组的每个元素执行一次给定的函数。可以代替for循环遍历每一个数组，有三个参数,第一个参数数组当前的每一个值，第二个数组当前的索引，第三个是数组对象本身。forEach循环,循环结束没有返回值,返回值为undefined.重点:forEach循环回调函数中,不可以return出一个值,但是可以使用return去终止方法的执行...
2022-07-26 21:24:25
2314
原创 ES6模块化导入导出)(实现页面嵌套)
具名方式的导入导出(一定要改变script的type类型:module)第一种导入:利用具名导出方式:不仅可以导出方法还可以导出对象等建立Js代码,注意要以花括号的形式export导出
2022-07-25 18:01:15
426
原创 JavaScript重新实现Git
知识点:产品经理让你开发一个功能，开发到一半说不用开发了你可以把当前开发的代码 先提交到暂存区然后使用 git stash 把暂存区的代码文件隐藏起来突然有一天产品经理说 你之前开发的那个功能又要用了你可以使用git stash pop 把之前隐藏在暂存区的内容拿出来这时候文件会出现在工作区隐藏之前要在版本库存在一个记录git stash 把暂存区的内容隐藏git stash pop 把暂存区隐藏的内容拿出来...
2022-07-20 21:02:06
460
原创 ES6的新增属性
了解一下什么场景我们使用let:1.基本类型的赋值,用let2.主观想让块级作用域生效3.for循环中const1.常用与常量,不改变的值前提:基本类型如 const PI=3.1415986(固定的值)2.与let相同,都具有块级作用域,都有临时性死区(变量不能提前)3.引用类型的值一律用const来声明,但是要确保数据为引用类型js事件循环机制耗时操作等于异步操作,所以会等同步操作完毕后在执行异步操作......
2022-07-19 20:36:17
728
原创 使用jQuery处理Ajax
HTTP协议超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法注意：所有的WWW文件都必须遵守这个标准...
2022-07-18 20:04:16
512
原创 jQuery事件与特效
jQuery中的事件jQuery事件是对JavaScript事件的封装，常用事件分类1.基础事件2.鼠标事件3.键盘事件window事件1.表单事件2.复合事件3.鼠标光标悬停
2022-07-13 19:57:41
594
原创 jQuery基本操作
DOM操作分类DOM操作分为三类：DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()HTML-DOM：用于处理HTML文档，如document.formsCSS-DOM：用于操作CSS，如element.style.color="green"
2022-07-12 19:03:35
506
1
原创 JS面向对象
面向对象相关概念JS是一种基于对象的语言，和其它面向对象语言不同对象引用类型是一种数据结构，将数据和功能组织在一起，常被称为类某个特定引用类型的实例引用类型&对象--模具&实例...
2022-07-11 19:01:06
239
原创 jQuery基础
jQuery的优势体积小，压缩后只有100KB左右强大的选择器出色的DOM封装可靠的事件处理机制出色的浏览器兼容性使用隐式迭代简化编程丰富的插件支持
2022-07-11 18:59:19
258
原创 jQuery基础
jQuery的优势体积小，压缩后只有100KB左右强大的选择器出色的DOM封装可靠的事件处理机制出色的浏览器兼容性使用隐式迭代简化编程丰富的插件支持
2022-07-08 19:38:08
110
原创 JS面向对象高级
原型链继承-prototype属性常见的方法Man.prototype=newPerson();Man的prototype指向一个Person的实例，所有"男人"的实例，就能继承Person了注意如果替换了prototype对象：o.prototype={};要为新的prototype对象加上constructor属性，并将这个属性指回原来的构造函数：...
2022-07-07 19:22:12
124
原创 Ajax概念
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术之前是通过form表单提交数据,但是会造成整个页面的重新加载.
2022-07-06 19:22:24
179
原创 Cookie
Cookie概念Cookie 用于存储页面的用户信息常见例子：自动登录、记住用户名或密码Cookie特性同一个网站中所有页面共享一套Cookie(域名和端口一致,就算路径不一样,也能共享一套Cookie)和localStorage/sessionStorage的区别是,Cookie所占有的数量有限,存储东西比较少,浏览器一般只要存放300个Cookie,每个站点最多存放20个Cookie,大小限制为4KB数量、大小有限过期时间...
2022-07-06 19:21:23
293
原创 表单验证和正则表达式(二)
String类中可以支持正则的方法:search =》返回匹配字符串的下标，否则返回-1match=》如果没有找到任何匹配的文本， 返回 null。否则，它将返回一个数组（依赖于是否具有全局标志 g）replace=》返回一个新的字符串split=》返回一个字符串数组/*search()方法-使用正则表达式来检索字符串中的abc*/......
2022-07-05 19:04:31
249
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人