- 博客(40)
- 资源 (2)
- 收藏
- 关注
RSS订阅
4原创 VS code 格式化代码的问题
以前我用的时候就好好的，最近突然会自动把单引号变成双引号，自动加分号，还在最后自己加逗号，我百思不得其解，还好有万能的网友，解决了这个问题。在项目根目录下，也就是跟 README.md 同级，创建一个新文件，名字是 .prettierrc.json里面写这个{ "singleQuote":true, "semi":false, "trailingComma": "none"}singleQuote 单引号semi 分号trailingComma末尾逗号...
2022-02-20 15:48:00
283
原创 当 Dialog 对话框 反复打开关闭后，内容不显示
今天遇到的一个问题：使用Dialog里面的内容显示不正确。当我点击 Dialog里面取消按钮，关闭对话框后，再打开后，内容就消失了，这让我很难受。再我再三检查后，发现不管打开几次Dialog ，只会在第一次打开的时候发送请求，点击取消按钮后，数据会重置，但是再打开的时候，不会再发送请求。所以没有内容了！！根据大佬的指点，我找到了问题所在。1.首先是在create阶段创建的请求created () { this.loadRole() //封装的...
2021-11-29 16:48:19
2139
原创 关于Vue CLI项目时，出现 You will need to perform the initial commit yourself.
WARN Skipped git commit due to missing username and email in git config, or failed to sign commit.You will need to perform the initial commit yourself.
2021-11-17 14:32:48
1421
原创 如何用 Vue CLI 4.X 手动创建一个项目
简介Vue CLI 作为 Vue 的官方脚手架，降低了开发者对于 webpack 的配置成本，便于快速构建项目。说明Vue CLI 4.x 需要Node.jsv8.9 或更高版本 (推荐 v10 以上)。你可以使用n，nvm或nvm-windows在同一台电脑中管理多个 Node 版本。已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，需要先通过npm uninstall vue-cli -g或yarn global remove vue-cli卸载后再安装。安装...
2021-11-17 11:10:16
483
原创 Vue.js的综合案例
1、 综合案例： TodoMVC TodoMVC 是一个经典项目，让开发者快速实践到框架开发方式 官网： http://todomvc.com/ 评价： 功能完备不冗余，多样实现引深思2、准备工作 从 github 克隆项目模板 git clone https://github.com/tastejs/todomvc-app-template.git 进入项目目录，安装项目依赖 cd 项目目录 npm install...
2021-11-11 09:40:42
592
原创 在拉钩学习的笔记（二十九）Vue.js的进阶语法
1、自定义指令 指令用于简化 DOM 操作，相当于对基础 DOM 操作的一种封装 当我们希望使用一些内置指令不具备的 DOM 功能时，可以进行自定义指令设置 - 自定义全局指令 全局指令指的是可以被任意 Vue 实例或组件使用的指令 Vue.directive('focus', { // focus 指令的名称 参数二是一个配置对象 inserted: function(el) { // el...
2021-11-09 15:55:57
267
原创 在拉钩的学习笔记（二十八）Vue.js事件与表单处理
1、事件处理 v-on 指令 用于进行元素的事件绑定 <p>{{ content }}</p> <button v-on:click="content='新内容'">按钮</button> 简写： <button @click="content='新内容'">按钮</button> 事件程序代码较多时，可以在 methods 中设置函数，并设置为事件处理程序 ...
2021-11-09 15:54:44
73
原创 在拉钩学习的笔记（二十七）Vue.js基础指令
1、Vue.js 指令 指令的本质就是 HTML 自定义属性 vue.js 的指令就是以 v- 开头的自定义属性2、内容处理 v-once 指令 使元素内部的插值表达式只生效一次 <p v-once>{{ content }}</p>3、内容处理 v-text 指令 元素内容整体替换为指定纯文本数据（动态绑定） <p v-text="content">会被替换</p>4、内容处理 v-html 指令 元素...
2021-11-09 15:53:40
577
原创 在拉钩学习的笔记（二十六）初识Vue.js
1、 Vue.js 简介 传统网页开发步骤： 请求数据 ==> 生成结构 ==> 监听变化 元素变化 ==> 发送请求 ==> 更新结构 缺点： DOM 操作繁杂，代码繁杂； DOM 操作与逻辑代码混合，可维护性差； 不同功能区域书写在一起，可维护性低； 模块之间的依赖关系复杂 Vue.js 是前端流行框架 文档： https://cn.vuejs.org/2、 Vue.js 核心特性 — 数据...
2021-11-09 15:53:03
90
原创 在拉钩学习的笔记（二十五）webpack打包
基础：进阶：项目：1、概述：webpack 简介 Webpack = Web Package 是一个现代 JS 应用程序的 静态模块打包器（module bundler） 模块：模块化开发，可以提高开发效率，避免重复造轮子 打包（bundler）：将各个模块，按照一定的规则组装起来 官网：https://webpack.js.org/ 特点：功能强大（打包、构建、发布 web 服务）； 学习成本高 构建（转换）：把不支持的代码，转成支...
2021-11-09 15:51:43
226
原创 在拉钩学习的笔记（二十四）前端模块化开发
1、模块化开发 当下最重要的前端开发规范。 模块化演变过程；模块化规范；常用的模块化打包工具；基于模块化工具构建现代 Web 应用；打包工具的优化技巧2、模块化的演进过程 1.文件划分方式：污染全局作用域；命名冲突；无法管理模块依赖关系 -早期模块化完全依靠约定 2.命名空间方式：依旧能访问到私有变量 3.IIFE(利用立即执行函数)：外部访问不到私有变量 早期在没有工具和规范的情况下对模块化的落地方式3、模块化规范的出现 模块化标准 + ...
2021-11-09 15:50:46
630
原创 在拉钩学习的笔记（二十三）gulp自动化构建工具
1、自动化构建工具 Gulp Grount Gulp FIS Gulp 与 npm script： 都能够实现自动化构建； 但 Gulp 语法简单， Gulp 语法就是 Javascript 语法，npm script 语法接近 shell 脚本； Gulp 生态完善，构建效率高 步骤： 1、全局安装 gulp 客户端（npm install -g gulp-cli） 2、初始化项目（npm init --yes） 3、安装 gulp 包（npm install ...
2021-11-09 15:48:12
382
原创 在拉钩学习的笔记（二十二）自动化构建
1、自动化构建 构建过程就是 源代码 转换成 生产代码 的过程 为什么构建（构建内容） 一些代码需要编译（css,js），保证浏览器的兼容性：将 Less 或 Sass 转换成 css；将 ES6+ 的新语法转成 ES5 有些代码需要压缩（css、js、HTML、图片等）：压缩后的代码体积更小，加载更快，节省带宽 有些代码需要做格式化校验，统一代码风格 将less 转 css ： 安装 less 插件（npm i less -g)； 通...
2021-11-09 15:47:33
89
原创 在拉钩学习的笔记（二十一）脚手架工具
1、脚手架工具 脚手架工具的作用：创建项目基础结构、提供项目规范和约定2、Yeoman：用于创造现代化web应用的脚手架工具 Yeoman 的基本概念： Y eoman 是一款脚手架工具： 可以帮助开发人员创建项目的基础结构代码 yo 是Yeoman 的命令行管理工具： 可以再命令行运行yeoman的命令 生成器： Yeoman 中具体的脚手架： 针对不同项目有不同的脚手架（例如：网站、APP、小程序等） Yeoman 使用说明： ...
2021-11-09 15:45:52
76
原创 在拉钩学习的笔记（二十）Node.js 基础
1、Node.js 概述 Node.js 不是一门编程语言，它是一个执行 JavaScript 代码的工具。工具是指可以安装在计算机操作系统之上的软件。 浏览器和 Node.js 都可以运行 JavaScript ，因为它们都内置了 JavaScript V8 Engine ，它可以将 JavaScript 代码编译为计算机能够识别的机器码。 浏览器中运行的 JavaScript 和 node.js 中运行的 JavaScript： 在内置了 JavaScript V...
2021-11-09 15:44:42
813
原创 在拉钩学习的笔记（十九）跨域和模板引擎应用
同源策略 同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口完全相同 在同源策略下，只有同源的地址才可以相互通过 AJAX 的方式请求 同源或者不同源说的是两个地址之间的关系，不同源地址之间请求我们称之为跨域请求 在同源策略下，浏览器不允许 Ajax 跨域获取服务器数据 现代化的 Web 应用中肯定会有不同源的现象；必然要解决不同源问题，从而实现跨域请求跨域解决方案 JOSNP原理 ...
2021-10-14 18:22:42
87
原创 在拉钩学习的笔记（十七）Ajax基础
1、Ajax概述 背景：在了解 AJAX 之前我们可以简单的认为 'javaScript 能力有限'，因此在此之前 web 平台提供所有的 API 都只停留在 '单机' 的阶段 这样会造成一些无法实现的功能，例如： 1、无法在实现用户登录时的功能，当用户输入邮箱地址显示用户对应的头像 2、无法在实现用户注册功能时，当用户输入邮箱或这用户名就提示是否存在 3、无法在实现留言板功能时，实时看到最新的用户留言 这些功能的开发最终都卡在一个相同...
2021-10-11 17:37:55
115
原创 在拉钩学习的笔记（十六）jQuery事件操作和插件
1、on 方法注册事件 注册简单事件语法：jQuery对象.on('事件名' , 事件处理程序) 事件委托的实现：jQuery对象.on('事件名' , '选择器' , 事件处理程序); 选择器：子孙元素 注意：在事件处理程序中，this代表的是子孙元素（所点最先触发的） on() 方法的封装底层实际是 addEventListener() 可以给同一个元素多次绑定同一种事件，不会覆盖2、off 方法移除事件 解除简单的事件：jQuery对象.off('cl...
2021-10-11 17:37:20
53
原创 在拉钩学习的笔记（十五）jQuery节点操作和元素尺寸
jQuery 节点操作1、创建元素 语法：$('<li></li>')2、追加元素 1 向父元素最后追加： 语法 父元素jQuery对象.append(新创建的jQuery对象); 新创建jQuery对象.appendTo('父元素选择器' 或 父元素jQuery对象); 向父元素最前面追加： 语法：父元素jQuery对象.prepend(新创建的jQuery对象); 新创建的jQuery对象.pre...
2021-10-11 17:36:37
95
原创 在拉钩学习的笔记（十四）jQuery排序和动画
1、jQuery 排序 eq() 方法 jQuery 中获得的对象，内部包含选择的一组原生js对象，在 jQuery 对象中会进行一个大的排序，这个排序与原来的 HTML 结构没有关系 eq() 方法在 jQuery 对象中通过下标获取某个对象，下标是 jQuery 对象中的大的排序的下标 index() 方法 jQuery 对象调用 index() 方法时，得到的是它自己在HTML结构中的兄弟中的下标位置。与 jQuery 大排序没有关系2...
2021-10-11 17:35:46
287
原创 在拉钩学习的笔记（十三）jQuery的常用方法
jQuery 操作标签的内容1、html() 方法 html() 方法相当于原生 js 中的 innerHTML 属性，用来获取或设置标签内部内容。 方法可以传递一个参数，自定义的字符串内容(如果传递参数，批量更改元素内部的内容；如果不传递参数，是获取元素内容；如果内部的字符串包含了标签的语法的字符串，会按照 html 语法进行加载) 获取：文本和内部标签 语法：jQuery对象.html() 设置：若设置标签时，标签会被渲染 语法：jQue...
2021-10-11 17:34:50
100
原创 在拉钩学习的笔记（十二）jQuery基础
1、jQuery简介 jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库；2006 年正式发布 query 本身是选择的意思，主要针对 JavaScript 中的选择元素的方法进行了大量的优化 下载地址：http://jquery.com/download/ https://www.bootcdn.cn/jquery/ 1.12.4 使用 jQuery 过程，可以参考 API 应用手册 https://jquery.cuishifeng....
2021-10-11 17:26:54
90
原创 新手如何用 js 写一个五子棋
最新一次的作业，需要用所学到的知识写一个前端小游戏，我想到了五子棋，想着容易做起来难啊！不过历经千辛万苦，最终磕磕巴巴写出来了一个简单的（有bug）五子棋。首先贴起来html内容，很简单，就一个地图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g
2021-10-04 16:35:34
1040
原创 在拉钩学习的笔记（十一）ES6新特性
1、 ECMAScript 概述 通常将 ECMAScript 看作是 JavaScript 的标准规范；实际上 JavaScript 是 ECMAScript 的扩展语言， ECMAScript 只是提供了最基本的语法 2015 年开始 ES 保持每年一个版本的迭代； ES2015 开始按照年份开始命名，很多人习惯将 ES2015 称之为 ES62、 ECMAScript2015 最新 ECMAScript 标准的代表版本 http://www.ecma-internat...
2021-10-04 16:17:06
90
原创 在拉钩学习的笔记（十）正则表达式
1、什么是正则表达式 正则表达式：（Regular Expression）用于匹配规律规则的表达式，正则表达式最初是科学家对人类神经系统的工作原理的早期研究，现在在编程语言中有广泛的应用。正则表通常被用来检索、替换那些符合某个模式（规则）的文本。 正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的集合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。 正则表达式的作用： 1.给定的字符串是否符合正则表达式...
2021-10-04 16:16:19
79
原创 在拉钩学习的笔记（九）函数继承和进阶
1、对象拷贝 面向对象的特点：封装，继承，多态（抽象） // 封装继承函数 function extend (parent, child) { for (var k in parent) { // 子级有的属性不需要继承 if (child){ continue; } child[k] = parent[k]; } }...
2021-10-04 16:15:38
89
原创 检测昵称是否是有汉字字母数字下划线组成，6-8位
const str = "妖小妖_yao";const reg = /^[\u4e00-\u9fa5\w]{6,8}$/;console.log(reg.test(str));正则表达式中预定义类. [^\n\r] 除了换行和回车之外的任意字符\d [0-9] 数字字符\D [^0-9] 非数字字符\s [\t\n\x0B\f\r] 空白字符\S [^\t\n\x0B\f...
2021-09-25 11:52:04
418
原创 检测是否是2到4位汉字
const str = "汉字嘛";const reg = /^[\u4e00-\u9fa5]{2,4}$/;console.log(reg.test(str));汉字：^[\u4e00-\u9fa5]{0,}$ 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$ 长度为3-20的所有字符：^.{3,20}$ 由26个英文字母组成的字符串：^[A-Za-z]+$ 由26个大写英文字母组成的字符串：^[A-Z]+$ 由26个小写英文字母组成的字符串：^[a.
2021-09-25 11:45:22
238
原创 获取＜p class=‘demo‘＞hello JavaScript＜/p＞内部文案
const str = "<p class='demo'>hello JavaScript</p>";const reg = /^\<.+\>(.+)\<.+\>$/;const str1 = str.replace(reg,function (match, $1) { return $1;});console.log(str1);捕获组:匹配x并记住匹配项。例如，/(foo)/匹配并记住“foo bar”中的“foo”正则表达式...
2021-09-25 11:36:02
310
原创 将div#demo.demo转化成＜div id=“demo“ class=“demo“＞＜/div＞
replace()一个RegExp对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉指定一个函数作为第二个参数。在这种情况下，当匹配执行后，该函数就会执行。函数的返回值作为替换字符串。(注意：上面提到的特殊替换参数在这里不能被使用。)另外要注意的是，如果第一个参数是正则表达式，并且其为全局匹配模式，那么这个方法将被多次调用，每次匹配都会...
2021-09-25 11:11:36
258
原创 在拉钩学习的笔记（八）面向对象编程
1、什么是对象 Everything is Object（万物皆对象） 1.对象是单个事物的抽象 2.对象是一个容器，封装了属性（property）和方法（methed）。属性：对象的状态；方法：对象的行为 实际开发中，对象是一个抽象的概念，可以将其简单理解为：数据集或功能集 ECMAScript-262把对象定义为：无序属性的集合，其属性可以包含基本只值、对象或者函数2、面向对象 面向对象编程——Object Oriented Progra...
2021-09-18 16:59:58
123
原创 在拉钩学习的笔记（七）Web APIs网页应用编程
1、API的概念 API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某原件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 任何开发语言都有自己的API API的特征输入和输出（1/0） 例如：var max = Math.max(2, 3, 4); API的使用方法（console.log("abc"); Web API的概念：...
2021-09-15 18:16:48
201
原创 在拉钩学习的笔记（六）JavaScript数组、对象、函数
1、数组 之前学习的数据类型，只能存储一个值（比如：Number/String）。如果我们想存储多个数值该如何存储 概念： 所谓数组（Array），就是将多个元素（通常是一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之数组。 定义：数组是一组有序的数据集合。数组内部可以存放多个数据，不限制数据类型，并且数组的长度可以动态调整。 创建数组最简单的方式就是数组字面量方式 数组的字面量：[] 一般将数组字面量赋值给一个变量，方便后期对数组进行操作。 ...
2021-09-15 18:13:06
177
原创 在拉钩学习的笔记（五）JavaScript语法、数据类型、流程控制
1、表达式 一个表达式可以产生一个值，有可能时运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地方。 特点：表达式会先执行出一个结果，然后再参与其他程序。 语句：可以理解为一个行为，循环语句和判断语句就是典型的语句。一个程序可以有很多个语句组成，一般情况下分号;分割一个一个的语句 语句可以认为是给计算机的一个指令，执行这段代码 一般语句以分号结尾，特殊的结构除外 流程控制语句：通过一些特殊结构可以让js代码加载时，要么可以跳过一部分不加载，或者可以循...
2021-09-15 18:10:08
140
原创 在拉钩学习的笔记（四）移动端网页应用开发
1、移动web开发基础浏览器现状pc端常见浏览器：360浏览器，谷歌，火狐，qq，百度，搜狗，ie移动端：uc浏览器，qq，欧朋，百度手机，360安全，谷歌，搜狗手机，猎豹，以及其他杂牌浏览器国内uc和qq、百度等手机浏览器都是根据webkit修改过来的内核，或内尚无自主研发的内核，就像国内手机操作系统都是基于Android修改开发的一样。总结：兼容移动端主流浏览器，处理webkit内核浏览器即可。手机屏幕现状...
2021-09-15 18:05:33
622
原创 在拉钩学习的笔记（三）PC端静态网页应用开发
1、开发流程：需求分析；整体规划；界面设计；前端程序设计；前后端系统整合；测试验收。2、页面开发常见概念和布局流程 版心：指网页中主要内容所在的区域，一般在浏览器窗口水平居中显示，从而让用户的视线更集中。常见的版心宽度值包括960px、980px、1000px；1200px。制作方法：使用标准流中的margin居中方法 页面布局流程：1、确定页面版心（可视区域）；2、分析页面中的行模块，以及每行模块中的列模块；3、制作HTML页面，CSS文件；4、CSS初始化，然后运用盒模型的原理，通过D...
2021-09-15 18:01:18
204
原创 在拉钩学习的笔记（二）HTML5
1、HTML简介 它是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改，用于取代HTML4与XHTML的新一代标准版本，所以叫HTML5 HTML5的设计目的是为了在移动设备上支持多媒体；增加了新特性：语义特性，本地存储特性，设备兼容特性，链接特性，网页多媒体特性，三维，图形及特效特性，性能与集成特性，css3特性；废弃一些元素和属性比如font、center等…… 狭义的HTML5是指HTML语言的第5个版本；广义的HTML5指的是HTML5...
2021-09-15 17:58:07
79
原创 在拉钩学习的笔记（一）CSS的核心样式
1、新增选择器 子级选择器 子级选择器用于选取带有特定父元素的元素 书写语法：element1>element2（父级>子级）2、新增选择器 兄弟选择器 相邻兄弟选择器：可以用于选择紧跟在另一个元素后面的兄弟元素，而且二者有相同的父元素 element1 + element2 匹配同一个父元素中紧跟在element1后面的一个element2元素 其他兄弟选择器：匹配同一个父元素中在element1后面的所有element2元素 e...
2021-09-15 17:54:41
365
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人