- 博客(58)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 vue keep-alive保留组件活性 activated/deactivated 保存选择的子组件
文章目录keep-alive简单使用include/exclude字符串或者正则，只有匹配的组件会/不会被缓存关联方法 activated deactivated保存子组件选择不变化keep-alive文档 搜索 keep-alivekeep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。不会被销毁重新创建如果router-view直接被包裹在keep-alive里面，所有路径匹配的视图组件都会被缓存属性include 字符串或者正则，只有匹配的组件会被缓存ex
2020-08-26 11:28:48
1486
原创 vue 生命周期
new Vue({...}) 创建vue实例 初始化beforeCreated 无提取的信息.无响应式 注入created 提取信息 响应式 模版编译beforeMount 无真实dom 挂载 判断是否有 el属性 没有就 使用$mount('')mounted 挂载完成 真实dom已呈现 挂载中 数据变化 date prop beforeUpdate --> 重新渲染 --> updated -->数据变化 date pro
2020-08-26 10:59:12
108
原创 vue $router和$route的区别
文章目录$router$route$router是配置vue-router的时候挂载的router对象 是VueRouter实例import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(vueRouter)const router = new VueRouter({ mode:'history', routes:[ .... ]})// this.$router === router new Vue({
2020-08-25 20:40:42
235
原创 vue 路由嵌套
实现路由前提创建对应的子组件，并且在路由映射中配置对应的子路由在组件内容使用<router-view> 标签示例配置路由映射{ path:'/home', name:'user', component:()=>import('@/components/Home'), children:[ { path:"", redirect:'news' // 默认嵌套显示 }
2020-08-25 16:43:59
157
原创 vue-router 路由懒加载理解使用 三种写法
文章目录路由懒加载官方解释解释路由懒加载使用最早的路由懒加载写法amd写法es6结合webpack代码分割[懒加载打包 分包解析](https://blog.csdn.net/weixin_42448623/article/details/108221403)路由懒加载官方解释当打包构建应用时，javascript包会变得非常大，影响页面加载。把不同的路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。解释首先，路由中通常会定义很多不同的页面，这个页面最后会被打包到一个js
2020-08-25 15:51:55
710
1
原创 vue-cli2 打包后文件目录解析 .js.map 文件 路由懒加载打包分包
目录结构打包 为了防止js文件太大 加载出现空白 分包：打包出多个js文件app.xxxx.js 当前应用程序开发的所有代码（业务代码）manifest.xxxx.js 为打包的代码做底层支撑的（为模块化...做底层支撑）vendor.xxxx.js vendor(提供者，第三方依赖包 vue,vue-loader,...)manifest.xxxx.js关闭 js混淆丑化 插件在build/webpack.prod.conf.js 的 注释new UglifyJsPlugin
2020-08-25 15:18:24
2064
1
原创 HTML5 语义化标签
语义化标签 文档常用的语义化标签header: 通常用于表示页头，也可用于表示文章的头部footer: 通常用于表示页脚，也可用于表示文章的头脚article: 通常用于表示整篇文章section: 表示文章的章节aside: 通常用于表达一下附加信息 侧边栏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport
2020-08-24 22:42:52
264
原创 改变url 页面不刷新 location.hash history.pushState history.replaceState
文章目录URL的hash监听hash变化HTML5的history模式：pushStateHTML5的history模式：replaceState监听变化URL的hashURL的hash也就是锚点（#），本质就是改变window.location的href属性可以通过改变 location.hash 来改变href，页面不会刷新window.location.hash = "xxx" // => /#xxx监听hash变化 window.onhashchange = function
2020-08-24 15:14:04
2330
原创 vue-cli3 修改配置三种方式(vue ui /vue.config.js/隐藏起来的配置)
文章目录启动配置服务器:vue uivue.config.js 名称固定隐藏起来的配置启动配置服务器:vue uivue ui vue uivue.config.js 名称固定在单前目录下 创建一个 vue.config.js文件写的配置会和默认配置合并 作为webpack配置module.exports = { // 具体配置}代理配置示例隐藏起来的配置node_nodules/@vue/cli-serve/webpack.config.js...
2020-08-24 11:17:11
1040
原创 vue-cli3 目录结构解析 配置隐藏
文章目录目录解析node_modules 项目的依赖包publicsrc 开发文件夹.browserslisrc.gitignore Git忽略文件babel.config.jspackage.jsonpackage-lock.jsonREADME.md 项目说明文件目录解析node_modules 项目的依赖包public打包时会把该文件夹下的 资源原封不动的 复制到dist文件夹下和 vue-cli2 的static文件夹一样src 开发文件夹.browserslisrc配置浏览器相
2020-08-24 10:35:23
1375
原创 vue render函数 使用
文章目录语法基本使用套娃传入组件对象语法render:function(createElement){ return createElement('标签名称',{标签属性},['标签内容'])}基本使用new Vue({ render:function(createElement){ const div = createElement( 'div', // 标签名称 { // 标签属性 cla
2020-08-23 20:08:50
193
原创 vue-cli2.0 runtime-compiler 和 runtime-only区别
文章目录vue-cli 创建项目时 选择 Vue build 的区别runtime-only main.jsruntime-compiler main.jsvue-cli 创建项目时 选择 Vue build 的区别runtime+compiler: recommeded for most users(译：建议大多数用户使用)runtine-only: 大约6kb的更轻的 min+gzip，但是模板<或任何特定于vue的HTML>只允许在.vue文件中- reander是需要在
2020-08-23 10:43:14
342
原创 vue-cli2 目录结构解析 关闭esline
文章目录结构入口package.json 命令npm run build 打包项目npm run dev 运行项目build/config文件夹build文件夹下是webpack 相关的配置config文件夹下是一些变量node_modules 项目依赖第三方包src 开发文件夹assetsstatic 静态资源文件夹.gitkeep.babelrc.editorconfig.eslintignore.eslintrc.js.gitignore.postcssrc.jsindex.html 模版文件pac
2020-08-22 10:36:53
539
原创 webpack 配置分离 webpack-merge webpack指定运行文件(不运行webpack.config.js)
webpack-merge 对配置文件进行合并npm i webpack-merge --save-dev分离原webpack.config.jsconst path = require('path')const webpack = require('webpack')const vueLoaderPlugin = require('vue-loader/lib/plugin')const HtmlWebpackPlugin = require('html-webpack-plugin');
2020-08-21 14:08:33
481
原创 webpack plugin 搭建本地服务器 实现实时刷新 webpack-dev-server
文章目录webpack-dev-server安装配置 webpack.config.js配置 dev命令 npm run dev运行package.jsonwebpack-dev-server安装npm i webpack-dev-server@2.9.1 --save-dev配置 webpack.config.jsdevserver:{ contentBase:为那一个文件夹提供本地服务，默认是跟文件夹 port:端口号 inline:页面实时刷新 historyApiFallback
2020-08-21 10:21:12
120
原创 webpack plugin js压缩 uglifyjs-webpack-plugin
文章目录uglifyjs-webpack-plugin安装配置打包效果uglifyjs-webpack-plugin会把版权插件内容 给去掉 BannerPluginuglifyjs：丑陋对js代码进行压缩安装使用1.1.1版本，和vue-cli2保持一致npm i uglifyjs-webpack-plugin@1.1.1 --save-dev配置const uglifyjsPlugin = require('uglifyjs-webpack-plugin');plugins:[
2020-08-21 09:59:05
692
原创 webpack plugin html模版配置HtmlWebpackPlugin
HtmlWebpackPlugin会自动生成一个index.html文件（可以指定模版）将打包的js自动通过 script 标签引入到 body中安装npm i html-webpack-plugin@3.2.0 --save-dev配置 webapck.config.jsconst HtmlWebpackPlugin = require('html-webpack-plugin')...plugins:[ new HtmlWebpackPlugin({ template:'in
2020-08-21 09:42:59
326
原创 webpack plugin插件 loader和plugin区别 使用BannerPlugin(版权说明)
文章目录plugin 是什么loader 和 plugin 的区别plugin 的使用plugin 使用示例 BannerPlugin版权插件配置效果plugin 是什么plugin是插件的意思，通常用于对某个现有的架构进行扩展。webpack 中的插件，就是对webpack现有功能的扩展，比如打包优化、文件压缩等等。loader 和 plugin 的区别loader 主要用于转换某些类型的模块，他是一个转换器。plugin 是插件，它是对webpack本身的扩展，是一个扩展器。plug
2020-08-20 19:11:18
389
原创 webpack 配置vue优化解析 解析编译vue文件
文章目录目录结构简化流程初始写法简化1 配置template简化2 配置组件简化3 组件对象抽离js 使用模块化简化 4 使用vue文件 实现 结构 样式 行为分离接近脚手架mian.js写法 使用 render 渲染模版解析编译vue文件安装loader配置webpack webpack.config.jspackage.jsonindex.htmlmain.jsApp.vue打包效果目录结构简化流程初始写法index.html<!DOCTYPE html><html l
2020-08-20 10:53:37
1095
原创 webpack vue配置使用 不包括解析vue文件
文章目录目录结构index.htmlmain.js安装使用安装webpack 配置package.json打包效果目录结构index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
2020-08-20 10:00:32
454
原创 webpack es6转es5 babel-loader
文章目录目录结构js/cs.jsmian.jsindex.html安装使用安装package.json配置loader打包运行效果目录结构js/cs.jsconst cs = 'es6语法'const csFun = ()=>{ console.log("'es6语法'")}module.exports = { cs,csFun}mian.js// 入口文件import {cs, csFun } from './js/cs'console.log("cs",cs)
2020-08-19 21:56:55
293
原创 webpack loader 处理图片文件 url-loader file-loader
文章目录文件目录main.jsrest.cssless.lessinde.html安装使用 小图片安装package.json配置loader打包运行大图片处理安装rest.css文件目录main.js// 入口文件// 导入css依赖import './css/rest.css'// 导入less依赖import './css/less.less'rest.cssbody{ background: url('../img/ff.jpg');}less.less
2020-08-19 21:22:44
524
原创 webpack less打包
文章目录文件目录less.lessmain.jsindex.html安装使用安装生成 package.json配置打包命令配置 loader-less打包运行效果文件目录less.less@width: 10px;@color: red;body{ background-color: @color; width: @width;}main.js// 导入less依赖import './css/less.less'index.html<!DOCTYPE htm
2020-08-18 14:42:36
792
原创 webpack loader css打包示例
文章目录loader是什么loader使用安装需要使用的loader在webpack.config.js中的 module 关键字下配置css打包示例 把css打包到build.js项目目录安装配置使用loader是什么是webpack中的一个非常核心的概念 是webpack功能的扩展webpack本身只能处理js，并且webpack会自动处理js之间的依赖使用loader 后可以对其它资源进行处理打包.如es6转es5, sass、less转css，将.jsx.vue 文件转换成js文件等等，
2020-08-18 13:57:12
259
原创 webpack 初入 简单打包示例 配置命令npm run xxx gulp和webpack的区别
文章目录webpack是什么打包gulp和webpack的区别webpack安装webpack起步 最基本使用 简单打包示例(js模块化打包)webpack配置使用 简化命令 npm run xxxpackage.json scripts 执行脚本 文件执行webpack是什么从本质上来讲，webpack 是一个现代的javaScript 应用的静态模块打包工具。是一个前端模块化打包工具模块化 打包webpack其中一个核心就是让我们可能进行模块化开发，并且帮我们处理模块间的依赖关系。而
2020-08-18 11:47:30
984
原创 vue 父子组件传值 props验证
props文档示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>父子组件传值_props验证 </title> <script src="./vue.
2020-08-16 10:22:48
446
原创 vue 模板分离
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./vue.js"></script
2020-08-16 09:06:35
443
原创 html 标签属性（attribute/property） 布尔/非布尔属性 attribute/property 同步
attribute/propertyhtml 标签的预定义和自定义属性统一称为 attributeattribute 标签属性 type <input type="checkbox" name="input-name"/>property js原始对象的直接属性const obj = { name:"property 属性"}布尔值/非布尔值属性标签对象的 property 是布尔值 该属性就是布尔值属性标签对象的 property 不是布尔值 该属性就是非布尔值属
2020-08-14 18:05:34
1400
原创 es11 globalThis全局this
始终指向全局对象，无论指向环境是什么（浏览器，nodejs,…）浏览器console.log(globalThis) // windownodeconsole.log(globalThis) // global用处 如果想对全局对象进行操作 就可以忽略环境 直接使用globalThis就可以了...
2020-08-14 10:35:57
229
原创 es11 新的数据类型 BigInt 大整数
主要用来进行大数值运算不能和普通数据类型做运算// 大整形let n = 521n //在普通数字后面加nconsole.log(n, typeof n)函数把普通的整数转化为大整数值let n = 123BigInt(n) // 123n浮点数转大整数值 报错大数值运算// 最大安全整数let max = Number.MAX_SAFE_INTEGERconsole.log(max)console.log(max+1)console.log(max+11)不能表示
2020-08-14 10:25:47
705
原创 es6 动态import 实现按需加载
动态importes6 import 文档关键字import可以像调用函数一样来动态的导入模块。以这种方式调用，将返回一个 promiseimport('./hello.js').then(module=>{ // module 就是模块里面导出的对象})示例index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met
2020-08-14 10:01:17
9325
原创 es6 可选链操作符
?.在应对对象类型参数的时候function main(config){ const dbHost = config && config.db && config.db.host console.log(dbHost)}main({ db:{ host:"192.168.0.xx", name:"root" }})// dbHost "192.168.0.xx"这样一层层判断会比较繁琐使用 可
2020-08-14 09:50:08
1271
原创 class 私有属性
class Per{ // 公有属性 name; // 私有属性 #age; // => this.#age; #width; constructor(name, age, width){ this.name = name this.#age = age this.#width = width } info(){ console.log(this.#age) return this.#
2020-08-14 09:11:08
589
原创 前端术语
文章目录webw3cxmlhtmlMDNcss浏览器XHTMLweb互联网w3c万维网联盟，w3.org为互联网提供标准xml可扩展的标记语言：extension markup language用于定义文档结构htmlHTML是w3c组织定义的语言标准：HTML是用于描述页面结构的语言。HTML: Hyper Text Markup Languaage 超文本标记语言。MDN文档库Mozilla Development Network,Mozilla 开发者社区csscs
2020-08-13 20:52:05
475
原创 es10 数组方法 flat/flatten 数组降维 flatMap
flatflat(指定嵌套数组结构应展平的深度级别。默认为1。) 降低多少维度 最低转为一维数组将多维数组转化为低维数组// 二维转一维const arr = [1,2,4,[4,5,6]]// 降低一个纬度arr.flat() // [1, 2, 4, 4, 5, 6]// 三维转二维const arr2 = [1,2,4,[4,5,6,[8,9]]]// 降低一个纬度arr2.flat() // [1, 2, 4, 4, 5, 6, [8,9]]// 四维维转二维cons
2020-08-13 17:44:44
648
原创 正则 dotAll 模式 字符串方法matchAll 获取正则批量匹配的结果
// daot . 元字符 除了换行和行结束符之外的当个字符[^\r\n]// 针对一些html内容进行提取和分析// 提取里面的名称 和 日期let str = ` <ul> <li> <a>xxx</a> <p>日期：2020-12-12</p> </li> <li> <a
2020-08-13 16:48:59
434
原创 正则 正向/反向断言(?＜=/?＜=)
正向断言根据后续内容匹配前面的内容是否合法提取字符串后面的数字 88987// \d 数字// n+ 匹配任何包含至少一个n的字符串// ?=n 匹配任意字符其后紧接字符为n的字符let str = 'JS32343434你发个的88987放大'// 数字后面+放的 const reg = /\d+(?=放)/ reg.exec(str)反向断言根据前边内容匹配后面的内容是否合法提取字符串后面的数字 的 后面的数字let str = 'JS32343434你发个的8898
2020-08-13 15:27:35
1023
原创 正则 exec命名捕获分组 提取标签属性文本
捕获分组let str = '<a href="http://www.baidu.con">百度</a>'// 提取 url 和标签文本const reg = /<a href="(.*)">(.*)<\/a>/// 执行const result = reg.exec(str)命名捕获分组// 提取 url 和标签文本const reg = /<a href="(?<url>.*)">(?<text>
2020-08-13 11:53:12
332
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人