Rubyのいえ

Vuex速查表 Vuex 操作 代码 获取状态 this.$store.state.变量名 同步修改状态 this.$store.commit("命名空间/Mutations 中定义的方法名") 异步修改状态 this.$store.dispatch("命名空间/Actions 中定义的方法名") 杂谈最近出差去深圳了，所以没太多的经历去写博客，提升自己，摸鱼实在是太爽了，不过兄弟们我还是回来了，咕咕咕！ 让我慢慢总结这个吧，毕竟还是重要的东西，之前写项目也在这里绊过跟头，所以这次想在弄懂一些！ 简介我们来看一个比较抽象的概念哈 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以可预测的方式发生变化。 说的比较抽象，其实可以理解为，保存全局状态的地方，改变值得话会有行为记录 比方说，我的登录状态，此状态会贯穿我使用此 app 的所有过程吧？所以这个状态就最好存在 Vuex 中 再比方说，我登录成功了，此时我要去改变 Vuex 中的 ...

Vue Router安装官网 在终端中输入 vue add router 即可安装 router 插件 安装过程中会让你选择 Use history mode for router，两者有些差别，具体请参阅这篇博文 安装过程如下： 基础使用 动态路由匹配我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对 于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中 使用“动态路径参数”(dynamic segment) 来达到这个效果 使用案例来看一场珍贵无比的实验： 整完之后的演示如下，可以观察一下浏览器的地址栏。 容易出错的地方如果我们想获取到参数，我们来尝试一下： 首先用 create 声明周期来获取，发现只能获取第一次的，这是因为组件复用了 那么我们怎么办呢？用监听器 watch 但是还会有个问题，watch 刚进路由的时候是不会触发的，怎么办呢？ 用带配置的监听器！ 12345678watch: { $route: { immediate ...

工程化 Vue cli简介工程化，它的全称叫做：command line interface 引入工程化的目的是：让项目有系统性的工程管理、优化、以及压缩等 你想啊，如果是单 html 这样的文件去做前端项目的话，会有很多弊端 如果是团队开发，你改这别人改哪儿的，合并代码的时候一堆报错，导致邻里不和谐 维护起来十分复杂，一坨屎谁写的，删掉！ 不好优化，比方说压缩一下静态资源啦，压缩生产代码啦等等 所以，工程化应运而生 快速开发全局安装 vue/cli-service-global要想起一个 vue 项目，我们需要安装全局依赖 1npm install -g @vue/cli-service-global 单个 vue 的预览我们可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发 创建项目命令行创建安装完Vue cli脚手架之后，可以在终端通过如下命令创建项目 1vue create 你的项目名 自定义有如下选项（以后可能更多） 是否用 babel、是否用TS、PWA、路由管理、状态管理、CSS 预编译器、代码 ...

前言呜呜呜，因为疫情原因，小区封了，我只能在家办公了，情况是这样的，心里还是不爽啊，因为来的太突然，都没有时间屯粮，朋友还说为啥没有屯粮？我听到这个真的很恼火，谁又知道这么突然呢，大超市关门了，小超市东西都卖没了，是我不想屯吗？发生事情我需要的是安慰，不是责备。 第一天我连饭都不能按时吃到，饿的难受，学习了，忙的忘记吃饭吧。 Vue 中的 过渡 & 动画有以下几个方式去添加过渡 & 动画： 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库，如 Velocity.js transition 组件Vue 中的动画组件详细说明 官方的说明如下： 当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理： 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。 如果过渡组件提供了 JavaScript 钩子函数，这些钩子 ...

Vue前言之前学的 Typescript 愣是给我整放弃了，根本学不动啊，因为工作上又用不到，而且前几天因为写组件卡了好几次，所以想要重新学习 Vue 我写的那个组件算是步骤组件，而且还有权限的校验，异步获取数据等问题，等我过完基础之后再来分析分析 VS CodeChrome 调试 HTML 的配置如果 在 VS code 编辑器写一段 html 后，想要用 Chrome 浏览器调试的话，需要 建立 VS code 和 chrome 之间的联系，也就是做搭桥的工作 我平常爱用的是 open in browser ，在插件试场搜一下 安装完之后，在 html 项目下这种是比较方便的，其他调试方式了解即可，调试部分以下的东西了解即可。 默认支持 node 环境的调试 在调试的时候会在 .vscode 文件夹下搜索一个叫 launch.json文件（没有的话自己动手建一个吧），VS code 根据这里的配置去弹出浏览器进行调试。 相应代码如下 123456789101112131415161718192021222324// launch.json{ // Use In ...

函数函数标注如果用 type 或者是 接口 interface 的话可以这样。 可选参数 参数的默认值跟 ES6 的写法类似如果需要限制参数的值得话，可以用联合类型 剩余参数我们想要合并数组，调用的方法如下图的 merge 方法所示， 那么这个函数的定义就是这样的： 函数中的 this普通函数的 this对于普通函数而言，this 是会随着调用环境的变化而变化的，所以默认情况下，普通函数中的 this 被标注为 any，但我们可以在函数的第一个参数位（它不占据实际参数位置）上显式的标注 this 的类型 箭头函数的 this 函数重载我们先来看一个问题 联合类型的话不存在这样的约束，如果想要添加这样的规则，可以通过函数重载来解决： 注意：同名函数并不是覆盖，而是重载 面向对象编程类面向对象编程中一个重要的核心就是：类，当我们使用面向对象的方式进行编程的时候，通常会首先去分析具体要实现的功能，把特性相似的抽象成一个一个的类，然后通过这些类实例化出来的具体对象来完成具体业务需求。 类的基础在类的基础中，包含下面几个核心的知识点，也是 TypeScript 与 EMCA ...

TypeScript接口 interface用来约束对象的结构 基本使用简单的使用方法如下 可选属性可选属性的声明，在变量后面用 ? 声明 只读属性如果想定义一个只读的变量，应该用 readonly 去声明 可变 / 任意属性：对象属性的二次扩展希望对对象属性进行扩展的，因为我们也不知道对象以后会添加什么属性， 任意属性如下图所示，用 [] 声明，注意：这里的 key 只是一个临时变量 注意：索引签名参数类型必须为 string 或 number 之一，但两者可同时出现，也就是下面这个意思： 注意：当同时存在数字类型索引和字符串类型索引的时候，数字类型的值类型必须是字符串类型的值类型或子类型 12345678interface Point1 { [prop1: string]: string; [prop2: number]: number; // 错误}interface Point2 { [prop1: string]: Object; [prop2: number]: Date; // 正确} 再来一 ...

为什么要用 TypeScript先介绍两个概念哈： 动态类型语言：程序运行期间才做数据类型检查的语言，如：JavaScript 静态类型语言：程序编译期间做数据类型检查的语言，如：Java 静态类型语言的优点 程序编译阶段（配合 IDE、编辑器甚至可以在编码阶段）即可发现一些潜在错误，避免程序在生产环境运行了以后再出现错误 编码规范、有利于团队开发协作、也更有利于大型项目开发、项目重构 配合 IDE、编辑器提供更强大的代码智能提示/检查 代码即文档 这些优点都是基于类型系统的 类型系统TypeScript 引入了类型系统 类型系统有以下这几个功能： 类型标注（定义、注解） 类型检测（检查） 类型标注首先大致看一下怎么用的： 1234// 基本类型var title: string = "hello Typescript"; // 字符串类型的标注var n: number = 1; // 数字类型的标注var isOk: boolean = true; // 布尔类型的标注 也就是在变量后加冒号，再加类型的声明 1var 变量名: 类型 = ...

Typescript安装及配置typescript 可以用npm 去安装，安装完后在终端里会有 tsc 这样的命令，如果在终端中提示没有这个 tsc 命令，那么需要在 ~/.bash_profile 这个文件中添加环境 然后source ~/.bash_profile 更新一下 终端，再试试。 hello typescript首先我们新建一个 ts 文件，然后输入一些代码 1let str: string = "hello ts"; 之后在终端输入 tsc 你要运行的ts文件路径 ，即可在当前 ts 文件 的同级生成一个同名js 文件 常用的编译命令与配置 outDir： 指定目录输出编译文件：eg：tsc --outDir ./dist ./src/hello.ts target：输出 es 的版本，eg：tsc --outDir ./dist --target es3 ./src/hello.ts watch：监控变化，热更新，eg：tsc --outDir ./dist --target es3 ./src/hello.ts --wat ...

简版 Axios目标说明实现 axios 的函数式调用、对象式调用、拦截器的实现等 目标1：实现基本请求、及多种调用方法这里简单搭了个前后端的环境，以及个人的 axios 源码，如下图所示 基础：把 axios 封装成类首先写个类，把 xhr 封装一下 1234567891011121314class MyAxios { constructor() {} request(config) { return new Promise((resolve, reject) => { const { url = '', method = 'get', header = {} } = config const xhr = new XMLHttpRequest() xhr.open(method, url, true) xhr.onload = f ...