![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
文章平均质量分 80
JavaScript基础
Anbelin
现在不想写网上能直接找得到的
展开
-
在组件上使用 v-model
官方文件补充转载 2022-07-26 22:48:09 · 546 阅读 · 0 评论 -
Vue计算属性的Setter
补充vue官方文档翻译 2022-07-25 17:30:27 · 369 阅读 · 0 评论 -
CSRF攻击原理和防范措施
跨站请求伪造(英语:Cross-site request forgery),也被称为 one-click attack 或者 session riding,通常缩写为 CSRF 或者 XSRF, 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。跟跨网站脚本(XSS)相比,XSS 利用的是用户对指定网站的信任,CSRF 利用的是网站对用户网页浏览器的信任。攻击原理CSRF是如何发生的呢,我们以网银转账为例进行说明。首选用户通过浏览器访问网银系统 用户在网银登录后.转载 2021-08-31 18:23:41 · 2517 阅读 · 0 评论 -
HTTP(hypertext transport protocol)协议
转自:微信公众号 “我是程序员小贱”目录1989年,蒂姆·伯纳斯 - 李(Tim Berners-Lee)在论文中提出可以在互联网上构建超链接文档,并提出了三点。URI:统一资源标识符。互联网的唯一IDHTML:超文本文档HTTP:传输超文本的文本传输协议1、HTTP应用在哪儿学习一门知识,采用五分钟时间看看这个知识是干啥的可能会更加有目的性。HTTP可谓无处不在,这里例举出几个。HTTP应用场景2、HTTP是什么HTTP(hypertext transp.翻译 2021-08-21 10:33:48 · 321 阅读 · 0 评论 -
VUEX基础 笔记壹日
1. Vuex 概述1.1 组件之间共享数据的方式父向子传值:v-bind 属性绑定子向父传值:v-on 事件绑定兄弟组件之间共享数据: EventBus$on 接收数据的那个组件$emit 发送数据的那个组件1.2 Vuex 是什么Vuex 是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。1.3 使用 Vuex 统一管理状态的好处能够在 vuex 中集中管理共享的数据,易于开发和后期维护。能够高效地实现组件之间的数据共享,提高开发效率。翻译 2021-03-31 20:17:22 · 96 阅读 · 0 评论 -
VUE进阶 笔记叁章 前端工程化
4.VUE脚手架4.1 VUE脚手架的基本用法Vue 脚手架就是一个命令行工具,用于快速生成 Vue 项目基础架构,从而可以简化Vue项目的创建过程。其官网地址为:https://cli.vuejs.org/zh/4.1.1 使用步骤安装 3.x 版本 的 Vue 脚手架:npm install -g @vue/cli4.1.2 基于3.x版本的脚手架创建vue项目基于 交互式命令行 的方式,创建 新版 vue 项目;vue create my-project这里选择手动选择某些翻译 2020-12-30 17:45:30 · 111 阅读 · 1 评论 -
VUE进阶 笔记贰章 前端工程化
1. 模块化相关规范1.1 模块化概述传统开发模式的主要问题命名冲突:多个JS文件之间如果存在重名变量,则会发生变量覆盖问题。文件依赖:JS文件之间无法实现相互的引用。通过模块化解决上述问题模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块。模块化开发的好处:方便代码的重用,从而提升开发效率,并且方便后期的维护。1.2 浏览器端模块化规范1.2.1 AMDRequire.js(http://www.requ翻译 2020-12-28 16:48:49 · 176 阅读 · 1 评论 -
VUE进阶 笔记壹章 前端路由
1.路由的基本概念与原理1.1 路由路由是一个比较广义和抽象的概念,路由的本质就是对应关系。在开发中,路由分为:后端路由 和 前端路由。1.1.1 后端路由概念:根据不同的用户 URL 请求,返回不同的内容。本质:URL 请求地址与服务器资源之间的对应关系。1.1.2 SPA(Single Page Application)后端渲染(存在性能问题)。Ajax前端渲染(前端渲染提高性能,但是不支持浏览器的前进后退操作)。SPA(Single Page Application)单页面应用程序翻译 2021-03-25 12:02:03 · 164 阅读 · 0 评论 -
VUE基础 笔记肆章 前后端交互
1. 前后端交互模式1.1 接口调用方式原生 Ajax基于 jQuery 的 Ajaxfetchaxios1.2 URL地址格式1.2.1 传统形式的URL1. 格式:schema://host:port/path?query#fragmentschema:协议。例如http、https、ftp等。host:域名或者IP地址。port:端口,http默认端口80,可以省略。path:路径,例如/abc/a/b/c。query:查询参数,例如 uname=lisi&age翻译 2020-12-25 17:30:18 · 432 阅读 · 2 评论 -
VUE基础 笔记叁章 组件化开发
VUE基础之组件化开发1. 组件化开发思想1.1 现实中的组件化思想体现标准、分治、重用、组合。1.2 编程中的组件化思想体现1.3 组件化规范:Web Components我们希望尽可能多的重用代码。自定义组件的方式不太容易(html、css和js)。多次使用组件可能导致冲突。Web Components通过创建封装好功能的定制元素解决上述问题。VUE部分实现了Web Components规范。https://developer.mozilla.org/zh-CN/docs/Web/翻译 2020-12-23 20:56:14 · 138 阅读 · 1 评论 -
VUE基础 笔记贰章 常用特性
5. VUE常用特性5.1 常用特性概述表单操作、自定义指令、计算属性、过滤器、侦听器、生命周期。5.2 表单操作5.2.1 基于VUE的表单操作input单行文本、textarea多行文本、select下拉多选、radio单选框、checkbox多选框。<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>Documen翻译 2020-12-19 18:27:11 · 160 阅读 · 0 评论 -
VUE基础 笔记壹日
前提准备VScode 的VUE代码格式化插件及配置1. VUE概述VUE:渐进式JavaScript框架声明式渲染 > 组件系统 > 客户端路由 > 集中式状态管理 > 项目构建易用:熟悉HTML、CSS、JavaScript知识后,可快速上手VUE。灵活:在一个库和一套完整框架之间伸缩自如。高效:20KB运行大小,超快虚拟DOM。2. VUE基本使用2.1 传统开发模式对比2.2 VUE开发模式<!DOCTYPE html><htm原创 2020-12-17 16:11:02 · 208 阅读 · 0 评论 -
Ajax基础 笔记叁章 同源政策 跨域请求
6. 同源政策6.1 Ajax请求限制Ajax只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站,A网站中的HTML文件只能向A网站服务器中发送Ajax请求,B网站中的HTML文件只能向B网站中发送Ajax请求,但是A网站是不能向B网站中发送Ajax请求,同理,B网站也不能向A网站发送Ajax请求。6.2 什么是同源如果两个页面拥有相同的协议、域名和端口,那么则两个页面就属于同一个源,其中只要一个不相同,就是不同源。6.3 使用JSONP解决同源限制问题jsonp 是 json w原创 2020-12-16 11:17:36 · 115 阅读 · 0 评论 -
Ajax基础 笔记贰日 模板引擎 FormData
4. 模板引擎4.1 模板引擎概述作用:使用模板引擎提供的模板语法,可以将数据和HTML拼接起来。官方地址:https://aui.github.io/art-template/zh-cn/ 。4.2 使用步骤下载 art-template 模板引擎库文件并在HTML页面中引入库文件。<script src="./js/template-web.js"></script>准备 art-template 模板<script id="tpl" type="t原创 2020-12-14 21:10:21 · 235 阅读 · 1 评论 -
Ajax基础 笔记壹日 Ajax基础
1. Ajax 基础传统网站中存在的问题网速慢的情况下,页面加载时间长,用户只能等待。表单提交后,如果一项内容不合格,需要重新填写所有表单内容。页面跳转,重新加载页面,造成资源浪费,增加用户等待时间。Ajax概述它是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站应用的体验。Ajax的应用场景页面上拉加载更多数据。列表数据无刷新分页。表单项离开焦点数据验证。搜索框提示文字下拉列表。Ajax的运行环境Ajax技术需要运行在网站环境中才能生效,当前课程使用No原创 2020-12-14 18:17:55 · 195 阅读 · 1 评论 -
Node 笔记肆章 Express框架
1. Express框架简介及初体验1.1 Express框架是什么Express是一个基于Node平台的WEB应用开发框架,它提供了一系列的强大特性,帮助你创建各种WEB应用。我们可以使用 npm install express 命令进行下载。1.2 Express框架特性1.3 原生Node与Express框架对比路由获取请求参数1.4 Express框架基础// 引入express框架const express = require('express');// 创建网站服务器翻译 2020-12-05 22:44:00 · 115 阅读 · 0 评论 -
Node 笔记叁章 模板引擎
1. 模板引擎的基础概念1.1 模板引擎模板引擎是第三方模块。让开发者以更加友好的方式拼接字符串,是项目代码更加清晰、更加易于维护。1.2 art-template 模板引擎在命令行工具中使用 npm install art-template 命令进行下载。使用 const template = require(’ art-template’ )引入模板引擎,该语句返回一个方法。告诉模板引擎要拼接的数据和模板在哪 const html = template(‘模板路径’, 数据)。新建模板原创 2020-12-05 11:59:54 · 135 阅读 · 0 评论 -
Node 笔记贰号 MongoDB
第五章1. 数据库概述及环境搭建1.1 为什么要使用数据库1.2 什么是数据库1.3 MongoDB数据库下载安装MongoDB communicty server1.4 MongoDB可视化软件安装MongoDB compass 是MongoDB可视化操作软件,是使用图形界面操作数据库的一种方式。1.5 数据库相关概念1.6 Mongoose 第三方包使用Node.js操作MongoDB数据库需要依赖Node.js第三方包mongoose。使用 npm install m原创 2020-12-03 18:55:14 · 193 阅读 · 0 评论 -
Node 笔记壹号 Node基础
1. Node开发概述1.1 为什么要学习服务器端开发基础1.2 服务器端开发要做的事情1.3 为什么选择Node1.4 Node 是什么2. Node 运行环境搭建2.1 Node.js 运行环境安装https://nodejs.org/zh-cn/原创 2020-12-01 15:19:56 · 364 阅读 · 0 评论 -
NODE安装步骤
原创 2021-01-05 10:55:03 · 186 阅读 · 0 评论 -
【JS面向对象】笔记伍陆章
第五章 ES6简介1. 什么是ES6ES 的全称是 ECMAScript,它是由 ECMA 国家标准化组织制定的一项脚本语言的标准化规范。2. ES6 的新增语法let 关键字ES6 中新增的用于声明变量的关键字。使用let关键字声明的变量具有块级作用域。使用var关键字声明的变量不具有块级作用域特性。 /* --------使用let关键字声明的变量具有块级作用域-------- */ if (true) { let b = 20; console.log(b)原创 2020-12-23 21:41:02 · 226 阅读 · 0 评论 -
【JS面向对象】笔记叁肆章
第三章 函数进阶1. 函数的定义和调用1.1 函数的定义方式自定义函数(命名函数)函数表达式 (匿名函数)利用 var fn = new Function('参数1','参数2', '函数体');所有函数都是 Function 的实例(对象)。 <script> // 函数的定义方式 // 1. 自定义函数(命名函数) function fn() {} // 2. 函数表达式 (匿名函数) var原创 2020-12-23 21:40:06 · 153 阅读 · 0 评论 -
【JS面向对象】笔记壹贰章
1. 面向对象编程介绍1.1 两大编程思想面向过程、面向对象。1.2 面向过程编程面向过程编程POP(Process-oriented programming)就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步步实现,使用的时候再一个一个的依次调用就可以了。面向过程,就是按照我们分析好了的步骤,按照步骤解决问题。例如将大象装进冰箱的面向对象做法:1.3 面向对象编程面向对象编程OOP(Object Oriented Programing)是把事务分解成为一个个对象,然后由对象之间分工与原创 2020-12-23 21:40:34 · 261 阅读 · 0 评论 -
【jQuery】笔记壹日
1. jQuery 概述1.1 JavaScript 库仓库:可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。简单理解:就是一个JS文件,里面对我们原生JS代码进行了封装,存放到里面。这个我们可以快速高效的使用这些封装好的功能了。比如jQuery,就是为了原创 2020-12-23 21:43:03 · 113 阅读 · 0 评论 -
【DOM BOM】笔记 7 日 移动端网页特效
1. 触屏事件1.1 触屏事件概述移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心地使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。常见地触屏事件如下:触屏touch事件说明touchstart手指触摸到一个 DOM 元素时触发touc原创 2020-12-23 21:49:11 · 143 阅读 · 0 评论 -
【DOM BOM】笔记 6 日 PC网页特效
1. 元素偏移量 offset 系列1.1 offset 概述我们使用offset系列相关属性可以动态地得到该元素的位置(偏移)、大小等。获得元素距离带有定位父元素的位置。获得元素自身的大小(宽度高度)。注意:返回的数值都不带单位。offset系列属性作用element.offsetParent返回作为该元素带有定位的父级元素,如果父级都没有定位则返回bodyelement.offsetTop返回元素相对带有定位父元素上方的偏移element.offset原创 2020-12-23 21:49:48 · 108 阅读 · 0 评论 -
【DOM BOM】笔记 5 日 BOM浏览器对象模型
1. BOM概述1.1 什么是BOMBOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。1.2 BOM的构成BOM比DOM更大,它包含DOM。window 对象是浏览器的顶级对象,它具有双重角色原创 2020-12-23 21:45:44 · 157 阅读 · 0 评论 -
【DOM BOM】笔记 4 日 事件高级
1. 注册事件/绑定事件给元素添加事件,称为注册事件或者绑定事件。注册事件有两种方式:传统方式和方法监听注册方式。1.1 传统注册方式利用on开头的事件onclick。例如:<button onclick= "alert('hi')"></button>、btn.onclick = function() {}。特点:注册事件的唯一性。同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数。1.2 方法监听注册方式W3C标准推原创 2020-12-23 21:50:13 · 161 阅读 · 1 评论 -
【DOM BOM】笔记 3日 节点操作
节点操作获取元素通常使用两种方式:利用DOM提供的方法获取元素 和 利用节点层级关系获取元素。利用DOM提供的方法获取元素该方法逻辑性不强、繁琐。利用节点层级关系获取元素利用父子兄节点关系获取元素。逻辑性强,但是兼容性稍差。节点概述网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM中,节点使用 node 来表示。HTML DOM树中的所有节点均可通过 JavaScript 进行访问,所有 HTML元素(节点)均可被修改,也可以创建或删除。一般地,节点至少拥有原创 2020-12-23 21:46:22 · 2079 阅读 · 0 评论 -
【DOM BOM】笔记2日 事件基础 操作元素
操作元素JavaScript 的DOM操作可以改变网页内容、结构和样式。我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性。改变元素内容innerText从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉。 element.innerText<body> <button>显示当前系统时间</button> <div>某个时间</div> <p>123456<原创 2021-01-07 15:00:40 · 129 阅读 · 0 评论 -
【DOM BOM】笔记初日 DOM 获取元素 事件基础
**API(Application Programming Interface,应用程序编程接口)**是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM 和 DOM)。DOM文档对象模型(Document Object Model,DOM),是W3C组织推荐的处理可扩展标记语言(HTML 或者 XML)的标准编程接口。W3C已经定义了一系..原创 2020-12-23 21:45:15 · 150 阅读 · 0 评论 -
【JavaScript】笔记の5天
JS简单类型与复杂数据类型简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型。值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型。string、number、boolean、undefined、null这些都是值类型。特殊情况:null返回的数据类型是一个空的对象 object。 <script> var timer = null; console.log(typeof timer); </scri原创 2020-10-12 20:51:16 · 103 阅读 · 0 评论 -
【JavaScript】笔记の4章
作用域通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。JS的作用域(es6之前)分为:全局作用域和局部作用域。全局作用域:整个script标签或者是一个单独的JS文件。局部作用域:在函数内部就是局部作用域,这个代码的名字只在函数内部其效果和作用。变量的作用域在JavaScript中,根据作用域的不同,变量可以分为两种:全部变量和局部变量。全局变量:在全局原创 2020-10-08 12:18:39 · 202 阅读 · 0 评论 -
【JavaScript】笔记の3章
数组创建数组JS中创建数组有两种方式:利用 new 创建数组;利用数组字面量创建数组。利用 new 创建数组 var arr = new Array();利用数组字面量创建 var arr = [1, 2, 'hellena_p', true];访问数组索引:用来访问数组元素的序号,数组索引从0开始。 var arr = [1, 2, 'hellena_p', true]; console.log(arr[3]);输出结果为原创 2020-10-07 16:42:38 · 129 阅读 · 0 评论 -
【JavaScript】笔记の2章
JS流程控制顺序结构程序按照代码的先后顺序,依次执行。分支结构IF分支语句 <script> var age = prompt('请输入您的年龄:'); if (age >= 18) { alert('天地为念'); } else { alert('好好学习'); } </script>判断闰年案例算法:能被4整除且不能整除100的年份为闰年(如2004年就是闰年原创 2020-10-06 17:41:45 · 90 阅读 · 0 评论 -
【JavaScript】笔记の1章
参考资料https://www.bilibili.com/video/BV1ux411d75J/https://blog.csdn.net/GUDUzhongliangJavaScriptJavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言。脚本语言:不需要编译,运行过程中由JS解释器(JS引擎)逐行 进行解释并执行。现在也可以基于Node.js技术进行服务器端编程。JavaScript的作用表单验证(密码强度检测,JS产生的最初目的)网页特效 服务端开发(.原创 2020-10-05 20:13:32 · 183 阅读 · 1 评论 -
【HTML CSS】笔记12日 WEB开发之响应式布局
1. 响应式开发1.1 响应式开发原理使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。1.2 响应式布局容器响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果。原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。2. Bootstrap 前端开发框架2.1 Bootstrap 简介Bootstrap 来自 Twitter (推特),是目前最受欢迎的前端框架。B原创 2020-11-20 15:26:03 · 127 阅读 · 0 评论 -
【HTML CSS】笔记11日 移动WEB开发之rem适配布局
1. rem 基础rem 单位em相对于父元素的字体大小来说的,em是父元素字体大小。rem(root em)是一个相对单位,类似于em,但它是相对于 html元素字体大小来说的。rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制。例如,根元素(html)设置font-size=12px;非根元素设置width: 2rem;则换成px表示就是24px。 <style> html { font-size: 12..翻译 2020-11-19 17:38:44 · 204 阅读 · 0 评论 -
【HTML CSS】笔记10日 移动WEB开发之flex布局
1. flex布局体验1.1 传统布局于flex布局传统布局兼容性好布局繁琐局限性,不能在移动端很好地布局flex弹性布局操作方便,布局极为简单,移动端应用很广泛。PC端浏览器支持情况较差。IE 11或更低版本,不支持或仅部分支持。建议:1.2 初体验2. flex布局原理2.1 布局原理flex 是 flexible Box 的缩写,意为 “弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。总结flex布局原理3. flex 布局翻译 2020-11-17 22:00:39 · 179 阅读 · 0 评论 -
【HTML CSS】笔记9日 移动WEB开发之流式布局
浏览器私有前缀浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无需添加。私有前缀-moz-:代表fireworks浏览器私有属性。-ms-:代表IE浏览器私有属性。-webkit-:代表safari、chrome私有属性。-o-:代表Opera私有属性。提倡的写法例如为了兼容性问题,实际 boder-radius: 10px; 的写法为: -moz-border-radius: 10px; -webkit-border-radius: 10px; -原创 2020-11-18 09:44:59 · 146 阅读 · 0 评论