- 博客(23)
- 收藏
- 关注
原创 Vue学习笔记——过渡、VueRouter、Vuex
文章目录过滤器定义过滤器参数过滤器串联练习首字母大写数字中间加上逗号数字添加文字“万”安装脚手架安装@vue/cli快速原型开发安装vscode插件利用脚手架搭建项目渲染函数基础节点、树、以及虚拟DOM虚拟DOMcreateElement参数深入数据对象使用JavaScript代替模板功能v-if 和 v-forv-model事件&按键修饰符插槽JSX插值指令v-textv-htmlv-showv-ifv-forv-onv-bindv-modelv-slotv-prev-cloakv-onceRef
2020-08-06 18:31:03 728
原创 VUE学习笔记——组件篇
文章目录组件基础组件是什么?组件注册全局组件局部组件组件名组件复用自闭合组件组件的data选项单个根元素组件_Prop注册自定义特性Prop的大小写传递静态或动态 Prop传递一个对象的所有属性组件_Prop验证组件_单向数据流组件_非Prop特性替换/合并已有的特性禁用特性继承组件_监听组件事件使用事件抛出一个值事件名将原生事件绑定到组件在组件上使用 v-model.sync 修饰符v-model VS .sync组件_插槽插槽内容编译作用域后备内容具名插槽作用域插槽独占默认插槽的缩写语法解构插槽Prop
2020-06-20 15:33:01 2519
原创 VUE学习笔记——基础篇
文章目录开始使用Vueel$mountdata插值表达式vue的响应式-1vm.$elvm.$nextTick & Vue.nextTickvue的响应式-2扩展_剖析Vue响应式原理Vue相关指令v-prev-cloakv-oncev-textv-html条件渲染v-ifv-elsev-else-ifv-showv-if VS v-showv-bind 指令v-on指令为什么在 HTML 中监听事件?v-on指令的修饰符事件修饰符.stop.prevent.capture.self.once.pa
2020-06-01 10:50:40 876
原创 Webpack学习笔记——性能优化(2)
7.代码压缩代码压缩可以减少代码体积;破坏代码的可读性,提升破解成本;通常只是用于生产环境目前最流行的代码压缩工具主要有两个:UglifyJs和TerserUglifyJs是一个传统的代码压缩工具,已存在多年,曾经是前端应用的必备工具,但由于它不支持ES6语法,所以目前的流行度已有所下降。Terser是一个新起的代码压缩工具,支持ES6+语法,因此被很多构建工具内置使用。webpack安装...
2020-03-19 12:13:12 552
原创 Webpack学习笔记——性能优化(1)
1.性能优化概述本章所讲的性能优化主要体现在三个方面:构建性能这里所说的构建性能,是指在开发阶段的构建性能,而不是生产环境的构建性能优化的目标,是降低从打包开始,到代码效果呈现所经过的时间构建性能会影响开发效率。构建性能越高,开发过程中时间的浪费越少传输性能传输性能是指,打包后的JS代码传输到浏览器经过的时间在优化传输性能时要考虑到:总传输量:所有需要传输的JS文件的内容加起...
2020-03-18 11:24:12 538
原创 Webpack学习笔记——css工程化
文章目录1.css工程化概述1-1.css存在的问题类名冲突的问题重复样式css文件细分问题1-2.如何解决解决类名冲突解决重复样式的问题解决css文件细分问题2.利用webpack拆分csscss-loaderstyle-loader3.BEM1.css工程化概述1-1.css存在的问题类名冲突的问题当你写一个css类的时候,你是写全局的类呢,还是写多个层级选择后的类呢?你会发现,怎么...
2020-03-13 15:00:46 350
原创 Webpack学习笔记——常用扩展
1.清除输出目录clean-webpack-pluginhttps://www.npmjs.com/package/clean-webpack-plugin// webpack.config.jsconst { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 引入clean-webpack-pluginmodule...
2020-03-12 13:37:00 175
原创 Webpack学习笔记(2)
文章目录1-9.入口和出口出口入口1-9.入口和出口前置知识(node中):./:模块化代码中,比如require("./"),表示当前js文件所在的目录在路径处理中,"./"表示node运行目录__dirname:所有情况下,都表示当前运行的js文件所在的目录,它是一个绝对路径;node内置模块 - path:官方文档:https://nodejs.org/dist/la...
2020-03-09 13:02:43 460
原创 Webpack学习笔记
文章目录1-1.浏览器端的模块化问题:根本原因解决办法常见的构建工具1-2.webpack的安装和使用webpack简介webpack的安装基本使用1-3.模块化兼容性同模块化标准不同模块化标准最佳实践1-1.浏览器端的模块化问题:效率问题:精细的模块划分带来了更多的JS文件,更多的JS文件带来了更多的请求,降低了页面访问效率兼容性问题:浏览器目前仅支持ES6的模块化标准,并且还存在兼容性...
2020-03-08 10:21:05 623
原创 ES6学习笔记——补充扩展和基本面试题
面试题下面的输出结果是多少const promise = new Promise((resolve, reject) => { console.log(1); resolve(); console.log(2);})promise.then(() => { console.log(3);})console.log(4);// 1 ...
2020-03-04 19:23:22 300
原创 ES6学习笔记——新增数组API
13-1.新增的数组API静态方法Array.of(...args): 使用指定的数组项创建一个新数组;-使用new Array也可以创建新数组,但是当传递的参数只有一个并且是数字时,那么它表示的是数组的长度,而不是数组的数组项;//const arr = new Array(1,2,3,4,5);const arr = Array.of(1,2,3,4,5);console.lo...
2020-02-28 09:56:08 606
原创 ES6学习笔记——代理与反射
12-1.属性描述符(回顾)Property Descriptor 属性描述符 是一个普通对象,用于描述一个属性的相关信息;通过Object.getOwnPropertyDescriptor(对象, 属性名)可以得到一个对象的某个属性的属性描述符;也可以通过 Object.getOwnPropertyDescriptors(对象)可以得到某个对象的所有的属性描述符;value:属性值...
2020-02-26 17:05:58 471 2
原创 ES6学习笔记——集合类型之set与map
11-1. set 集合一直以来,JS只能使用数组和对象来保存多个数据,缺乏像其他语言那样拥有丰富的集合类型。因此,ES6新增了两种集合类型(set和 map),用于在不同的场景中发挥作用。set用于存放不重复的数据如何创建set集合new Set(); //创建一个没有任何内容的set集合new Set(iterable); //创建一个具有初始内容的set集合,内容来自于可迭代...
2020-02-25 17:01:36 248
原创 ES6学习笔记——迭代器与生成器
10.迭代器和生成器10-1.迭代器背景知识什么是迭代?从一个数据集合中按照一定的顺序,不断取出数据的过程迭代和遍历的区别?迭代强调的是依次取数据,并不保证取多少,也不保证把所有的数据取完遍历强调的是要把整个数据依次全部取出迭代器对迭代过程的封装,在不同的语言中有不同的表现形式,通常为对象迭代模式一种设计模式,用于统一迭代过程,并规范了迭代器规格: - 迭代...
2020-02-24 09:33:42 182
原创 Fetch Api
1.Fetch Api 概述XMLHttpRequest的问题所有的功能全部集中在同一个对象上,容易书写出混乱不易维护的代码采用传统的事件驱动模式,无法适配新的 Promise ApiFetch Api 的特点并非取代 AJAX,而是对 AJAX 传统 API 的改进精细的功能分割:头部信息、请求信息、响应信息等均分布到不同的对象,更利于处理各种复杂的 AJAX 场景使用 Pr...
2020-02-23 11:37:59 387
原创 ES6学习笔记——Promise(2)
8.3 Promise的基本使用const pro = new Promise((resolve, reject)=>{ // 未决阶段的处理 // 通过调用resolve函数将Promise推向已决阶段的resolved状态 // 通过调用reject函数将Promise推向已决阶段的rejected状态 // resolve和reject均可以传递最多一...
2020-02-20 15:53:41 241
原创 ES6学习笔记——Promise(1)
8.异步处理之Promise8.1 [回顾]事件循环JS运行的环境称之为宿主环境。执行栈:call stack,一个数据结构,用于存放各种函数的执行环境,每一个函数执行之前,它的相关信息会加入到执行栈。函数调用之前,创建执行环境,然后加入到执行栈;函数调用之后,销毁执行环境。JS引擎永远执行的是执行栈的最顶部。异步函数:某些函数不会立即执行,需要等到某个时机到达后才会执行,这样的函数称之...
2020-02-18 18:23:16 252
原创 ES6学习笔记——解构与符号(Symbol)
6.解构6.1对象解构什么是解构使用ES6的一种语法规则,将一个对象或数组的某个属性提取到某个变量中解构不会对被解构的目标造成任何影响const user = { name: "kevin", age: 18, sex: "男", address: { province: "山西", city: "忻州" }}...
2020-02-17 12:00:19 1118
原创 ES6学习笔记——对象(类)
5.对象5-1. 新增的对象字面量语法1. 成员速写(属性的简洁表示法)如果对象字面量初始化时,成员的名称来自于一个变量,并且和变量的名称相同,则可以进行简写;function foo(x, y) { return {x: x, y: y};}//简写后function foo(x, y) { return {x, y};}foo(1, 2) // Object {x: ...
2020-02-15 16:06:37 255
原创 数组题
1.数组乱序var arr = [1,2,3,4,5,6,7,8,9]; //这种算法,适合面对面笔试。 var newArr = []; while(arr.length > 0) { var num = Math.floor(Math.random() * arr.length); newArr.push(arr[num]); arr.splic...
2020-02-13 18:38:00 907
原创 JavaScript常用数组操作方法
1、concat()concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,仅会返回被连接数组的一个副本。var arr1 = [1,2,3];var arr2 = [4,5];var arr3 = arr1.concat(arr2);console.log(arr1); //[1, 2, 3]console.log(arr3); //[1, 2, 3, 4, 5]...
2020-02-13 18:09:42 154
原创 ES6学习笔记——变量申明、字符串与正则、函数
课程基本概述ECMAScript、JavaScript、NodeJs,它们的区别是什么?1.1 ECMAScript:简称ES,是由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)按照ECMA-262和ISO/IEC 16262标准制定的一种脚本语言规范。1.2 JavaScript:运行在浏览...
2020-02-13 11:22:14 307
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人