使用vite安装vue3项目123npm init vite-app 项目的名称cd 项目的名称npm run dev 样式穿透 Vue3 使用 :deep() 代替 /deep/ 兄弟之间的传值 使用eventBus 使用mitt依赖包mitt依赖包 后代关系之间的数据共享 使用provide方法发送数据 使用inject数组接受数据 默认导入的数据不是响应式的数据 在使用provide返回数据时 对数据进包装 使用computed方法, 实现响应式的数据 代理服务器 devServer 配置多个代理 使用pathRewrite 方式一 123devServer: { proxy: 'http://localhost:5000'} 说明 优点：配置简单，请求资源时直接发给前端 缺点：不能配置多个代理，不能灵活的控制请求是否走代理 工作方式：当请求了前端不存在的资源时，请求会转发给服务器(优先匹配前端的资源) 方式二 1234567891011121314151617181920module.exports = { ...

前端模块化规范 AMD CMD CommonJS ES6模块化规范取代之前的非标准语法, 导入使用import 共享使用export 配置package.json 加入 type:"module" es6模块化三种用法默认导出, 默认导入 默认导出 1234567891011let n1 = 10let n2 = 20function show() { console.log(1);}export default { n1, show} 默认导入 12import m1 from './index.js'console.log(m1); 按需导出导入 名称保持一致 可以使用 as 重新命名 可以和默认导出配合使用 12345678// 按需导出export let n1 = 'aaa'export let n2 = 'vcv'export function say() {}export default = { a: 2 ...

仓库简介 个人博客微信小程序 配置hexo插件生成json数据接口 适用于hexo的各类主题版本 已上线小程序–搜索 [今日在学c] 一起学习可好? 扫码查看, 了解更多!! 图1 首页 图2 个人中心 图3 文章页 图4 本地搜索 HEXO部署方法1npm install hexo-generator-wxapi --save 使用方法看这里 具体步骤(接口配置) 在hexo_config.yml文件中加入以下配置 必须配置 123456789101112131415161718192021222324252627282930restful_api: # site 可配置为数组选择性生成某些属性 # site: ['title', 'subtitle', 'description', 'author', 'since', email', 'favicon', 'avatar'] site: tr ...

项目代码展示 项目部署方法, 已发GitHub, 项目地址github地址 使用技术 python正则匹配 Beautifulsoup4库 xpath解析 正则匹配 和JavaScript语言匹配方式类似 使用前需导入re包 有几种正则匹配的方法:match, search, compile, findall, finditer re.match(a, b, c) 三个参数: 匹配的规则, 要匹配的字符串, 匹配方式 它是从字符串的第一个位置进行匹配如果满足使用.span()方法可以返回它所在的索引位置, 如果不满足则返回None 返回结果.groups()返回一个包含所有小组的字符串的元组, 使用group(num)方法可以返回一个包含对应值的元组(从1开始) re.search(a, b, c) 也是三个参数, 与上面相同 获取元组方法也相同, 唯一的不同点就是, search不是从一开始进行匹配, 而是如果字符串中包含所要匹配的内容, 则返回第一个匹配成功的 注意只返回一个不是多个 re.sub(a, b, c, d, e) 执行替换操作 a正则中的模式字符串 b要替 ...

认识sass 它是一个css的预处理器, 文件的后缀为.scss 安装123npm i -g sass# 使用$ sass <input.scss> [output.css] 语法规则动态变量1234567// 使用变量,可以在变量中使用变量$primary-color:#1269b5;p { width: 20px; color: $primary-color;} 嵌套 使用嵌入式, 使用&符号 连接伪元素 属性的嵌套, 如果有多个相同前缀的属性, 使用前缀名:{后缀属性: 属性值} 123456789101112131415.nav { ul { li { color: $primary-color; } a { text-align: center; &:hover { font-size: 20px; } } }& ...

Vue的特性数据驱动视图 当页面数据发生变化时, 页面会重新渲染 单向的数据绑定 双向数据绑定 form表单负责采集数据, ajax负责提交数据 注: 数据驱动视图和双向数据绑定的底层原理是MVVM MVVM Model, View, ViewModel Model 表示当前页面渲染时所依赖的数据源 View 表示当前页面所渲染的DOM结构 ViewModel 表示Vue的实例 品牌列表案例123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 ...

实际前端开发 模块化(js) 组件化(ui) 规范化 自动化(构建,部署,自动化测试) 初识webpack 功能: 代码压缩混淆, 处理浏览器JavaScript的兼容性, 性能优化 定义: 解决前端工程化的具体解决方案 初始化配置 npm install init -y 初始化package.json -S –save, 将下载的包名和版本号 装到dependencies下(开发和部署) -D –save-dev, 将包记录到devDependencies(只在开发过程中) 安装webpack npm i webpack@5.42.1 webpack-cli@4.7.2 -D 在根目录下配置webpack.config.js 配置当前的环境mode 有两种选择 development和production 运行webpack 在package.json 下的scripts中配置webpack命令 要想实现webpack压缩功能将webpack.config.js模式修改为production entry指定打包入口 表示要处理的那个文件 使用path模块path.join(__ ...

认识Vue 渐进式框架 Core+Vue-router+Vuex 全家桶 特点： 解耦视图和数据 可复用的组件 前端路由技术 状态管理 虚拟DOM 初识Vue123456let app = new Vue({ el: '#app', // 挂载要管理的元素 data: { // 定义数据 message: '你好，世界' }}) 简单计数器1234567891011121314<div id="app"> <h2>当前计数：{{counter}}</h2> <button @click="counter++">+</button> <button @click="counter--">-</button></div><script src="./js/vue.js" ...

正则字符串提取数字 使用\d将数字匹配出来 /g全局匹配 123456789let hd = 'daw21321dasda23123123';// 不使用正则表达式写一个方法// console.log(Number.isNaN(parseInt('1')));// ...将字符串转换成数组形式 Array.from()方法也可以 使用isNaN判断是否为非数字// let news = [...hd].filter(v=>!Number.isNaN(parseInt(v)));// 使用join方法连接// 使用正则表达式let news = hd.match(/\d/g).join("")console.log(news); 正则字变量 使用eval()方法 使用test()方法返回的是布尔值 1234let hd = 'daw21321dasda23123123';let a = '1';let news = eval(`/${a}/`).test( ...

let 和 const命令 ✔ 在ES6中, 我们通常使用 let 表示变量, const 表示常量, 并且 let 和 const 都是块级作用域, 且在当前作用域有效不能重复声明. let 命令 let 命令的用法和 var 相似, 但是 let 只在所在代码块内有效. 基础用法: 1234{ let a = 1; let b = 2;} 并且 let 有以下特点: 不存在变量提升:在ES6之前, 我们 var 声明一个变量一个函数, 都会伴随着变量提升的问题, 导致实际开发过程经常出现一些逻辑上的疑惑, 按照一般思维习惯, 变量都是需要先声明后使用. 12345678910// var console.log(v1); // undefinedvar v1 = 2;// 由于变量提升 代码实际如下var v1;console.log(v1)v1 = 2;// let console.log(v2); // ReferenceErrorlet v2 = 2; 不允许重复声明:let 和 const 在相同作用域下, 都不能重复声明同 ...