JavaScript与Vue基础教程系列
关注
分享
扫一扫
文章平均质量分 91
JavaScript与Vue入门级零基础教程，每一个知识点都有代码举例说明，通俗易懂，实战为先。
哪 吒
2022博客之星Top1，现象级专栏 《Java基础教程系列》作者，专注Java硬核干货分享，立志做到Java赛道全网Top N
展开
-
JavaScript进阶：如何写出优雅的JavaScript代码
目录一、可维护性代码二、编码规范-可读性三、变量和函数命名四、松散耦合1、解耦HTML和JavaScript2、解耦CSS和JavaScript3、解耦应用程序逻辑和事件处理程序五、编码惯例六、作用域意识1、避免全局查找2、不适用with语句七、优化循环1、简化终止条件2、简化循环体3、使用后测试循环4、展开循环八、语句最少化1、多个变量声明2、插入迭代性值3、使用数组和对象字面量九、优化DOM交互1、实时更新最小化2、使用innerHTML3、使用委托事件4、注意HTMLCollection一、可维护性原创 2022-04-05 22:10:22 · 13930 阅读 · 48 评论 -
精通JavaScript？关于JavaScript的内存与性能问题，你又了解多少呢？
目录一、何为JavaScript内存与性能二、谈谈关于innerHTML的性能问题？1、使用innerHTML的反面教材2、如何解决三、如何解决类似按钮过多问题？四、事件委托的优点有哪些？五、删除事件处理程序1、删除带有事件处理程序的元素2、页面卸载也会导致内存中残留引用的问题六、如何解决循环中动态添加div，造成的死循环问题？表达式①表达式②表达式③一、何为JavaScript内存与性能因为事件处理程序在现代web应用中可以实现交互，所以很多开发者都会错误地在页面中大量使用它们，在JavaScript原创 2022-03-20 16:17:20 · 13013 阅读 · 81 评论 -
JavaScript面试题看这一篇就够了，简单全面一发入魂（持续更新 step2）
1、如何解决循环中动态添加div，造成的死循环问题？表达式①：let divs = document.getElementsByTagName("div");for(let i = 0;i<divs.length;++i){ let div = document.createElement("div"); document.body.appendChild(div);}表达式②：let divs = document.getElementsByTagName("div");for(原创 2022-04-25 08:53:51 · 7095 阅读 · 7 评论 -
JavaScript看这一篇就够了，简单全面一发入魂
文档对象模型（DOM,Document Object Model）是一个应用编程接口（API），用于在HTML中使用扩展的HTML。DOM将整个页面抽象为一组分层节点。DOM通过创建表示文档的树，让开发者可以随心所欲的控制网页的内容和结构。使用DOM API可以轻松地删除、添加、替换、修改节点。对浏览器而言，DOM就是使用ECMAScript实现的，如今已经成为JavaScript语言的一大组成部分。言而言之，DOM提供与网页内容交互的方法和接口。原创 2022-03-09 12:22:33 · 37337 阅读 · 53 评论 -
Vue为何弃用经典的Ajax，选择新技术Axios？
一、选择什么网络模块?发送网络请求的方式有很多，下面来简单介绍一下：1、传统的Ajax是基于XMLHttpRequest（XHR）2、jQuery - Ajax为什么不适用jQuery的Ajax？在vue开发中不需要使用jQuery，因为jQuery很重量级。3、vue官方在Vue1.x的时候，推出了Vue-resource。Vue-resource角jQuery轻便很多，但在vue2.x之后，尤雨溪对Vue-resource不维护了，简言之，就是弃用了。4、尤雨溪推荐使用axios。二、原创 2022-02-10 07:57:24 · 34924 阅读 · 70 评论 -
JavaScript数组你都掰扯不明白，简历上你敢写精通JavaScript？
目录一、如何判断一个对象是不是数组？二、填充方法fill()1、ES6新增了两个方法2、fill()三、复制方法```copyWithin()```四、栈方法五、队列方法六、排序方法七、操作方法八、搜索和位置方法1、严格相当搜索2、断言函数九、迭代方法1、every()和some()2、filter()3、map()4、foreach()十、归并方法reduce()一、如何判断一个对象是不是数组？在只有一个全局作用域的时候，使用instanceof操作符就足矣：if(value instanceof原创 2022-03-06 12:10:50 · 16830 阅读 · 54 评论 -
【30天精通JavaScript ~ 网络篇】JavaScript 网络请求与远程资源
一、Ajax的诞生2005年，Jesse James Garrett撰写了一篇文章《Ajax - A New Approach to Web Applications》，这篇文章中描绘了一个被称为Ajax（Asynchronous JavaScript+XML，即异步JavaScript+XML）的技术。这个技术涉及发送服务器请求额外数据而不刷新页面，从而实现更好地用户体验。Garrett解释了这个技术怎样改变自Web诞生以来就一直延续的传统单击等待的模式。把Ajax推到历史舞台上的关键技术是XMLHt原创 2022-04-10 15:08:54 · 7767 阅读 · 1 评论 -
JavaScript面试题看这一篇就够了，简单全面一发入魂（持续更新 step1）
1、BOM、COM、DOM有什么区别？2、JavaScript中代码后加不加分号；有什么区别？3、如何判断一个对象是不是数组？在只有一个全局作用域的时候，使用instanceof操作符就足矣：if(value instanceof Array){ //操作数组}使用instanceof的前提是只有一个全局执行上下文，如果网页里有多个框架，则可能涉及两个不同的全局上下文，因此就会有两个不同版本的Array构造函数。如果要把数组从一个框架传到另一个框架，则这个数组的构造函数将有别于第二个框架内本原创 2022-03-15 07:43:30 · 15888 阅读 · 24 评论 -
JavaScript零基础入门 1：JavaScript表格简介
在生活中经常会使用表格来表示一些格式化的数据：比如 ：课程表 银行对账单 人名单同样在网页中也可以使用表格来表示一些格式化的数据。使用table标签来创建一个表格。一、简单表格1、代码实例<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <!-...原创 2021-11-03 09:24:50 · 10162 阅读 · 19 评论 -
JavaScript零基础入门 2：JavaScript数据类型简介
一、JavaScript中的数据类型数据类型指的就是字面量的类型，JavaScript一共有六种数据类型：String字符串 Number数值 Boolean布尔值 Null空值 Undefined未定义 Object对象其中StringNumberBooleanNullUndefined属于基本数据类型，而Object属于引用数据类型。1、String在JS中字符串需要使用引号引起来 使用双引号或单引号都可以，但是不要混着用 引号不能嵌套，双引号不能放双...原创 2021-11-05 08:03:24 · 12855 阅读 · 9 评论 -
JavaScript零基础入门 3：javascript运算符有哪些
一、逻辑运算符1、! 非!可以用来对一个值进行非运算，所谓非运算就是值对一个布尔值进行取反操作，true变false，false变true。如果对一个值进行两次取反，它不会变化； 如果对非布尔值进行元素，则会将其转换为布尔值，然后再取反； 所以我们可以利用该特点，来将一个其他的数据类型转换为布尔值； 可以为一个任意数据类型取两次反，来将其转换为布尔值；原理和Boolean()函数一样；2、&& 与&&可以对符号两侧的值进行与运算并返回结果。运算规则原创 2021-12-08 22:24:56 · 9904 阅读 · 3 评论 -
JavaScript零基础入门 4：javascript对象有哪些
???? Java学习路线配套文章：Java学习路线总结，搬砖工逆袭Java架构师（全网最强）???? 基础推荐：Java基础教程系列???? 实战推荐：Spring Boot基础教程???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???????? 扫描主页左侧二维码，加入群聊，一起学习、一起进步???? 欢迎点赞 ???? 收藏 ⭐留言 ????目录一、对象1、对象的分类2、创建对象3、属性4、读取对象中的属性5、修改对象的属性值6、删除对象的原创 2021-12-09 22:33:51 · 7181 阅读 · 24 评论 -
JavaScript零基础入门 5：JavaScript函数详解
一、对象1、对象的分类（1）内建对象由ES标准中定义的对象，在任何的ES的实现中都可以使用比如：Math String Number Boolean Function Object....（2）宿主对象由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象比如 BOM DOM（3）自定义对象由开发人员自己创建的对象2、创建对象使用new关键字调用的函数，是构造函数constructor，构造函数是专门用来创建对象的函数，使用typeof检查一个对象时，会返回ob原创 2021-12-10 23:33:44 · 5122 阅读 · 0 评论 -
JavaScript零基础入门 6：JavaScript数组详解
一、垃圾回收（GC）当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，所以这种垃圾必须进行清理。在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收的操作，我们需要做的只是要将不再使用的对象设置null即可。二、数组（Array）1、什么是数组数组也是一个对象，它和我们普通对象功能类似，也是用来存储一些值的，不同的是普通对象是使用字符串作为属性名原创 2021-12-14 23:08:06 · 7797 阅读 · 4 评论 -
JavaScript零基础入门 7：JavaScript基础函数
一、日期1、DateJavaScript中用Date()函数获取时间。var date = new Date();2、创建一个指定的时间对象需要在构造函数中传递一个表示时间的字符串作为参数，日期的格式月份/日/年时:分:秒var date2 = new Date("11/2/2021 18:15:00");3、getDate()获取当前日期对象是几日。4、getDay()获取当前日期对象时周几，会返回一个0-6的值，0表示周日，1 表示周一。。。5、g...原创 2021-12-19 10:05:48 · 9755 阅读 · 5 评论 -
JavaScript零基础入门 8：JavaScript通过document获取节点元素
???? Java学习路线配套文章：Java学习路线总结，搬砖工逆袭Java架构师（全网最强）???? 基础推荐：Java基础教程系列???? 实战推荐：Spring Boot基础教程???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???????? 扫描主页左侧二维码，加入群聊，一起学习、一起进步???? 欢迎点赞 ???? 收藏 ⭐留言 ????目录一、document二、onload三、获取节点元素1、innerHTML2、getElemen原创 2021-12-25 14:03:37 · 6105 阅读 · 2 评论 -
JavaScript零基础入门 9：JavaScript读取元素的样式
一、getComputedStyle()1、getComputedStyle()是window的方法，可以获取元素当前的样式2、两个参数要获取样式的元素可以传递一个伪元素，一般都传null该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象样式名来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值。3、代码实例<!DOCTYPE html><html> <head> <meta charset="UTF-8"&原创 2021-12-23 07:56:11 · 5737 阅读 · 53 评论 -
JavaScript零基础入门 10：JavaScript中的正则表达式
一、正则表达式1、语法var 变量 = new RegExp("正则表达式","匹配模式");使用typeof检查正则对象，会返回object。var reg = new RegExp(“a”); 这个正则表达式可以来检查一个字符串中是否含有a。在构造函数中可以传递一个匹配模式作为第二个参数，i 忽略大小写，g 全局匹配模式。var reg = new RegExp("ab","i");2、正则表达式的方法test()使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，如果符合则原创 2022-01-03 22:22:53 · 5340 阅读 · 1 评论 -
JavaScript零基础入门 11：JavaScript实现图片上传并预览
一、前端界面是通过jqgrid展示的jqgrid是典型的B／C架构（浏览器／服务器模式），服务器端只需提供数据管理，浏览器只需负责数据显示。jqGrid是用ajax实现对请求和响应的处理，支持局部实时刷新。二、jqgrid特性1、通过配置url地址数据显示格式2、支持行编辑，列搜索过滤3、支持分页4、添加表单支持文件上传5、链式调用三、代码实例1、jqgrid页面展示$(document).ready(function () { $("#gridTable").jqGrid({原创 2021-12-28 09:21:07 · 8435 阅读 · 10 评论 -
JavaScript零基础入门 12：JavaScript整合JqGrid完整实例
之前写过一篇过于ajax异步加载jqgrid的文章，那个只是一个特殊的情况，如果创建不同数据库表的jqgrid，必须分别写servlet，dao层和连接池，很麻烦，今天我写了一个万能的写法，客官只要在前台js中写入表格名称和字段名称即可实现功能！下面就是代码实例，关于jqgrid，ajax的介绍这里暂时不多说，有不懂的可以参考我之前的文章！一、代码实例1、JSP<%@ page contentType="text/html;charset=UTF-8" language="java" %>原创 2022-01-10 23:17:40 · 3861 阅读 · 0 评论 -
JavaScript零基础入门 13：DOM规范中的MutationObserver接口
目录一、MutationObserver接口二、MutationObserver基本用法1、observe()方法2、回调与MutationRecord3、disconnect()方法4、复用MutationObserver三、MutationObserverInit与观察范围四、异步回调与记录队列五、性能、内存与垃圾回收1、 MutationObserver的引用2、MutationRecord的引用一、MutationObserver接口不久前添加到DOM规范中的MutationObserver接口原创 2022-03-24 09:08:10 · 6084 阅读 · 26 评论 -
JavaScript基础知识总结 14：学习JavaScript中的File API、Streams API、Web Cryptography API
目录一、Atomics和SharedArrayBuffer二、原子操作基础1、算术及位操作方法2、原子读和写3、原子交换4、原子Futex操作与加锁三、跨上下文消息四、Encoding API五、File API和Blob API1、File类型2、FileReader类型3、FileReaderSync类型4、Blob与部分读取六、Streams API1、应用场景2、理解流一、Atomics和SharedArrayBuffer多个上下文访问SharedArrayBuffer时，如果同时对缓冲区执行操原创 2022-03-27 11:44:32 · 12175 阅读 · 79 评论 -
JavaScript基础知识总结 15：JavaScript客户端存储
目录一、cookie1、限制2、cookie的构成二、Web Storage三、sessionStorage对象四、localStorage对象五、IndexedDB1、数据库2、对象存储3、事务4、插入对象5、通过游标查询6、索引六、总结七、JavaScript思维导图一、cookieHTTP cookie通常也叫作cookie，最初用于在客户端存储会话信息。这个规范要求服务器在响应HTTP请求时，通过发送Set-Cookie HTTP头部包含会话信息。1、限制cookie是与特定域绑定的，设置c原创 2022-05-04 10:00:41 · 7396 阅读 · 21 评论 -
JavaScript基础知识总结 17：JavaScript表单脚本
目录一、表单基础二、提交表单三、表单字段的公共属性、方法、事件1、表单字段的公共属性2、表单字段的公共方法3、表单字段的公共事件四、输入过滤，屏蔽字符五、剪切板事件六、自动切换七、HTML5约束验证API1、必填字段required2、更多输入类型3、数值范围4、输入模式5、检测有效性6、禁用验证八、选择框编程一、表单基础Web表单在HTML中以元素表示，在JavaScript中则以HTMLFormElement类型表示。HTMLFormElement类型继承自HTMLElement类型，因此拥有与其原创 2022-07-14 00:32:56 · 4084 阅读 · 1 评论 -
JavaScript基础知识总结 18：dom基本操作
JavaScript精品教程系列，浅显易懂原创 2022-09-27 21:41:38 · 4997 阅读 · 1 评论 -
Vue基础知识总结 1：Vue入门
Vue基础教程系列，打造精品专栏。原创 2020-06-23 10:49:14 · 86258 阅读 · 41 评论 -
Vue基础知识总结 2：vue 动态绑定
大家好，我是哪吒，一个热爱技术的年轻人，架构师，是每一个程序员的梦想，因此，作为一个Java后端程序员，突击前端，迫在眉睫，而目前来说，最火的前端框架无疑就是Vue，我们公司前端也都是Vue，每次与前端联调的时候，因为对前端知识的匮乏，总是很无奈，不破不立，我决定花49天时间，系统的学习一下Vue。因为酷爱斗破苍穹，这一系列就按照斗破苍穹中萧炎的成长历程为系列标题吧。原创 2021-07-15 07:30:44 · 18129 阅读 · 70 评论 -
Vue基础知识总结 3：vue常用标签
一、计算属性1、合并两个字符串<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app">{{fullName}}</div><script src="../js/vue.js">&.原创 2021-07-19 07:36:12 · 20946 阅读 · 67 评论 -
Vue基础知识总结 4：vue组件化开发
一、函数式编程1、函数式编程简介函数式编程是种编程方式，它将电脑运算视为函数的计算。函数编程语言最重要的基础是λ演算（lambda calculus），而且λ演算的函数可以接受函数当作输入（参数）和输出（返回值）。和指令式编程相比，函数式编程强调函数的计算比指令的执行重要。和过程化编程相比，函数式编程里函数的计算可随时调用。filter函数自动过滤对象的所有元素，返回true才会存入指定对象；Reduce函数对数组内部的所有元素进行汇总；2、代码实例<!DOCTYPE原创 2021-07-21 23:54:13 · 16591 阅读 · 70 评论 -
Vue基础知识总结 5：vue实现树形结构
一、前言开发过程中，涉及到多级菜单的应用，树形结构比较常见，今天就做了一个Spring Boot + Vue + Element-UI 实现树形结构的一个小demo。Tree组件最适合的结构是无序列列表ul，创建一个递归组件Item表示Tree选项，如果当前Item存在 children，则递归渲染子树，以此类推;同时添加一个标识管理理当前层级item的展开状态。效果展示：二、代码实例1、数据库设计2、实体类一般树形结构都是创建若干层实体类，然后通过list结合在一起，面原创 2020-07-07 23:49:43 · 17126 阅读 · 6 评论 -
Vue基础知识总结 6：vue双向绑定原理
需求分析：通过输入框，双向绑定文本框显示。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <cpn :number1="num1" :number2="num2"/><原创 2021-10-02 10:09:43 · 16407 阅读 · 41 评论 -
Vue基础知识总结 7：插槽slot与vue导入导出
一、插槽slot插槽slot会使代码更有扩展性；插槽slot也就是预留一些空间；如何封装京东标头类似的组件呢？它们有很多区别，但是有很多共性； 如果每一个单独封装一个组件，显然不合适，比如每个页面都返回，这部分内容我们就要重复去封装； 但是，如果我们封装成一个，好像也不合理，有些左侧是菜单，有些是返回，有些中间是搜索，有些是文字等等。...原创 2021-10-03 18:02:39 · 6813 阅读 · 36 评论 -
Vue基础知识总结 8：Node.js简介
一、axios简介axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端在浏览器中可以帮助我们完成 ajax请求的发送 在node.js中可以向远程接口发送请求二、代码实例1、获取数据<script src="vue.min.js"></script><script src="axios.min.js"></script>注意：测试时需要开启后端服务器，并且后端开启跨域访问权限2、模拟后原创 2020-06-23 16:05:22 · 6345 阅读 · 1 评论 -
Vue基础知识总结 9：vue webpack打包原理
???? Java学习路线：搬砖工逆袭Java架构师???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???????? 扫描主页左侧二维码，加入群聊，一起学习、一起进步???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 一、前端模块化webpack是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系。并且不仅仅是JavaScript文件，还有CSS、图片、json文件等等，在webpack中都可以被当做模块来使用。二、打原创 2021-10-06 19:41:33 · 24787 阅读 · 126 评论 -
Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目
???? Java学习路线：搬砖工逆袭Java架构师???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???????? 扫描主页左侧二维码，加入群聊，一起学习、一起进步???? 欢迎点赞 ???? 收藏 ⭐留言 ???? ...原创 2021-10-08 19:37:08 · 41290 阅读 · 105 评论 -
Vue基础知识总结 11：前端路由vue-router
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。原创 2021-10-13 07:32:09 · 44129 阅读 · 143 评论 -
Vue基础知识总结 12：ES6 promise的用法总结
vue在引用路径的时候可以用 ./ 的写法引用如下：import './api/index'这个代表在相同文件下绝对路径的意思。项目中还有常见的@用法：import util from '@/assets/js/util'这个@是在 webpack.base.conf.js 文件里配置的，找到下面这段话 resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'),原创 2022-02-03 08:55:28 · 9831 阅读 · 15 评论 -
Vue基础知识总结 13：从零开始搭建Vue项目
一、创建项目vue create supermall1、报错。vue : 无法加载文件 C:\Users\78571\AppData\Roaming\npm\vue.ps1，2、开始处搜索powershell，以管理员的身份运行3、输入下面的指令：set-ExecutionPolicy RemoteSigned4、再次创建项目，成功！二、GitHub托管代码1、创建仓库2、GitHub仓库创建成功三、项目提交到GitHub1、第一种方式git clone https://原创 2022-02-24 07:14:12 · 13753 阅读 · 12 评论 -
Vue基础知识总结 14：Vuex是做什么的?
官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用 集中式存储管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex状态管理图例简单的案例...原创 2022-05-11 09:10:11 · 10273 阅读 · 4 评论