- 博客(24)
- 收藏
- 关注
RSS订阅原创 前端学习之认识Vue3.0
Vue.js 3.0的区别源码组织方式的变化源码采用TypeScript重写使用Monorepo管理项目结构Composition API：解决Vue2.x开发大型项目时使用Options API遇到超大组件不好进行拆分和重写性能提升：采用proxy重写了响应式代码，并对编译器做了优化重写了虚拟DOM，服务端渲染的性能也提升了2~3倍响应式系统升级使用Proxy对象重写响应式系统可以监听动态新增的属性可以监听删除的属性可以监听数组的索引和length属性编译
2021-01-18 00:39:00
208
原创 前端学习之nuxtjs
路由Nuxt.js依据pages目录结构自动生成vue-router模块的路由配置路由导航a标签：会刷新整个页面，不要使用nuxt-link组件：https://router.vuejs.org/zh/api/#router-link-props编程式导航：https://router.vuejs.org/zh/guide/essentials/navigation.html动态路由以_为开头的文件会自动归为动态路由...
2020-11-16 01:53:05
282
原创 前端学习之VueRouter
Vue.use 用来注册组件动态路由传参在router里面配置props: true，就可以在路由对应的组件里的props接收到其他路由跳转过来传递的参数router.js{ path: "/dynamic/:id/:age", component: DynamicView, props:true}跳转路由vm.$router.push({path: "/dynamic/1/20"})DynamicView.vueprops: ["id", "age"] // 1, 20
2020-08-17 03:07:51
156
原创 前端学习之Vue响应式原理
Vue2.x响应式原理通过Object.defineProperty绑定data中的元素单个成员// 模拟 Vue 中的 data 选项 let data = { msg: 'hello' } // 模拟 Vue 的实例 let vm = {} // 数据劫持：当访问或者设置 vm 中的成员的时候，做一些干预操作 Object.defineProperty(vm, 'msg', { // 可枚举（可遍历） enum
2020-08-17 03:07:23
121
原创 前端学习之模块化开发
前端开发规范在node中遵循CommonJS，浏览器中遵循ES ModulesES Modules基本特性通过给 script 添加 type = module 的属性，就可以以ES Module的标准执行其中的 JS 代码了自动采用严格模式（严格模式代表就是不能在全局范围使用this）每个 ES Module 都是运行在单独的私有作用域中ESM 是通过 CORS 的方式请求外部 JS 模块的，需要服务端的头部允许CORS请求才行ESM 的 script 标签会延迟执行脚本，在网页渲染完成之后
2020-07-28 01:44:11
213
原创 前端学习之webpack
yarn webpack --mode 模式可以切换webpack的打包模式，也可以在配置文件中设置production模式会优化打包的结果development**模式会优化打包的速度none模式会运行最原始的webpack配置，不做任何额外的处理loaderwebpack内部的loader只能处理js文件，其它的资源文件需要加载其它loaderloader分类编译转换类文件操作类代码检查类css-loader将css文件转换为js文件style-loader将css-loade
2020-07-28 01:43:48
171
原创 前端学习之脚手架
yeoman是一款通用脚手架创建平台，可以通过不同的Generator生成更加定制化的脚手架基础使用流程在全局范围安装yonpm install yo --global / yarn global add yo安装对应的Generatornpm install generator-node --global / yarn global add generator-node通过yo运行Generatoryo node通过命令行交互填写选项生成所需的项目结构Gener
2020-07-18 09:59:50
290
原创 前端学习之ES新特性
数组解构赋值const arr = [100, 200, 300]const [a, b, c] = arr // a = 100, b = 200, c = 300const [,,c] = arr // c = 300const [a, ...rest] = arr // a = 100, rest = [200, 300]// 解构元素可以设置默认值，没有匹配到则取默认值const [a, b, c = 1000, more = 'defalue value'] = arr // a
2020-07-04 10:56:37
209
原创 前端学习之TypeScript
弱类型语言存在的问题调用不存在的变量不会立即报错，只有程序运行时才会发现错误函数的传入参数类型不明确，可能会导致函数功能发生变化对象索引器的错误调用强类型语言的优势错误更早暴露代码更智能，编码更准确重构更牢靠减少不必要的类型判断...
2020-07-04 10:56:07
196
原创 前端学习之Js性能优化
可达对象可以访问到的对象就是可达对象（引用、作用域链）可达的标准就是从根*（全局对象，即全局执行上下文）*出发是否能够被找到function objGroup(obj1, obj2) { obj1.next = obj2 obj2.prev = obj1 return { o1: obj1, o2: obj2 }}let obj = objGroup({name: 'obj1'}, {name: 'obj2'})console.log(obj)上面这段代码
2020-07-04 10:55:01
188
原创 Vuex
概念Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。使用步骤1.npm i vuex -S2.在src里新建store目录，在里面新建index.js3.index.js内容：import Vue from 'vue'import Vuex from 'vuex'Vue...
2019-06-14 09:57:20
88
原创 webpack
经过babel.js转换的才能export default，否则只能用module.export打包工具：webpack、rollup、parcel、FLS安装命令：npm i webpack -Dnpm i webpack-cli -Dwebpack会自动将src目录下的index.js文件压缩到dist目录的main.js里注development不会压缩，production会压...
2019-06-13 23:40:46
85
原创 form-data&mock&跨域
form-data文件处理formidable 处理文件上传的库form.keepExtensions = true 保持文件扩展名const avatar
2019-06-13 23:08:36
926
原创 React AJAX
接口联调：前后端把接口名改为一致npm i axios -S：安装axios包配置步骤1.在src目录下创建services目录来管理ajax2.新建apis.js来管理接口export default { baseURL: 'https://jsonplaceholder.typicode.com', // 获取todos的接口 todos: '/todos'3.新建inde...
2019-06-12 12:11:19
74
原创 React hooks
hooks函数组件用来管理自己的状态import { useState } from 'react’计数器示例import React, { useState } from 'react'import { render } from 'react-dom'const Counter = () => { // 解构赋值 const [count, setCount] = us...
2019-06-12 12:10:45
129
原创 Vue脚手架的AJAX配置
vue脚手架使用及文件vue create 项目名：创建项目src目录main.js是入口文件，用来挂载组件app.vueajax安装axios包 npm i axios -S创建ajaxconst ajax = axios.create({baseURL: ‘请求网址’})取数据export const getSth = () => {return ajax...
2019-04-29 10:36:55
1082
原创 初学VUE&组件
vue router：用来做路由vuex：用来管理mvvm：model-view-viewmodelv-for：指令cdn：内容分发网络Object.defineProperty(对象名，‘x’，操作对象)：在一个对象上定义或修改新的值操作对象中的get方法在调用obj.x时会自动执行，set方法在obj.x = 来赋值时会自动执行特性检测：检测是否支持圆角和placehold...
2019-04-25 18:00:55
245
原创 express生成器&MongoDB&fetch&mvc&bcrypt
查看全局安装 npm list -g --depth=0临时使用包，结束之后就会自动删除 npxxx中间件 所有xx运行中都会经过中间件的处理cookie-parse express的cookie处理中间件app.use express实例上的方法，表示应用中间件npm i 安装依赖运行步骤 新建路由->引入路由->浏览器打开注 api的本质就是路由module.ex...
2019-04-20 10:36:36
166
原创 ejs模板
js模板内容app.set(‘view engine’,‘引擎名’) 设置渲染的模板引擎path.resolve/join(__dirname，路径2) 路径模板下的方法，用来拼接路径，__dirname为当前js文件的目录；==process.cwd()==为执行命令的文件所在的目录，即package.json的目录注图像、css和js等静态文件另外放置在assets目录，需要托管才能访问...
2019-04-16 21:45:32
417
1
原创 nodejs及其服务器
安装nodejs包-g为全局安装-s为局部安装，上线之后要用就选此项-d为局部安装，只是开发阶段用就选此项package.json新建的一个项目需要用npm init来初始化，可以自定义各项内容name：项目名字version：版本（通常正式上线版为1.0.0，开发阶段都从0.1.0开始）description：描述项目main：项目的主页script：对象，定义各个任务，可...
2019-04-16 21:00:11
188
原创 Chrome调试
console输出信息console.error用于输出错误信息console.info用于输出提示性信息console.warn用于输出警示信息console.log用于输出普通信息console.count用于统计代码被执行的次数console.time计时开始console.timeEnd计时结束运行的代码放在以上两个console之间，可以输出运行的时间consol...
2019-04-15 15:06:00
72
原创 JavaScript实现继承
继承子类共享父类的属性和方法，js的继承都是基于原型实现的定义一个父类function Animal (name) { // 属性 this.name = name; // 实例方法 this.say= function(){ console.log("My name is "+this.name); }}// 原型方法Animal....
2019-03-27 19:33:31
83
原创 H5中数据存储方式（cookie、localStorage、sessionStorage）
COOKIE存document.cookie = “str”;存cookie的可选参数path=“cookie存放路径”expires= cookie过期时间例var date = new Date();date.setDate(date.getDate() + 2);document.cookie = "name=zhangsan;expires="+date;取var ...
2019-03-27 14:19:02
699
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人