名师点津-CSDN博客

原创 web component

// 通过 window.customElements 访问 CustomElementRegistry 的实例// console.log(window.customElements)// --- 独立元素的创建方式 ---// 1 提前准备用于定义元素的类class DemoElement extends HTMLElement { constructor () { super() }}// 2 创建自定义元素（俗称创建 Web 组件实例）window.custo.

2022-05-09 21:44:54 350

原创 Vue Router

单页应用 SPA（Single Page Application）单页面应用程序，简称单页应用。指的是网站的 “所有” 功能都在单个页面中进行呈现。具有代表性的有后台管理系统、移动端、小程序等。• 优点： • 前后端分离开发，提高了开发效率。 • 业务场景切换时，局部更新结构。 • 用户体验好，更加接近本地应用。单页应用 • 缺点： • 不利于 SEO。 • 初次首屏加载速度较慢。 • 页面复杂度比较高。前端路由前端路由，指的是 URL 与内容.

2022-05-04 22:23:16 509

原创组件插槽 Vue.js

组件插槽可以便捷的设置组件内容。组件插槽 • 单个插槽 • 具名插槽 • 作用域插槽单个插槽 • 如果我们希望组件标签可以像 HTML 标签一样设置内容，那么组件的使用灵活度会很高。但平常我们书写的组件，组件首尾标签中书写的内容会被抛弃。我们需要通过 <slot> 进行插槽设置。需要注意模板内容的渲染位置：我们可以在 <slot> 中为插槽设置默认值，也称为后备内容。具名插...

2022-04-28 15:47:18 232

原创组件通信Vue.js

子组件如何获取父组件中的数据？父组件如何得知子组件的数据变更？如果是更加复杂的组件关系呢？在组件间传递数据的操作，称为组件通信。组件通信 • 父组件向子组件传值 • 子组件向父组件传值 • 非父子组件传值 • 其他通信方式父组件向子组件传值组件通信父组件向子组件传值 • 通过子组件的 props 选项接收父组件的传值。注意：props 不要与 data 存在同名属性。父组件向子组件传值 • 父组件设置方式如下：Props 命名规则 • 建议 prop..

2022-04-22 22:23:10 1778

原创 Vue.js 组件

组件用于封装页面的部分功能，将功能的结构、样式、逻辑代码封装为整体。提高功能的复用性与可维护性，更好的专注于业务逻辑。组件使用时为自定义 HTML 标签形式，通过组件名作为自定义标签名。• 组件注册 • 组件通信 • 组件插槽 • 内置组件组件注册 • 全局注册 • 组件基础 • 局部注册全局注册 • 全局注册的组件在注册后可以用于任意实例或组件中。 • 注意：全局注册必须设置在根 Vue 实例创建之前。组件基础 •..

2022-04-21 21:49:22 262

原创 Async 函数

Promise 的出现解决了异步操作回调地狱的问题，但书写⽅式中函数出现了⼤量的回调，虽然没有嵌套，但可读性远不及同步代码清晰。为了让异步代码书写更加简洁、可读性更强，在 ES2017 中提供了 Async 函数（异步函数），⽤于简化 Promise 的书写⽅式，让代码格式更加接近同步代码写法。 Async 是异步编程的新标准，是⼀种⽤于改进异步书写的语法糖，本质还是 promise 对象。使⽤⽅式：在任意函数前设置 async 关键字，将函数设置为 async 函数（异步函

2022-04-19 16:22:36 208

原创 Promise 讲解

背景说明从同步与异步说起： JavaScript 中具有同步和异步的概念，最常⻅的异步操作莫过 Ajax，Ajax 是前后端数据交互的桥梁。异步操作特点：同步任务总是顺序执⾏的。与同步任务不同，异步任务执⾏结果与书写顺序⽆关，例如，定时器结束时间取决于延迟时间；Ajax 的响应成功时间取决于数据量与⽹速。这就导致，如果要对异步操作的结果进⾏处理，就必须使⽤回调函数（callback）。问题出现：思考：如果有多个请求，每个请求都依赖与前⼀个请求的结果，这时

2022-04-18 21:57:38 506

原创 vue侦听器

侦听器用于监听数据变化并执行指定操作。为了监听对象内部值的变化，需要将 watch 书写为对象，并设置选项 deep: true，这时通过 handler 设置处理函数。注意：当更改（非替换）数组或对象时，回调函数中的新值与旧值相同，因为它们的引用都指向同一个数组、对象。 • 注意：数组操作不要使用索引与length，无法触发侦听器函数。<div id="app"> <input type="text" v-model="value"&gt...

2022-04-15 14:42:40 589

原创 vue计算属性

Vue.js 的视图不建议书写复杂逻辑，这样不利于维护封装函数是很好的方式，但有时重复的计算会消耗不必要的性能。如何提高执行效率？计算属性使用时为属性形式，访问时会自动执行对应函数。methods 与 computed 区别 • computed 具有缓存型，methods 没有。 • computed 通过属性名访问，methods 需要调用。 • computed 仅适用于计算操作。准备一个数组，根据数组数据创建列表。 • 要求...

2022-04-15 11:21:26 162

原创 vue过滤器

过滤器用于进行文本内容格式化处理。过滤器可以在插值表达式和 v-bind 中使用。过滤器 • 全局过滤器 • 局部过滤器全局过滤器 • 可以将一个数据传入到多个过滤器中进行处理。一个过滤器可以传入多个参数。局部过滤器 • 局部过滤器只能在当前 Vue 实例中使用。...

2022-04-15 10:13:12 5463

原创 vue指令

• 自定义全局指令• 自定义局部指令自定义全局指令自定义全局指令• 指的是可以被任意 Vue 实例或组件使用的指令。// 自定义全局指令 Vue.directive('focus', { inserted (el, binding) { // console.log(el); console.log(binding); el.focus(); } }); new Vue({ ...

2022-04-13 11:28:14 483

原创 vue修饰符

修饰符是以点开头的指令后缀，用于给当前指令设置特殊操作。修饰符 • 事件修饰符 • 按键修饰符 • 系统修饰符 • 鼠标修饰符 • v-model 修饰符事件修饰符 .prevent 修饰符• .stop 修饰符 • .once 修饰符.prevent 修饰符 • 用于阻止默认事件行为，相当于 event.preventDefault()。.stop 修饰符.• 用于阻止事件传播，相当于 event.stopPropagation()。

2022-04-12 20:45:24 199

原创 vue表单输入绑定

v-model 指令 • 用于给 <input> 、<textarea> 及 <select> 元素设置双向数据绑定。 • 首先我们来体验一下双向数据绑定的效果。输入框绑定表单数据绑定输入框绑定 • 输入框分为单行输入框 input 与多行输入框 textarea。单选按钮绑定表单数据绑定单选按钮绑定 • 单选按钮的双向数据绑定方式如下复选框绑定表单数据绑定复选框绑定 • 复选框...

2022-04-12 11:26:36 1340

原创 Vue.js 指令

指令的本质就是 HTML 自定义属性Vue.js 的指令就是以 v- 开头的自定义属性内容处理• v-once 指令内容处理 • v-text 指令 • v-html 指令v-once 指令v-once 指令 • 使元素内部的插值表达式只生效一次。v-text 指令v-text 指令 • 元素内容整体替换为指定纯文本数据。v-html 指令• 元素内容整体替换为指定的 HTML 文本。属性绑定 • v-bind 指令 ...

2022-04-10 16:27:19 1010

原创 Vue.js 基础语法

Vue.js 基础语法 • Vue 实例 • 基础选项 • 指令 • 其他选项Vue 实例Vue 实例 • Vue 实例是通过 Vue 函数创建的对象，是使用 Vue 功能的基础el 选项el 选项 • 用于选取一个 DOM 元素作为 Vue 实例的挂载目标。 • 只有挂载元素内部才会被 Vue 进行处理，外部为普通 HTML 元素。 • 代表 MVVM 中的 View 层（视图）。el 选项 • 可以为 CSS 选择器格式的字符串或 HTMLElemen.

2022-04-10 15:23:33 110

原创 Vue.js 简介

传统网页开发步骤请求数据生成结构监听变化元素变化发送请求更新结构DOM 操作频繁，代码繁杂DOM 操作与逻辑代码混合，可维护性差不同功能区域书写在一起，可维护性低模块之间的依赖关系复杂Vue.js 是什么？前端流行框架核心特性 • 数据驱动视图 • 组件化开发、数据驱动视图 • 数据变化会自动更新到对应元素中，无需手动操作 DOM，这种行为称作单向数据绑定。 • 对于输入框等可输入元素，可设置双向数据绑定。 • 双

2022-04-10 11:20:14 668

原创代码格式校验

• 为什么 • 不同的工程师，写的代码风格不同 • 项目代码提交时，需要保持统一的代码格式 • 如何实现（通过工具完成代码格式校验） • 提供编码规范 • 根据编码规范，自动检查代码ESLint 对 JavaScript 代码格式进行检查使用 ESLint • 初始化项目（ npm init --yes ） • 安装 ESLint （ npm i eslint -g ） • 初始化配置文件（ eslint --init ） • 检查 JS

2022-04-09 18:23:50 695

原创 npm scripts

实现自动化构建的最简方式什么是 npm scripts • npm 允许在 package.json 文件中，使用 scripts 字段定义脚本npm scripts 自定义脚本命令1. 声明命令（package.json） “scripts”: { “foo”: “node bar.js” }2. 执行命令 (命令行) npm run foo 等同于 node bar.jsnpm scripts 中任务的执行方式并行.

2022-04-09 18:19:14 1235 1

原创自动化构建

什么是构建构建过程为什么构建（构建内容） • 一些代码需要编译（CSS，JS），保证浏览器的兼容性； • 将 Less 或 Sass 转换成 CSS • 将 ES6+ 的新语法转成 ES5 • 有些代码需要压缩（CSS，JS，HTML，图片等）； • 压缩之后的代码体积更小，加载更快，节省带宽 • 有些代码需要做格式化校验，统一代码风格；构建初体验将 less 转成 css步骤 • 安装 less 插件（npm i...

2022-04-09 18:06:10 709

原创 Yeoman

Yeoman 的基本概念 • Yeoman 是一款脚手架工具 • 可以帮助开发人员创建项目的基础结构代码 • yo 是 Yeoman 的命令行管理工具 • 可以在命令行运行 yeoman 的命令 • 生成器：Yeoman 中具体的脚手架 • 针对不同项目有不同的脚手架（例如：网站，APP，小程序等）Yeoman 使用说明 • 全局安装 yo • 安装 generator • 通过 yo...

2022-04-09 11:19:02 241

原创 . 网站概述

5.1 网站的组成从开发者的角度来看，web 应用主要由三部分组成：用户界面，业务逻辑，数据。 1. 用户界面 (视图层)：用于将数据展示给用户的地方，采用 HTML，CSS，JavaScript 编写。 2. 业务逻辑 (控制层)：实现业务需求和控制业务流程的地方，可以采用 Java, PHP, Python, JavaScript 编写。 3. 数据 (模型层)：应用的核心部分, 应用业务逻辑的实现，用户界面的展示都是基于数据的， web 应用中的数据通常是存储在数据库中的，

2022-04-08 20:32:59 448

原创宏任务与微任务

4.11.1 宏任务与微任务宏任务：setInterval, setTimeout, setImmediate, I/O 微任务：Promise.then Promise.catch Promise.finally, process.nextTick 4.11.2 微任务与宏任务的区别 1. 微任务的回调函数被放置在微任务队列中，宏任务的回调函数被放置在宏任务队列中。 2. 微任务优先级高于宏任务。当微任务事件队列中存在可以执行的回调函数时，事件循环在执行完当前阶段的回调函数后会

2022-04-08 20:29:01 767

原创 Event Loop 机制概述

1. 为什么要学习事件循环机制? 学习事件循环可以让开发者明白 JavaScript 的运行机制是怎么样的。 2. 事件循环机制做的是什么事情？事件循环机制用于管理异步 API 的回调函数什么时候回到主线程中执行。 Node.js 采用的是异步 I/O 模型。同步 API 在主线程中执行，异步 API 在底层的 C++ 维护的线程中执行，异步 API 的回调函数在主线程中执行。在 JavaScript 应用运行时，众多异步 API 的回调函数什么时候能回到主线程中调用呢？这就是

2022-04-08 20:17:07 337

原创基于回调函数的异步编程

1. 什么是回调函数回调函数是指通过函数参数的方式将一个函数传递到另一个函数中，参数函数就是回调函数。function A() { console.log("A is running") }function B(callback) { console.log("B Start") callback() // A is running console.log("B End") }B(A)我们经常将回调函数写成 callback，实际上它是 call then

2022-04-08 20:15:24 903

原创异步编程

4.1 CPU 与存储器目标: 了解程序运行过程中 CPU 和存储器起到了什么作用或者说扮演了什么角色. 1. CPU 中央处理器，计算机核心部件，负责运算和指令调用。开发者编写的 JavaScript 代码在被编译为机器码以后就是通过 CPU 执行的。 2. 存储器内存：用于临时存储数据，断电后数据丢失。由于数据读写速度快，计算机中的应用都是在内存中运行的。磁盘：用于持久存储数据，断电后数据不丢失。内部有磁头依靠马达转动在盘片上读写数据, 速度比内存慢。

2022-04-08 19:58:18 1864

原创 NPM详解

3.1 Node.js 软件包每一个基于 Node.js 平台开发的应用程序都是 Node.js 软件包。所有 Node.js 软件包都被托管在 www.npmjs.com 中。 3.2 什么是 NPM Node Package Manager，Node.js 环境中的软件包管理器。随 Node.js 一起被安装。它可以将 Node 软件包添加到我们的应用程序中并对其进行管理，比如下载，删除，更新，查看版本等等。它没有用户界面，需要在命令行工具中通过命令的方式使用，对应

2022-04-08 13:00:24 501

原创模块系统。

2.1 模块概述在 Node.js 环境中，默认就支持模块系统，该模块系统遵循 CommonJS 规范。一个 JavaScript 文件就是一个模块，在模块文件中定义的变量和函数默认只能在模块文件内部使用，如果需要在其他文件中使用，必须显式声明将其进行导出。 2.2 模块成员导出在每一个模块文件中，都会存在一个 module 对象，即模块对象。在模块对象中保存了和当前模块相关信息。在模块对象中有一个属性 exports，它的值是一个对象，模块内部需要被导出的成员都应该存储在

2022-04-08 10:51:50 99

原创 Node.js全局对象

Node.js 初体验在命令行工具中通过 node JavaScript 文件的方式执行代码。 function sayHello (name) { console.log('Hello' + name) }1.6 全局对象 console.log(window) // window is not defined 在 Node.js 环境中是没有 window 的，所以 window 对象自然是未定义的。在 Node.js 环境中全局对象为 global，在 glo

2022-04-07 21:49:43 1526

原创 Node.js 全栈基础

1. Node.js 光速入门 1.1 Node.js 概述 1. Node.js 是什么 Node.js 不是一门编程语言，它是一个执行 JavaScript 代码的工具。工具是指可以安装在计算机操作系统之上的软件。 2. 为什么浏览器和 Node.js 都可以运行 JavaScript 因为浏览器和 Node.js 都内置了 JavaScript V8 Engine。它可以将 JavaScript 代码编译为计算机能够识别的机器码。 3. 浏览器中运行的 J.

2022-04-07 21:29:02 552

原创 Git使用方法

Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。 • Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。 • 线上托管平台：github.com、 gitee.com、 gitlab.com分布式 • git 是分布式代码管理 • 类似于，人类身体每个细胞中，不是只有某个 DNA 片段，而是整个人的所有 DNA。 • 理论上来说，我们可以通过任何一个细胞克隆整个人。 • 对于程序来...

2022-04-06 21:16:42 621

原创 artTemplate

art-template 是一个简约、超快的模板引擎。 • 网址：https://github.com/aui/artTemplate • 中文使用文档：https://aui.github.io/art-template/zh-cn/docs/ • 常用语法： • <% 与 %> 符号包裹起来的语句则为模板的逻辑表达式 • <%= content %>为输出表达式artTemplate 使用步骤 • 引入模板文件 • 创建模板 • 将数据跟模板进行绑

2022-04-05 21:58:42 409

原创 jQuery 中的 jsonp

jQuery基本使用 $.ajax(） • jQuery 中使用 JSONP 就是将 dataType 设置为 jsonp<script src="js/jquery-1.12.4.min.js"></script> <script> $(".btn").click(function () { // 发送跨域的 ajax 请求 $.ajax({ url: "https://www.baidu.com/sugrec...

2022-04-05 15:27:21 1785

原创全局配置默认值

可以指定将被用在各个请求的配置默认值 axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script>..

2022-04-04 20:11:33 418

原创 Axios API

可以通过向 axios() 传递相关配置来创建请求 • axios(config) config为对象格式的配置选项 • axios(url, config) config 可选常用配置项 • url 用于请求的服务器 URL，必需 • method 创建请求时使用的方法 • baseURL 传递相对 URL 前缀，将自动加在 url 前面 • headers 即将被发送的自定义请求头 • params 即将与请求一起发送的 URL 参数 • data

2022-04-04 19:42:16 90

原创 Axios

Axios 库 • 地址：https://unpkg.com/axios/dist/axios.min.js • 使用 script 标签引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> // 体会 get 请求 axios.get("http://localhost:3000/db") .then(function ...

2022-04-04 19:38:16 158

原创 jQuery 中其他 Ajax 方法

其他方法 • $.ajaxSetup()<script src="js/jquery-1.12.4.min.js"></script> <script> // ajaxSetup() 方法，设置默认的参数 $.ajaxSetup({ url: "http://localhost:3000/users", type: "post" }) // 发送 ajax请求 $.ajax({ dat...

2022-04-04 18:39:07 388

原创 jQuery的AJAX其他请求

• put 更改 • delete 删除<script src="js/jquery-1.12.4.min.js"></script> <script> // put 请求，更改数据 // $.ajax({ // url: "http://localhost:3000/comments/4", // type: "put", // dataType: "json", // data: {...

2022-04-04 18:30:47 144

原创 jQuery的AJAX之POST 请求

$.post() • POST 请求快捷方法 • $.post(url, data, callback)<script src="js/jquery-1.12.4.min.js"></script> <script> // 发送 post 请求 // $.ajax({ // url: "http://localhost:3000/comments", // type: "post", // data...

2022-04-04 18:22:40 10323

原创 jquery的AJAX的GET 请求

$.get() • GET 请求快捷方法 • $.get(url, data, callback)<script src="js/jquery-1.12.4.min.js"></script> <script> // 发送 get 请求 // $.ajax({ // url: "http://localhost:3000/comments", // type: "get", // dataType:...

2022-04-04 18:11:49 4662

原创 jquery的ajax

$.ajax() • 常用选项参数介绍： • url：请求地址 • type：请求方法，默认为 `get` • dataType：服务端响应数据类型 • contentType：请求体内容类型，默认 `application/x-www-form-urlencoded` • data：需要传递到服务端的数据，如果 GET 则通过 URL 传递，如果 POST 则通过请求体传递• timeout：请求超时时间 • beforeSend：请求发起之前触发 • succe

2022-04-04 18:08:46 50

vue的todoMVC实现

空空如也