vue学习---data与el的2种写法
摘要：data与el的2种写法 1.el有2种写法 (1).new Vue时候配置el属性。 (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。 2.data有2种写法 (1).对象式 (2).函数式 如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数
阅读全文
摘要：Vue中有2种数据绑定的方式： 1.单向绑定(v-bind)：数据只能从data流向页面。 2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。 备注： 1.双向绑定一般都应用在表单类元素上（如：input、select等） 2.v-model:value 可以简
阅读全文
摘要：Vue模板语法有2大类： 1.插值语法： 功能：用于解析标签体内容。 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。 2.指令语法： 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。 举例：v-bind:href="xxx" 或 简写为 :hr
阅读全文
摘要：1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； 3.root容器里的代码被称为【Vue模板】； 4.Vue实例和容器是一一对应的； 5.真实开发中只有一个Vue实例，并且会配合着组件一起使用； 6
阅读全文
摘要：第二章：面向对象 面向对象是程序中一个非常重要的思想，它被很多同学理解成了一个比较难，比较深奥的问题，其实不然。面向对象很简单，简而言之就是程序之中所有的操作都需要通过对象来完成。 举例来说： 操作浏览器要使用window对象 操作网页要使用document对象 操作控制台要使用console对象
阅读全文
摘要：第一章 快速入门 0、TypeScript简介 TypeScript是JavaScript的超集。 它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。 TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。 TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。 相
阅读全文
摘要：单独打包第三方库 需要npm下载 add-asset-html-webpack-plugin 引入webpack(不需要下载),引入add-asset-html-webpack-plugin(需要下载) 使用dll技术，对某些库（第三方库：jquery、react、vue...）进行单独打包 当你运
阅读全文
摘要：拒绝打包,但是这样拒绝打包后(cdn链接方式引入)必须要在index.html中引入 const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.expor
阅读全文
摘要：多线程打包js,多用于babel中,可以加快打包速度 npm下载 thread-loader const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); c
阅读全文
摘要：PWA: 渐进式网络开发应用程序(离线可访问技术) npm下载workbox-webpack-plugin 1. eslint不认识 window、navigator全局变量 解决：需要修改package.json中eslintConfig配置 "env": { "browser": true //
阅读全文
摘要：js文件懒加载,在js中声明懒加载 console.log('index.js文件被加载了~'); // import { mul } from './test'; document.getElementById('btn').onclick = function () { // 懒加载~：当文件需
阅读全文
摘要：js文件拆分,将打包后多个js合并的一个js分割成多个,并行加载 1. 多入口模式和splitChunks配合,可以将js拆分成多个,并且可以将node_modules中代码单独打包,公共的文件打包成单独一个chunk 2. 单入口模式和splitChunks配合,可以将node_modules中代
阅读全文
摘要：babel(解决js兼容性问题) cacheDirectory: true缓存让第二次打包构建速度更快 缓存： babel缓存 cacheDirectory: true --> 让第二次打包构建速度更快 文件资源缓存 hash: 每次wepack构建时会生成一个唯一的hash值。 问题: 因为js和
阅读全文
摘要：oneOf 以下loader只会匹配一个 不能有两个配置处理同一种类型文件 const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const Opti
阅读全文
摘要：HMR热模块替换,能有效减少编译打包的时间 /* HMR: hot module replacement 热模块替换 / 模块热替换 作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块） 极大提升构建速度 样式文件：可以使用HMR功能：因为style-loader内部实现了~ js文
阅读全文
摘要：source-map提供源代码到构建后代码映射,编译打包后的代码报错的话会提示错误具体位置,或者隐藏源代码 source-map: 一种 提供源代码到构建后代码映射 技术 （如果构建后代码出错了，通过映射可以追踪源代码错误） [inline-|hidden-|eval-][nosources-][c
阅读全文
摘要：生产配置模板 /* webpack.config.js webpack的配置文件 作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置） 所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。 */ // resolve用来拼接绝对路径的方
阅读全文
摘要：压缩js和html文件 压缩hmtl需要npm下载 html-webpack-plugin const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.ex
阅读全文
摘要：需要npm下载 babel-loader @babel/core @babel/preset-env core-js 或者 @babel/polyfill js兼容性处理：babel-loader @babel/core 1. 基本js兼容性处理 --> @babel/preset-env 问题：只
阅读全文
摘要：压缩css 需要npm下载 css-minimizer-webpack-plugin const {resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssE
阅读全文
摘要：js语法检查 需要npm下载 eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import airbnb是一个知名的语法规范 设置检查规则要在package.json中设置 设置检查规则： "eslintConfig": {
阅读全文
摘要：压缩css 需要npm下载 optimize-css-assets-webpack-plugin 在plugins中 const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin
阅读全文
摘要：css兼容性处理 需要npm下载 postcss-loader postcss-preset-env postcss需要配置loading(module) // 在package.json中写以下代码 css兼容性处理：postcss --> postcss-loader postcss-prese
阅读全文
摘要：将css从js中提取出来,形成css文件 需要npm下载 mini-css-extract-plugin 插件 const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');
阅读全文
摘要：开发服务器 devServer 需要安装 webpack-dev-server 需要使用npx webpack-dev-server 来启动服务 const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-
阅读全文
摘要：打包其他资源(比如字体等文件) 需要的loader是 file-loader module: { rules: [ //处理css { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 打包其他资源(除了html/js/css资源以外
阅读全文
摘要：/* 开发环境配置：能让代码运行 运行项目指令： webpack 会将打包结果输出出去 npx webpack-dev-server 只会在内存中编译打包，没有输出 */ const { resolve } = require('path'); const HtmlWebpackPlugin = r
阅读全文
摘要：5.使用webpack打包页面和样式表中的图片文件 需要添加loader配置(module) npm下载 url-loader file-loader html-loader 模块 const { resolve } = require('path'); const HtmlWebpackPlugi
阅读全文
摘要：使用webpack打包html文件 需要在plugin中配置,npm下载 html-webpack-plugin 插件,随后引入等操作 /* loader: 1. 下载 2. 使用（配置loader） plugins: 1. 下载 2. 引入 3. 使用 */ const { resolve } =
阅读全文
摘要：打包样式(css/less..)资源 (在webpack.config.js中的module设置) 其rules中需要的模块需要npm下载 module: { rules: [ // 详细loader配置 // 不同文件必须配置不同loader处理 //处理css资源 { // 匹配哪些文件 tes
阅读全文
摘要：webpack的config文件配置--(webpack.config.js) 基本模板格式如下 其rules中需要的插件需要npm下载 /* webpack.config.js webpack的配置文件 作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）
阅读全文
摘要：1. 初识webpack 安装 Webpack 在安装 Webpack 前，你本地环境需要支持 node.js。 使用 npm 安装 webpack： npm install webpack webpack-cli -g //全局安装 npm install webpack webpack-cli
阅读全文
摘要：远程分支 远程跟踪分支 本地分支 正常的数据推送 和 拉取步骤 1. 确保本地分支已经跟踪了远程跟踪分支 2. 拉取数据 : git pull 3. 上传数据: git push 一个本地分支怎么去跟踪一个远程跟踪分支 1. 当克隆的时候 会自动生成一个master本地分支(已经跟踪了对应的远程跟踪
阅读全文
摘要：git高层命令(CRUD) git init 初始化仓库 git status 查看文件的状态 git diff 查看哪些修改还没有暂存 git diff --staged 查看哪些修改以及被暂存了 还没提交 git log --oneline 查看提交的历史记录 git add ./ 将修改添加到
阅读全文
摘要：1. 下载require.js, 并引入 * 官网: http://www.requirejs.cn/ * github : https://github.com/requirejs/requirejs * 将require.js导入项目: js/libs/require.js 定义一个无依赖的模块
阅读全文
摘要：Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。 安装 使用npm: $ npm install axios 使用bower $ bower install axiso 使用cdn： <script src='https://unpkg.com/axios/dist
阅读全文
摘要：//获取按钮 const btns = document.querySelectorAll('button'); //2.声明全局变量 let cancel = null; //发送请求 btns[0].onclick = function(){ //检测上一次的请求是否已经完成 if(cancel
阅读全文
摘要：中断 promise 链 (1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数 (2) 办法: 在回调函数中返回一个 pendding 状态的 promise 对象 let p = new Promise((resolve, reject) => { se
阅读全文
摘要：promise 异常传透 (1) 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调, (2) 前面任何操作出了异常, 都会传到最后失败的回调中处理 向如下这种情况.第一个then回调返回的是失败状态,但是因为有异常穿透的特性,所以只需要在末尾有catch回调即可 let
阅读全文
摘要：(1) promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用 (2) 通过 then 的链式调用串连多个同步/异步任务 let p = new Promise((resolve, reject) => { setTimeout(() => { resolv
阅读全文
摘要：(1) 简单表达: 由 then()指定的回调函数执行的结果决定 (2) 详细表达: ① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常 ② 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值 ③
阅读全文
摘要：(1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调 (2) 如何先改状态再指定回调? 当promise对象中是异步操作的时候是先制定回调再改变状态 ① 在执行器中直接调用 resolve()/reject() ② 延迟更长时间才调用 then() (3) 什么时候才能
阅读全文
摘要：当 promise 改变为对应状态时都会调用 let p = new Promise((resolve, reject) => { // resolve('OK'); }); ///指定回调 - 1 p.then(value => { console.log(value); }); //指定回调 -
阅读全文
摘要：let p = new Promise((resolve, reject) => { //1. resolve 函数 resolve('ok'); // pending => fulfilled (resolved) 成功状态 //2. reject 函数 reject("error");// pe
阅读全文
摘要：1. Promise 构造函数: Promise (excutor) {} (1) executor 函数: 执行器 (resolve, reject) => {} (2) resolve 函数: 内部定义成功时我们调用的函数 value => {} (3) reject 函数: 内部定义失败时我们
阅读全文
摘要：## Promise 的状态 实例对象中的一个属性 『PromiseState』 * pending 未决定的 * resolved / fullfilled 成功 * rejected 失败 都是从pending变为resolved 或者 pending变为rejected resolved 不能
阅读全文
摘要：//1. 通用的导入方式 //引入 m1.js 模块内容 import * as m1 from "./src/js/m1.js"; // //引入 m2.js 模块内容 import * as m2 from "./src/js/m2.js"; // //引入 m3.js import * as
阅读全文
摘要：//1. Object.is 判断两个值是否完全相等 console.log(Object.is(120, 120));// console.log(Object.is(NaN, NaN));// console.log(NaN NaN);// //2. Object.assign 对象的合并 co
阅读全文
摘要：//0. Number.EPSILON 是 JavaScript 表示的最小精度 //EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16 function equal(a, b){ if(Math.abs(a-b) < Number.EPSIL
阅读全文
摘要：// get 和 set class Phone{ get price(){ console.log("价格属性被读取了"); return 'iloveyou'; } set price(newVal){ console.log('价格属性被修改了'); } } //实例化对象 let s = n
阅读全文
摘要：1.类的由来 JavaScript 语言中，生成实例对象的传统方法是通过构造函数，但是这种写法跟传统的面向对象语言差异很大，容易让不熟悉这门语言的程序员感到困惑，下面有一个例子 ES6提供了更接近传统语言的写法，引入了 class（类）这个概念，作为对象的模板，通过class关键字，可以定义类，这种
阅读全文
摘要：//声明 Map let m = new Map(); //添加元素 m.set('name','尚硅谷'); m.set('change', function(){ console.log("我们可以改变你!!"); }); let key = { school : 'ATGUIGU' }; m.
阅读全文
摘要：//声明一个 set let s = new Set(); let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']); //元素个数 console.log(s2.size); //添加新的元素 s2.add('喜事儿'); //删除元素 s2.delete
阅读全文
摘要：const p = new Promise((resolve, reject)=>{ setTimeout(()=>{ //设置 p 对象的状态为失败, 并设置失败的值 reject("出错啦!"); }, 1000) }); // p.then(function(value){}, functio
阅读全文
摘要：//引入 fs 模块 const fs = require("fs"); // fs.readFile('./resources/为学.md', (err, data1)=>{ // fs.readFile('./resources/插秧诗.md', (err, data2)=>{ // fs.re
阅读全文
摘要：// 接口地址: https://api.apiopen.top/getJoke // 成功是resolve 失败是 reject const p = new Promise((resolve, reject) => { //1. 创建对象 const xhr = new XMLHttpReques
阅读全文
摘要：// 异步编程 文件操作 网络操作(ajax, request) 数据库操作 // 1s 后控制台输出 111 2s后输出 222 3s后输出 333 // 回调地狱 // setTimeout(() => { // console.log(111); // setTimeout(() => { /
阅读全文
摘要：//模拟获取 用户数据 订单数据 商品数据 function getUsers(){ setTimeout(()=>{ let data = '用户数据'; //调用 next 方法, 并且将数据传入 iterator.next(data); }, 1000); } function getOrde
阅读全文
摘要：function * gen(arg){ console.log(arg); let one = yield 111; console.log(one); let two = yield 222; console.log(two); let three = yield 333; console.lo
阅读全文
摘要：//生成器其实就是一个特殊的函数 //异步编程 纯回调函数 node fs ajax mongodb //函数代码的分隔符 function * gen(){ // console.log(111); yield '一只没有耳朵'; // console.log(222); yield '一只没有尾
阅读全文
摘要：//声明一个对象 const banji = { name: "终极一班", stus: [ 'xiaoming', 'xiaoning', 'xiaotian', 'knight' ], [Symbol.iterator]() { //索引变量 let index = 0; // let _thi
阅读全文
摘要：遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。 1) ES6 创造了一种新的遍历命令 for...of 循环，Iterator 接口主要供 for...of 消费 2) 原生具备 ite
阅读全文
摘要：ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。 Symbol 特点 1) Symbol 的值是唯一的，用来解决命名冲突的问题 2) Symbol 值不能与其他数据进行运算 3) Symbol 定义
阅读全文
摘要：// 可以使用拓展运算符复制数组 let lol = ['武器大师','EZ','妖姬']; let hero = [...lol]; console.log(hero); // 可以使用拓展运算符合并数组 let tirr = ['铁镐','铁剑','强化鱼竿']; let world = ['钻
阅读全文
摘要：// 『...』 扩展运算符能将『数组』转换为逗号分隔的『参数序列』 //声明一个数组 ... const tfboys = ['易烊千玺', '王源', '王俊凯']; // => '易烊千玺','王源','王俊凯' // 声明一个函数 function chunwan(...args) { co
阅读全文
摘要：// ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments // ES5 获取实参的方式 function date(){ console.log(arguments); } date('白芷','阿娇','思慧'); // rest 参数 function date(..
阅读全文
摘要：// ES6 允许使用「箭头」（=>）定义函数。 //声明一个函数 // let fn = function(){ // } // let fn = (a,b) => { // return a + b; // } //调用函数 // let result = fn(1, 2); // consol
阅读全文
摘要：//ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。 //这样的书写更加简洁 let name = '尚硅谷'; let change = function(){ console.log('我们可以改变你!!'); } const school = { name, change,
阅读全文
摘要：//1. 内容中可以直接出现换行符 let str = `<ul> <li>沈腾</li> <li>玛丽</li> <li>魏翔</li> <li>艾伦</li> </ul>`; //2. 变量拼接 let lovest = '魏翔'; let out = `${lovest}是我心目中最搞笑的演员
阅读全文
摘要：const ARR = ['手枪','步枪','冲锋枪']; let [bq,sq,cfq] = ARR; console.log(bq,sq,cfq); const OBJ = { name:'老王', age:50, say:function(){ console.log("我是老王"); }
阅读全文
摘要：//声明常量 const SCHOOL = '尚硅谷'; //1. 一定要赋初始值 !! //const A; //2. 一般常量使用大写(潜规则) // const a = 100; //3. 常量的值不能修改 // SCHOOL = 'ATGUIGU'; //4. 块儿级作用域 // { //
阅读全文
摘要：//声明变量 let a; let b,c,d; let e = 100; let f = 521, g = 'iloveyou', h = []; //1. 变量不能重复声明 let star = '罗志祥'; let star = '小猪'; //2. 块儿级作用域 全局, 函数, eval 读
阅读全文
摘要：<script crossorigin="anonymous"> $('button').eq(0).click(function(){ $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data){
阅读全文
摘要：const btn = document.querySelector('button'); btn.onclick = function(){ fetch('http://127.0.0.1:8000/fetch-server?vip=10', { //请求方法 method: 'POST', //
阅读全文
摘要：btns[2].onclick = function(){ axios({ //请求方法 method : 'POST', //url url: '/axios-server', //url参数 params: { vip:10, level:30 }, //头信息 headers: { a:100
阅读全文
摘要：const btns = document.querySelectorAll('button'); //配置 baseURL axios.defaults.baseURL = 'http://127.0.0.1:8000'; btns[0].onclick = function () { //GET
阅读全文
摘要：$('button').eq(2).click(function(){ $.ajax({ //url url: 'http://127.0.0.1:8000/jquery-server', //参数 data: {a:100, b:200}, //请求类型 type: 'GET', //响应体结果
阅读全文
摘要：$('button').eq(0).click(function(){ $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){ console.log(data); },'json'); //最后的参数
阅读全文
摘要：//获取元素对象 const btns = document.querySelectorAll('button'); let x = null; //标识变量 let isSending = false; // 是否正在发送AJAX请求 btns[0].onclick = function(){ /
阅读全文
摘要：abort 取消AJAX请求 //获取元素对象 const btns = document.querySelectorAll('button'); let x = null; btns[0].onclick = function(){ x = new XMLHttpRequest(); x.open
阅读全文
摘要：const btn = document.getElementsByTagName('button')[0]; const result = document.querySelector('#result'); btn.addEventListener('click', function(){ co
阅读全文
摘要：const btn = document.getElementsByTagName('button')[0]; const result = document.querySelector('#result'); btn.addEventListener('click', function(){ co
阅读全文
摘要：const result = document.getElementById('result'); //绑定键盘按下事件 window.onkeydown = function(){ //发送请求 const xhr = new XMLHttpRequest(); //2. 自动转换 设置响应体数据
阅读全文
摘要：var btn = document.querySelector('button'); var res = document.querySelector('#result'); btn.onclick = function () { //创建对象 const xml = new XMLHttpReq
阅读全文
摘要：//获取元素对象 const result = document.getElementById("result"); //绑定事件 result.addEventListener("mouseover", function(){ //1. 创建对象 const xhr = new XMLHttpRe
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AJAX GET
阅读全文
摘要：//1. 引入express const express = require('express'); //2. 创建应用对象 const app = express(); //3. 创建路由规则 // request 是对请求报文的封装 // response 是对响应报文的封装 app.get('
阅读全文
摘要：HTTP HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。 约定, 规则 请求报文 ※重点是格式与参数 行 POST /s?ie=utf-8 HTTP/1.1 头 Host: atguigu.com C
阅读全文
摘要：安装淘宝npm（cnpm） 1.安装cnpm (1)输入以下命令 npm install -g cnpm --registry=https://registry.npm.taobao.org
阅读全文
摘要：- npm的命令 - npm -v 查看npm的版本 - npm version 查看所有模块的版本 - npm search 包名 搜索包 - npm install / i 包名 安装包 - npm remove / r 包名 删除包 ※常用 npm install 包名 --save 安装包并
阅读全文
摘要：- 模块化 - ES5中没有原生支持模块化，我们只能通过script标签引入js文件来实现模块化 - 在node中为了对模块管理，引入了CommonJS规范 - 模块的引用 - 使用 require()函数来引入一个模块 - 例子： var 变量 = require("模块的标识"); - 模块的定
阅读全文
摘要：1.命令行窗口(小黑屏)、CMD窗口、终端、shell - 开始菜单 --> 运行 --> CMD --> 回车 - 常用的指令： dir 列出当前目录下的所有文件 cd 目录名 进入到指定的目录 md 目录名 创建一个文件夹 rd 目录名 删除一个文件夹 - 目录 . 表示当前目录 .. 表示上一
阅读全文
摘要：###疯狂的表单 Html5 Forms概述,在Html5中: 1.表单仍然使用<form>元素作为容器,我们可以在其中设置基本的提交特性 form的action指向一个服务器地址（接口） 2.当用户或开发人员提交页面时,表单仍然用于向服务端发送表单中控件的值 注意表单项的name属性必须有值，服务
阅读全文
摘要：###状态标签 meter:用来显示已知范围的标量值或者分数值。 value:当前的数值。 min:值域的最小边界值。如果设置了，它必须比最大值要小。如果没设置，默认为0 max:值域的上限边界值。如果设置了，它必须比最小值要大。如果没设置，默认为1 low:定义了低值区间的上限值,如果设置了，它必
阅读全文
摘要：###html5标签 <video>:Html5提供的播放视频的标签 src:资源地址 controls:该属性定义是显示还是隐藏用户控制界面 <audio>:Html5提供的播放音频的标签 src:资源地址 controls:该属性定义是显示还是隐藏用户控制界面 <source> 视频： type
阅读全文
摘要：###音频&视频 大家都有在网页中浏览视频的经历，但在Html5之前，对视频乃至音频都还没有一个标准 因此在网页中看到的视频，都是通过第三插件的方式嵌入的，可能是QuickTime，也可能是 RealPlayer 或者 Flash。浏览器很好的整合了这些插件，你完全意识不到它们的存在 在介绍Html
阅读全文
