JavaScript
关注
分享
扫一扫
文章平均质量分 71
我会努力变强的
这个作者很懒，什么都没留下…
展开
-
CSS系统学习之CSS简介
网页的构成一个网页构成有三要素：结构、样式、行为，而结构用HTML控制，行为用JavaScript控制，样式用CSS控制。CSS简介CSS，层叠样式表，网页实际上是一个多层结构，通过CSS可以分别为网页的每一层来设计样式，而我们最终能看到的只是网页的最上面一层，总之就是CSS是用于设置网页中元素的样式。CSS编写的位置CSS编写的地方分为三个，内联样式、内部样式表，外部样式表。内联样式：内联样式又称行内样式，就是写在元素里面的样式，语法是使用元素的style属性来设置，样式的key和value原创 2021-10-21 14:43:08 · 504 阅读 · 0 评论 -
HTML之图片标签、音视频标签
图片标签图片标签<img>的作用是向网页引入一个外部图片，使用img标签来引入一个外部图片，img标签是一个自结束标签。相关属性：src：该属性用于指定外部图片的路径，可以是互联网上的图片，也可以是一个本地图片，用法跟超链接一样。alt：图片的描述，这个描述在默认情况下不会显示，有些浏览器会在图片无法正常显示时，显示该描述，搜索引擎会根据alt中的内容来识别图片，如果不写alt属性，图片就不会被搜索引擎搜索。上图是百度搜索钢铁侠图片出来的结果，因为这个图片有alt属性设置有钢原创 2021-10-21 10:52:00 · 1048 阅读 · 0 评论 -
前端系统学习篇之HTML
前言该分类目的是系统学习前端知识做的笔记，HTML5+CSS3+JavaScript+Jquery+vue+前端工程化等等，使自己成为一个全栈工程师，学完水平能达初级前端开发工程师以上。HTML简介HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言。HTML 不是一种编程语言，而是一种标记语言，浏览器通过解析标签表现出相应的效果。标记语言是一套标记标签。HTML 使用标记标签来描述网页一个网页包含骨架+表现+行为，HTML就是起了一个骨架作用，CSS使用样式来起表现作用，Ja原创 2021-10-21 09:37:50 · 222 阅读 · 0 评论 -
axios介绍和使用
简介本文主要讲解axios的概念和基本使用。axios时目前最流行的ajax封装库之一，用于很方便地实现ajax请求的发送。支持的功能：从浏览器发出 XMLHttpRequests请求。从 node.js 发出 http 请求。支持 Promise API。能拦截请求和响应。能转换请求和响应数据。取消请求。实现JSON数据的自动转换。客户端支持防止 XSRF攻击。先借助json-server创建一个简单的服务，供ajax发送请求，json-server是一个简单的可以接收rest原创 2022-02-21 01:20:51 · 82769 阅读 · 6 评论 -
JavaScript学习之ES6学习之Promise
简介主要介绍Promise新特性的概念和使用。概念：Promise是ES6引入的异步编程的新解决方案，语法上Promise是一个构造函数，用来封装异步操作（也就是回调函数）。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Promise学习</title></head><body> &l原创 2022-02-20 20:59:20 · 539 阅读 · 0 评论 -
Vue路由学习
简介主要介绍路由的理解和概念和Vue路由的基本使用。路由的概念何为路由：路由的本质是一组组key-value的对应关系，多个路由由路由器管理。编码世界中的路由主要分为两类：后端路由：key是路径，value是函数方法（function），用于根据不同的路径，使用不同的函数处理用户提交的请求。工作流程是，后端服务器收到一个请求，路由器会根据请求的路径，在路由规则中找到匹配的函数来处理请求，返回数据给用户。前端路由：key是路径，value是组件（component）。工作流原创 2022-02-19 16:10:05 · 1006 阅读 · 0 评论 -
浏览器本地存储
简介本文主要介绍浏览器的本地存储概念：浏览器的本地存储是指浏览器端通过window.sessionStorage和window.localStorage属性来进行浏览器的本地存储的。一般能存5M左右的数据。说白了就是八个api 的使用。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl原创 2022-02-16 02:06:39 · 1993 阅读 · 0 评论 -
Vue组件学习之事件总线和消息发布订阅
简介主要介绍事件总线的定义和编写方法。事件总线是组件间通信的一种方式，适用于任意组件间的通信，比如毫不相干的两个组件、父子组件间、后代组件等等，都能通信。事件总线有两个特性：是一个vue组件实例或者一个vue实例，充当一个消息中转站，如果A、B组件想要通信，那么A组件存消息到中转站，B消息拿，或者反过来。所有组件都要能获取到事件总线。如果A、B组件间通信，如果A发送数据给B的情况下，需要以下步骤：大前提是，需要创建一个事件总线，通常使用vm实例本身作为事件总线，并把他在一定的时机保存在Vu原创 2022-02-16 01:07:01 · 826 阅读 · 0 评论 -
Vue组件学习之组件自定义事件
主要介绍组件的自定义事件的概念，使用等。何为组件自定义事件：组件自定义事件是一种组件间的通信方式，方向是 子组件====>父组件。使用场景：A是子组件，B是父组件，如果要把B的数据传给A，可以使用props配置项，如果要把A的数据转给B，就要用到组件自定义事件或者使用props加回调函数也可实现。先使用props加回调函数实现子组件传递数据给父组件。main.js：//引入vue依赖import Vue from 'vue'//引入组件Appimport App from '.原创 2022-02-15 22:35:01 · 1305 阅读 · 0 评论 -
Vue组件化学习之scoped
简介主要介绍scoped的作用。先弄一个案例：main.js：//引入vue依赖import Vue from 'vue'//引入组件Appimport App from './App.vue'// 关闭生产提示Vue.config.productionTip = false//创建一个vue实例new Vue({ //这个目前还没学过，先知道他的作用是将app放入容器中。 render: h => h(App), //配置该vue实例管理id为app的容器原创 2022-02-15 21:07:29 · 435 阅读 · 0 评论 -
Vue之插件的介绍
简介主要介绍Vue插件的概念，定义和使用。Vue的插件主要是用于增强功能，可以把它看作是一个工具库，可以提供很多强大的功能，比如一些强大的自定义指令，一些强大的工具方法，过滤器等，我们可以编写或者直接引入别人写的插件，就能获得强大的功能。Vue插件的本质是一个包含install方法的对象，install方法的第一个参数是Vue构造函数对象，第二个及以后的参数是插件使用者传递的数据。代码：main.js：在这里使用定义的插件。//引入vue依赖import Vue from 'vue'//原创 2022-02-15 20:43:54 · 2917 阅读 · 0 评论 -
Vue学习之props配置项
简介主要介绍props配置项的概念，使用等。props的作用是用来接收父组件中传过来的数据。编写步骤有两个：子组件使用props配置项进行属性的接收。父组件使用子组件时以组件标签属性的形式进行数据的传递。子组件使用props配置项进行属性的接收的形式有三种：第一种：简单模式。main.js：//引入vue依赖import Vue from 'vue'//引入组件Appimport App from './App.vue'// 关闭生产提示Vue.config.product原创 2022-02-15 02:30:44 · 1321 阅读 · 0 评论 -
Vue学习之ref属性
简介主要讲解vue中的ref属性。直接先说结论：专门被用来给html元素和子组件注册引用信息的（id属性的替代者）。该属性应用在html元素时，获取的是dom元素对象，如果应用在组件标签上，那么获取的是组件实例对象（vc）。使用方式：打标志：<h1 ref=“xxx”>ref</h1> 或者 <School ref=“xxx”></School>获取：this.$refs.xxx代码：main.js：//引入vue依赖impor原创 2022-02-14 22:01:23 · 5786 阅读 · 0 评论 -
Vue之单文件组件和脚手架
简介主要介绍单文件组件的定义和编写方法和脚手架相关知识介绍。单文件组件的定义是一个文件只有一个组件，使用xxx.vue文件，这个文件是vue团队定义的一种文件类型。xxx.vue文件里面可以使用三个标签：<template></template> 标签，是用于编写结构代码的，html代码。<script></script>标签，是用于编写交互代码的，也就是js。<style></style>标签，是用于编写样式代码的，也就原创 2022-02-14 21:14:56 · 644 阅读 · 0 评论 -
Vue组件化之VueComponent介绍
简介这篇文章主要介绍的是VueComponent函数。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>VueComponent</title></head&g原创 2022-02-14 01:47:36 · 13708 阅读 · 0 评论 -
Vue之组件嵌套
简介主要讲解组件时如何嵌套的。组件嵌套类似于一个组件里面注册了另外一个组件，存在父子关系<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件嵌套</title></head><body> <div id="root"> <school></s原创 2022-02-13 21:28:07 · 1680 阅读 · 0 评论 -
Vue之非单文件组件介绍
简介主要介绍非单文件组件的方式创建Vue组件、使用。非单文件组件指的是一个文件中包含多个vue组件。非单文件组件实际上是html文件。使用组件化主要分为三步：编写组件。注册组件。使用组件（组件标签）。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>非单文件组件</title></head><原创 2022-02-13 21:13:04 · 807 阅读 · 1 评论 -
Vue组件化理解
简介主要介绍传统编程模式的一点小问题，以及对Vue组件化的理解。如果要编写一个页面，需要结构（html），样式（css），交互（js）。如果上图，如果要编写第一个页面，需要html文件编写顶部、导航、内容、底部的html结构，并且引入渲染顶部、导航、内容、底部的四个css文件，最后引入控制顶部、导航、内容、底部交互的四个js文件，至此，页面1完成。编写页面2，顶部、商品列表，底部，编写一个顶部、商品列表，底部结构的html文件，编写一个新的控制商品列表样式的css文件，并引入已有的顶部和底部的c原创 2022-02-12 21:34:54 · 1305 阅读 · 0 评论 -
Vue生命周期介绍
简介主要介绍Vue的生命周期何其对应的回调函数。定义：Vue的生命周期是指Vue实例从创建到销毁的过程。期间有很多的生命周期回调函数。生命周期图：生命周期图说明：new Vue代码创建一个vue实例后，进入生命周期的第一个阶段，也就是图中标志1的阶段，这个阶段由vue自身完成的，这个节点主要完成初始化、生命周期，但是数据代理还没开开始，这个节点不用太过关注，主要知道在这个节点时，数据代理还没开始就行了。在节点1执行完后，会调用第一个生命周期函数 beforeCreate。<!DO原创 2022-02-10 22:01:50 · 841 阅读 · 0 评论 -
Vue自定义标签
简介主要讲解vue中如何定义自定义标签。自定义标签使用vue的配置对象中的directives属性进行配置。比如下面代码定义一个自定义标签v-big，可以把绑定的表达式乘以十倍渲染到元素的text区，相当于v-text，只是他表达式要数字并且会乘以10倍后渲染。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义指令</tit原创 2022-02-09 21:21:11 · 9059 阅读 · 0 评论 -
Vue一些其他指令：v-text、v-html、v-pre、v-once
简介对标题设置的四个指令语法进行介绍：v-text和v-html这个指令语法，就是用于绑定元素的text，内容。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-text和v-html</title></head><body> <div id="root">原创 2022-02-08 21:28:23 · 898 阅读 · 0 评论 -
Vue之表单数据收集
简介此文主要介绍使用Vue进行表单数据的收集，不同的表单元素会有一定小小的技巧。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>收集表单数据</title></head><body> <div id="root"> <!-- 设置表单提交事件回调，并且阻止了原创 2022-02-08 20:59:54 · 789 阅读 · 0 评论 -
Vue之条件渲染v-if和v-show
简介主要介绍vue的条件渲染的两个指令语法v-if和v-show。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>条件渲染</title></head><body> <div id="root"> <!-- 纯v-if展示 --> <div v-原创 2022-02-07 21:11:47 · 1595 阅读 · 0 评论 -
Vue与class和style
简介这篇文章主要介绍如何在vue中绑定class和样式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue与css</title> <style> .basic{ height: 200px; margin-bottom: 10p原创 2022-02-07 20:53:19 · 489 阅读 · 0 评论 -
Vue学习之监视属性watch
简介设置监视属性的作用：当被监视的属性发生变化时，回调函数会自动调用，进行相关操作。监视的熟悉必须存在，才能进行监视。使用vue的配置对象中的watch属性进行配置。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>监视属性</title></head><body> <div原创 2022-02-07 19:52:41 · 497 阅读 · 0 评论 -
Vue学习之计算属性
简介定义要用的属性不存在，要通过已有属性计算出来时，可以使用计算属性。原理也是使用Object.defineProperty函数来进行set和get方法的定义。get方法被更新，也就是计算属性被获取的场景有两个，第一个是属性初次使用时，第二个是计算属性依赖的熟悉发生变化时。使用，计算属性在vue的配置对象中，使用computed属性进行定义。与methods相比，计算属性内部有缓存机制，效率更高。计算属性最终会出现在vm中，直接读取即可。如果计算属性要被修改，那么必须在配置该计算属性时使用完整原创 2022-01-28 20:57:30 · 1306 阅读 · 0 评论 -
Vue学习之事件
简介事件的基本使用：在vue中，使用v-on:事件名=“代码块或回调方法名”，进行事件的绑定，简便写法是@事件名=“代码块或回调方法名”,回调方法要在vue实例对象的methods配置项中进行配置。注意事项：vm中的methods中配置的函数不要使用箭头函数，要用普通函数，如果使用箭头函数，那么该函数的this的值就不是指向vm本身了，如果是普通函数，那么this的值是vm实例对象本身。methods中配置的函数，都是被vue所管理的函数，this指向vm本身或者执行vue的组件实例对象。事件原创 2022-01-26 21:07:50 · 1140 阅读 · 0 评论 -
JavaScript变量高级定义之Object.defineProperty()方法讲解
简介Object.defineProperty()方法是用于声明一个变量，类似var let，但是他可以做一些比较高级的选项。原创 2022-01-24 20:59:29 · 405 阅读 · 0 评论 -
Vue简介及HelloWord编写
简介Vue是一套用于构建用户界面的渐进式JavaScript框架，何为渐进式，主要是自底向上逐层应用，并且简单应用可以使用核心库便可完成，如果需要复杂地应用，需要引入一些Vue插件库，这就达到渐进式。官网：英文官网: https://vuejs.org/中文官网: https://cn.vuejs.org/特点：采用组件化模式，用以提高开发效率，代码复用率，并且能让代码更好地维护。声明式编码，让开发人员无需直接操纵DOM，只需按一定的规则（标签等语法）声明告诉Vue如何操纵，剩下的就由V原创 2022-01-24 10:57:28 · 1141 阅读 · 0 评论 -
JavaScript ES6新特性（二）：模块化
简介模块化指的是将一个很大的程序文件按照一定的规则进行拆分，然后根据需要进行引入组合。好处：防止命名冲突。代码复用。高维护性。语法：主要分为暴露语法和引入语法。暴露语法：在js代码块中：有三种暴露方式// 对外暴露//每个自身暴露export let personName = "Yehaocong";export let fun = function(){ console.log("fun被调用了");}//统一暴露let a = 1;let b =原创 2022-01-23 19:13:27 · 680 阅读 · 0 评论 -
JavaScript ES6 新特性介绍（一）
简介ES全称ECMAScript，是脚本语言的规范，而JavaScript是ES的一种实现，所以ES的新特性也可以叫作JavaScript的新特性。为啥要学习：语法简洁，功能丰富。利用框架开发应用，例如利用Vue进行前端开发，需要使用很多ES6的知识。为什么要专门学习ES6：ES6是ES版本中变动内容最多的，具有里程碑式意义。ES6加入了许多新的语法特性，编程实现更简单、高效。特性一：let关键字let关键字是用于声明变量的，类似于var，但是他有些特殊的特性。用let声明的变原创 2022-01-23 14:38:03 · 2842 阅读 · 0 评论 -
JavaScript字符串String常用方法介绍
JavaScript字符串在底层是一个字符串数组，比如hello字符串在底层是[“h”,“e”,“l”,“l”,“o”].length: 字符串的属性，代表字符串的长度。字符串可以像数组那样使用下标取值,比如 hello[0]，但是不能设置值。方法：charAt(index)：跟hello[index]效果一样，返回下标值。charCodeAt(index)：指定位置字符的字符编码，Unicode编码。indexOf()：可以从头检索某内容在字符串中第一次出现的位置，如果返回-1，代原创 2022-01-13 09:27:54 · 520 阅读 · 0 评论 -
JavaScript常用工具Date对象和Math介绍介绍
Date对象JavaScript中使用Date对象来表示时间。//创建一个时间对象，时间是当前时间var cur = new Date();//根据表达式创建指定时间的时间对象,格式是 月/日/年 时:分:秒var date = new Date("12/03/2021 18:00:05");console.log(cur);console.log(date );相关方法：获取当前时间戳Data.now();MathMath严格说不能说算一个对象，更像一个工具类，里面包含了原创 2022-01-12 17:23:27 · 161 阅读 · 0 评论 -
函数上下文this和参数列表arguments介绍
在调用函数时，浏览器每次都会传递传递两个隐含的参数，一个是this，一个是arguments。this函数的上下文对象，不同的情况会有不同的值。以函数的形式调用，this永远都是Window对象。以方法的形式调用，this就是调用该方法的对象。以构造函数的形式调用，this就是新创建的对象。使用call和apply调用时，可以指定对象。call()和apply()函数：这两个方法都是函数对象的方法，需要通过函数对象来调用。当函数调用call()和apply()都会原创 2022-01-12 16:59:14 · 216 阅读 · 0 评论 -
JavaScript数组对象简介及其常用方法介绍
数组就是存储多个数据的集合。创建一个数组。//对象形式创建一个数组。var arr1 = new Array();//字面量形式创建一个数组。var arr2 = [];arr1.push(1,2,3);arr2.push("yehaocong","liaoxiaoyan");console.log(arr1);console.log(arr2);数组的常用方法：concat()：连接多个数组，返回一个新的数组，但是不会影响原本的数组。join()：将数组转化成一个字原创 2022-01-12 16:05:02 · 410 阅读 · 0 评论 -
JavaScript垃圾回收
不再使用的对象需要被垃圾回收到，以便于内存空间得到释放，JavaScript定义了完全没有变量引用指向的对象称为垃圾，回收机制会自动回收这些对象释放空间，我们只需把无用的对象的引用置为null，obj=null。...原创 2022-01-12 15:31:53 · 148 阅读 · 0 评论 -
JavaScript对象类型Object
前言系统学习JavaScript，由于有3年的java后端开发经验，并且有2年的JavaScript+Jquery开发经验，所以像编程语言的一些通用知识就直接跳过了，重点关注JavaScript的语言特性和常用库。JavaScript对象类型 Object对象属于一个复合的数据类型，在对象中可以封装多个不同类型的属性，比如 Number、string，函数，Object、数组等等。在JavaScript中，String、Number、Boolean、Null、Undefined属于基本数据类型，Ob原创 2022-01-12 15:28:13 · 5605 阅读 · 1 评论 -
JavaScript基本数据类型讲解
前言系统学习JavaScript，由于有3年的java后端开发经验，并且有2年的JavaScript+Jquery开发经验，所以像编程语言的一些通用知识就直接跳过了，重点关注JavaScript的语言特性和常用库。JavaScript数据类型在JavaScript中一共有6种数据类型：string：字符串。number：数值型。boolean ：布尔值。undefined：未定义。null：空值。object：对象类型。其中string、number、boolean、undefine原创 2022-01-07 16:54:02 · 1542 阅读 · 0 评论