准备工作 windows 上使用的分区上分出空闲硬盘空间给 archlinux 下载archlinux镜像 启动u盘 ventoy 关闭windows 快速启动，BIOS 安全启动 安装配置网络iwctl # 进入交互式命令行 device list # 列出无线网卡设备名 # 查看你的网卡名字，这里假设是wlan0，输入 station wlan0 scan # 检查扫描网络，输入 station wlan0 get-networks #查看网络名字，假设名字叫CMCC-D39U，输入 station wlan0 connect BUPT-D39u # 接着输入密码（如果有密码的话），输入 # 连接成功后退出 exit 测试网络 ping www.bilibili.com # 有数据返回就说明链接上网络 更新系统时间timedatectl set-ntp true # 将系统时间与网络时间进行同步 timedatectl status # 检查服务状态 更换国内源vim /etc/pacman.d/mirrorlist # 中国科学技术大学开源镜像站 插入文件最 ...

VUE2.X自定义指令私有自定义指令在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令 directives: { color:{ // 为绑定的元素设置红色字体 bind(el){ // el 是绑定此指令的 dom 对象 el.style.color='red' } } } 使用：需要加上 v- 前缀 <!-- 上面声明的自定义指令名为 color --> <!-- 使用自定义指令名 color，需要加上 v- 前缀 --> <h1 v-color>app组件</h1> 动态绑值data:{ return{ color:'red' } } <h1 v-color="color">app组件</h1> 通过 binding 获取指令的参数值directives: { color:{ bind(el,binding ...

状态管理在开发中，我们会的应用程序需要处理各种各样的数据，这些数据需要保存在我们应用程序中的某一个位置，对于这些数据的管理我们就称之为是 状态管理 ✅ vue2 / Options Api 建议使用 vuex ✅ vue3 / Composition Api 建议使用 pinia Vuex官网链接 创建Store 每一个Vuex应用的核心就是 store（仓库） vuex 和 单纯的全局对象区别： Vuex的状态存储是响应式的：store中的状态发生变化，那么读取store数据相应的组件也会被更新 不能直接改变 store 的状态 ： 改变store中的状态的唯一途径就显示提交 (commit) mutation 安装 vuex install vuex 注意：Vue2 安装 Vuex3，Vue3 安装 Vuex4，版本需对应。 创建文件 src/store/index.js const store = createStore({ state: () => ({ counter: 100, }), g ...

setup setup 是 Vue3 中一个新的配置项，值为函数 组件中使用的数据、方法等都要配置在 setup 中 setup 函数返回值：对象，函数等数据，可在模板中直接使用 setup 函数参数：props，context props ：自定义属性，组件外部传进来，且组件内部声明接收的属性（父传子） context：上下文对象，也称之为是一个SetupContext，它里面包含三个属性 attrs： 所有非 prop 的 attribute，组件外部传进来，且组件内部没有声明接收的属性，相当于 this.$attrs slot：父组件传递过来的插槽，相当于 this.$slots emit：触发自定义事件，相当于 this.$emit export default { name: 'App', props: ['title'], // 声明自定义事件，虽然不声明也能运行 emits: ['changeCount'], setup(props, context) { let name = 'Vue3' fu ...

推荐使用 Axios Axios 是专注于网络数据请求的库。 相比于原生的 XMLHttpRequest 对象，axios 简单易用。 相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。 传统的Ajax (XHR)基本使用步骤 创建 xhr 对象 调用 xhr.open()函数 （POST 请求）设置 Content-Type 属性（固定写法） 调用 xhr.send() 函数 监听 xhr.onreadystatechange 事件 GET请求 // 创建 xhr 对象 const xhr = new XMLHttpRequest() // 调用 open 指定请求方式和 url 地址 // 带有参数可以使用查询字符串格式 // 请求地址URL用 ？ 拼接 // 例如 id=1&&page=2 xhr.open('GET','https://www.baidu.com/api？id=1&&page=2') // 调用 send 发起 Ajax 请求 xhr.send() // 监听发起请求后的事件，onread ...

前端路由前端路由，指的是 Hash 地址与组件之间的对应关系 工作方式： 用户点击了页面的路由链接 导致了 URL 地址栏的 Hash 值方式变化 前端路由监听到 Hash 地址的变化 前端路由把当前 Hash 值地址对应的组件渲染到浏览器页面 简单路由的实现<!-- a 链接添加对应的 hash 值 --> <a href="#/home">Home</a> <a href="#/movie">Movie</a> <a href="#/about">About</a> <!-- 动态渲染结点 --> <!-- 通过 is 属性 指定要展示的组件 --> <comnponent :is="comName"></comnponent> <script> export default{ name:'App', data(){ return{ comName:'Home' } }, // 在 created 生命周期函数中 ...

path Autocomplete@ 路径导入 // 配置 @ 的路径提示 "path-autocomplete.pathMappings": { "@": "${folder}/src" }, // 导入文件是否携带文件扩展名 "path-autocomplete.extensionOnImport": true, ESLint 和 Prettier在 C:\Users\你的用户名 路径下创建 .prettierrc 文件，里面写上 {"semi": false, "singleQuote": true, "printWidth": 300} 接着在 settings.json 文件配置： "editor.codeActionsOnSave": { "source.fixAll": true, }, "eslint.alwaysShowStatus": true, // 配置prettier "prettier.configPath": "C:\\Users\\???\\.prettier ...