diff --git a/src/v2/cookbook/adding-instance-properties.md b/src/v2/cookbook/adding-instance-properties.md index 8c13979cc..a38c40f10 100644 --- a/src/v2/cookbook/adding-instance-properties.md +++ b/src/v2/cookbook/adding-instance-properties.md @@ -4,7 +4,7 @@ type: cookbook order: 2 --- -## 简单的示例 +## 基本的示例 你可能会在很多组件里用到数据/实用工具,但是不想[污染全局作用域](https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md)。这种情况下,你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。 @@ -57,7 +57,7 @@ new Vue({ }) ``` -日志中会先出现 `"The name of some other app"`,然后出现 `"My App"`,因为 `this.appName` 在实例被创建之后被 `data` [覆写了](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch5.md)。我们通过 `$` 为实例属性设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定,诸如 `$_appName` 或 `ΩappName`,来避免和插件或未来的插件相冲突。 +日志中会先出现 `"My App"`,然后出现 `"The name of some other app"`,因为 `this.appName` 在实例被创建之后被 `data` [覆写了](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch5.md)。我们通过 `$` 为实例属性设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定,诸如 `$_appName` 或 `ΩappName`,来避免和插件或未来的插件相冲突。 ## 真实的示例:通过 axios 替换 Vue Resource @@ -91,7 +91,8 @@ new Vue({ }, created () { var vm = this - this.$http.get('https://jsonplaceholder.typicode.com/users') + this.$http + .get('https://jsonplaceholder.typicode.com/users') .then(function (response) { vm.users = response.data }) @@ -107,7 +108,10 @@ new Vue({ ``` js Vue.prototype.$reverseText = function (propertyName) { - this[propertyName] = this[propertyName].split('').reverse().join('') + this[propertyName] = this[propertyName] + .split('') + .reverse() + .join('') } new Vue({ @@ -115,18 +119,21 @@ new Vue({ message: 'Hello' }, created: function () { - console.log(this.message) // => "Hello" + console.log(this.message) // => "Hello" this.$reverseText('message') - console.log(this.message) // => "olleH" + console.log(this.message) // => "olleH" } }) ``` -注意如果你使用了 ES6/2015 的箭头函数,则其绑定的上下文__不会__正常工作,因为它们会隐式地绑定其父级作用域。也就是说使用箭头函数的版本: +注意如果你使用了 ES6/2015 的箭头函数,则其绑定的上下文**不会**正常工作,因为它们会隐式地绑定其父级作用域。也就是说使用箭头函数的版本: ``` js Vue.prototype.$reverseText = propertyName => { - this[propertyName] = this[propertyName].split('').reverse().join('') + this[propertyName] = this[propertyName] + .split('') + .reverse() + .join('') } ``` @@ -142,7 +149,7 @@ Uncaught TypeError: Cannot read property 'split' of undefined 然而,有的时候它会让其他开发者感到混乱。例如他们可能看到了 `this.$http`,然后会想“哦,我从来没见过这个 Vue 的功能”,然后他们来到另外一个项目又发现 `this.$http` 是未被定义的。或者你打算去搜索如何使用它,但是搜不到结果,因为他们并没有发现这是一个 axios 的别名。 -__这种便利是以显性表达为代价的。__当我们查阅一个组件的时候,要注意交代清楚 `$http` 是从哪来的:Vue 自身、一个插件、还是一个辅助库? +**这种便利是以显性表达为代价的。**当我们查阅一个组件的时候,要注意交代清楚 `$http` 是从哪来的:Vue 自身、一个插件、还是一个辅助库? 那么有别的替代方案吗? @@ -150,19 +157,22 @@ __这种便利是以显性表达为代价的。__当我们查阅一个组件的 ### 当没有使用模块系统时 -在__没有__模块系统 (比如 webpack 或 Browserify) 的应用中,存在一种_任何_重 JS 前端应用都常用的模式:一个全局的 `App` 对象。 +在**没有**模块系统 (比如 webpack 或 Browserify) 的应用中,存在一种_任何_重 JS 前端应用都常用的模式:一个全局的 `App` 对象。 如果你想要添加的东西跟 Vue 本身没有太多关系,那么这是一个不错的替代方案。举个例子: ``` js var App = Object.freeze({ name: 'My App', - description: '2.1.4', + version: '2.1.4', helpers: { // 这我们之前见到过的 `$reverseText` 方法 // 的一个纯函数版本 reverseText: function (text) { - return text.split('').reverse().join('') + return text + .split('') + .reverse() + .join('') } } }) diff --git a/src/v2/cookbook/cookbook-contributions.md b/src/v2/cookbook/cookbook-contributions.md deleted file mode 100644 index 59515e719..000000000 --- a/src/v2/cookbook/cookbook-contributions.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 参与 cookbook 贡献 -type: cookbook -order: 1 ---- - -## 我们的目标 - -Cookbook 为开发者提供了一些示例,涵盖常见的或有趣的用例,并逐步解释更复杂的细节。我们的目标是超越一个简单的示例介绍,展现更广泛适用的概念及其注意事项。 - -如果你有兴趣参与贡献,请将您的想法填入 issue 并加上 **cookbook idea** 的标签作为起步,这样我们就可以帮助并引导您完成一个 pull request。在你的想法被认同之后,请尽可能遵循以下模板。有些小节是必须的,有些是可选的。我们强烈建议您遵循其顺序,但这也不是必须的。 - -## 简单的示例 - -_必须的_ - -1. 用一两句话来说明问题。 -2. 用一两句话解释最简单的可能的解决方案。 -3. 显示一小段代码示例。 -4. 用一句话解释它完成了什么。 - -## 关于其价值的细节 - -_必须的_ - -1. 解决人们在看例子时可能遇到的常见问题。(最好以块引用格式呈现) -2. 显示常见错误的例子,以及如何避免它们。 -3. 用非常简单的代码示例展示好模式和坏模式。 -4. 讨论这个模式令人信服的理由。参考链接不是必需的,但鼓励提供。 - -## 真实的例子 - -_必须的_ - -通过以下方式演示能够为常见或有趣的用例提供支持的代码: - -1. 通过几个简单的设置例子,或者 -2. 嵌入一个 CodePen / JSFiddle 的例子 - -如果你选择稍后再提供,那么你仍应该表述它是什么和做什么。 - -## 额外的上下文 - -_可选的_ - -为这个模式写点东西,描述在这个模式下,它会应用到什么地方,为什么它能正常工作;以及在此基础上运行一些代码、提供一些延伸阅读材料,都是非常有帮助的。 - -## 何时避免使用这个模式 - -_可选的_ - -本节不是必需的,但强烈建议。你没有必要写一些特别简单易懂的事项,比如根据状态的改变开关 class,但是对于 mixin 这样的更高阶的模式来说是非常重要的。大多数高阶的问题的答案都是[“要看情况!”](https://codepen.io/rachsmith/pen/YweZbG),该部分就包含了这一点。在此,我们要诚实地看待模式何时有用,何时应该避免,什么时候更有意义。 - -## 替代模式 - -_可选的,除非这部分内容在之前已经提供过了_ - -如果你已经在上一节提供了避免使用的条件,那么这一节是必须的。探索其它方法非常重要,这样人们在遇到某些反模式的情形时不至于无所适从。这样做是因为考虑到 web 是一个不同人有着不同代码结构解决不同问题的大舞台。这个应用是大是小?它们要把 Vue 集成到一个现成的项目中还是从零起步构建新项目?它们的用户只是想达成一个目标还是多个?有很多异步数据吗?所有的这些担忧都会影响实现替代品。一篇好的 cookbook 会为开发者提供这些相关信息。 - -## 致谢 - -文档贡献是需要很多时间的,如果您花时间提交这部分的文档,我们将感激不尽。 diff --git a/src/v2/cookbook/creating-custom-scroll-directives.md b/src/v2/cookbook/creating-custom-scroll-directives.md index 757af5e23..e5483c36f 100644 --- a/src/v2/cookbook/creating-custom-scroll-directives.md +++ b/src/v2/cookbook/creating-custom-scroll-directives.md @@ -4,7 +4,7 @@ type: cookbook order: 7 --- -## 简单的示例 +## 基本的示例 我们可能很多次想为网站的滚动事件添加一些行为,尤其是动画。已有的做法很多,但是代码和依赖最少的方式可能就是使用一个[自定义指令](../guide/custom-directive.html)创建一个钩子,在特定的滚动事件之后作处理。 diff --git a/src/v2/cookbook/debugging-in-vscode.md b/src/v2/cookbook/debugging-in-vscode.md new file mode 100644 index 000000000..8c6edc3f5 --- /dev/null +++ b/src/v2/cookbook/debugging-in-vscode.md @@ -0,0 +1,113 @@ +--- +title: 在 VS Code 和 Chrome 中调试 +type: cookbook +order: 8 +--- + +每个应用,不论大小,都需要理解程序是如何运行失败的。在本案例中,我们会探索一些使用 Chrome 来进行测试的 VS Code 用户的工作流程。 + +这个案例展示了在通过 [Vue CLI](https://github.com/vuejs/vue-cli) 生成的 Vue.js 应用程序中,如何使用 VS Code 的 [Debugger for Chrome](https://github.com/Microsoft/VSCode-chrome-debug) 扩展进行调试。 + +## 先决条件 + +你必须安装好 Chrome 和 VS Code。同时请确保自己在 VS Code 中安装了 [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) 扩展的最新版本。 + +请通过 [Vue CLI](https://github.com/vuejs/vue-cli),遵循它的 README 中的安装文档安装并创建一个项目。然后进入这个新创建的应用的目录,打开 VS Code。 + +### 在 Chrome Devtools 中展示源代码 + +在可以从 VS Code 调试你的 Vue 组件之前,你需要更新 webpack 配置以构建 source map。做了这件事之后,我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试,即便你的资源已经被 webpack 优化过了也没关系。 + +打开 `config/index.js` 并找到 `devtool` 属性。将其更新为: + +```json +devtool: 'source-map', +``` + +### 从 VS Code 启动应用 + +点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图,然后点击那个齿轮图标来配置一个 `launch.json` 的文件,选择 **Chrome** 环境。然后将生成的 `launch.json` 的内容替换成为接下来的两段配置: + +![添加 Chrome 配置](/images/config_add.png) + +```json +{ + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "vuejs: chrome", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}/src", + "breakOnLoad": true, + "sourceMapPathOverrides": { + "webpack:///src/*": "${webRoot}/*" + } + } + ] +} +``` + +## 设置一个断点 + +1. 在 **`src/components/HelloWorld.vue`** 的 `line90` 的地方设置一个断点,这里的 `data` 函数返回一个字符串。 + +![断点渲染器](/images/breakpoint_set.png) + +2. 在根目录打开你惯用的终端并使用 Vue CLI 开启这个应用: + + ``` + npm start + ``` + +3. 来到 Debug 视图,选择 **'vuejs: chrome'** 配置,然后按 F5 或点击那个绿色的 play 按钮。 + +4. 随着一个新的 Chrome 实例打开 `http://localhost:8080`,你的断点现在应该被命中了。 + +![命中断点](/images/breakpoint_hit.png) + +## 替代方案 + +### Vue Devtools + +我们还有一些其它的调试方法,复杂度不尽相同。其中最流行和简单的是使用非常棒的 [vue-devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)。使用 devtools 有很多好处,比如它可以让你能够实时编辑数据属性并立即看到其反映出来的变化。另一个主要的好处是能够为 Vuex 提供时间旅行式的调试体验。 + +![Devtools Timetravel Debugger](/images/devtools-timetravel.gif) + +

请留意如果页面使用了一个生产环境/压缩后的 Vue.js 构建版本 (例如来自一个 CDN 的标准的链接),devtools 的审查功能是默认被禁用的,所以 Vue 面板不会出现。如果你切换到一个非压缩版本,你可能需要强制刷新该页面来看到它。

+ +### Vuetron + +[Vuetron](http://vuetron.io/) 是一个非常好的项目,它对 vue-devtools 的工作做了一些扩展。除了普通的 devtools 工作流程,你还可以: + +* 快速查阅 API 请求/响应:如果你使用 fetch API 来发送请求,那么这个功能会将所有发出的请求都展示出来。这个扩展出来的卡片展示了请求的数据和响应的数据。 +* 订阅你的应用的某个具体部分的状态,以便快速调试 +* 组件依赖可视化,且允许你收起/展开某个具体的依赖树视图 + +![Vuetron 层级结构](/images/vuetron-heirarchy.gif) + +### 简单的 debugger 语句 + +上述示例的工作流程非常好。不过这里还有一个替代选项,就是你可以直接在代码中使用[原生的 `debugger` 语句](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/debugger)。如果你选择了这种方式,请千万记得当你调试完毕之后把这个语句移除。 + +```js + +``` + +## 致谢 + +这个案例是基于 [Kenneth Auchenberg](https://twitter.com/auchenberg) 贡献在[这里](https://github.com/Microsoft/VSCode-recipes/tree/master/vuejs-cli)的文章而撰写的。 diff --git a/src/v2/cookbook/editable-svg-icons.md b/src/v2/cookbook/editable-svg-icons.md index 4e9924cc4..ce20558fd 100644 --- a/src/v2/cookbook/editable-svg-icons.md +++ b/src/v2/cookbook/editable-svg-icons.md @@ -4,7 +4,7 @@ type: cookbook order: 4 --- -## 简单的示例 +## 基本的示例 创建一套 SVG 图标系统的方式有很多,但是有一种方法能够充分发挥 Vue 的能力,那就是把可编辑的内联图标创建为组件。这样做有好多好处: @@ -24,7 +24,7 @@ order: 4 ![网站文档](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/screendocs.jpg '文档 demo') -我们将会创建一个基础图标 (`IconBase.vue`) 组件,并使用了一个无作用域的插槽。 +我们将会创建一个基础图标 (`IconBase.vue`) 组件,并使用了一个插槽。 ```html ``` -你可以像这样使用这个基础图标,唯一可能要做的就是根据你图标的 `viewBox` 来更新其 `viewBox`。在基础图标里会有 `width`、`height`、`color` 以及图标的名字等 prop,这样我们就可以通过 prop 对其动态更新。这个名字将会同时用在 `` 的内容及其用于提供可访问性的 `id` 上。 +你可以像这样使用这个基础图标,唯一可能要做的就是根据你图标的 `viewBox` 来更新其 `viewBox`。在基础图标里会有 `width`、`height`、`iconColor` 以及图标的名字等 prop,这样我们就可以通过 prop 对其动态更新。这个名字将会同时用在 `<title>` 的内容及其用于提供可访问性的 `id` 上。 我们的脚本是下面这样的,我们设了一些默认值,这样在没有特别设置的情况下图标渲染出来就是一致的: diff --git a/src/v2/cookbook/form-validation.md b/src/v2/cookbook/form-validation.md index 0748f5b46..8043e4661 100644 --- a/src/v2/cookbook/form-validation.md +++ b/src/v2/cookbook/form-validation.md @@ -4,7 +4,7 @@ type: cookbook order: 3 --- -## 简单的示例 +## 基本的示例 表单校验是浏览器原生支持的,但是有的时候用不同的浏览器处理起来需要一些小技巧。即使当表单校验已经被完美支持,你也还是有很多时候需要进行自定义的校验。这时一个更加手动的基于 Vue 的解决方案可能会更适合。我们来看一个简单的示例。 diff --git a/src/v2/cookbook/index.md b/src/v2/cookbook/index.md index 8fb99cd76..be63cd34d 100644 --- a/src/v2/cookbook/index.md +++ b/src/v2/cookbook/index.md @@ -4,38 +4,85 @@ type: cookbook order: 0 --- -## 这本 Cookbook 的仍在撰写中 - -<p class="tip">这本 cookbook 仍然处于比较初期的阶段。所以我们暂时不会在别的地方放它的链接。页面随时有可能移除或重组。甚至目标和格式之类的东西也是在不断变化的。</p> - ## Cookbook vs 指南 这份 cookbook 和指南的不同之处在哪里?存在的意义是什么? -* **更专注**:在指南里,我们实际上是在讲一个故事。每个章节都以之前章节的知识进行构建和假设。而在 cookbook 里,每个 recipe 都有各自的代表性。也就是说每个 recipe 都专注于 Vue 的某个特定方面,而不是一个概览。 +* **更专注**:在指南里,我们实际上是在讲一个故事。每个章节都以之前章节的知识进行构建和假设。而在 cookbook 里,每个案例都有各自的代表性。也就是说每个案例都专注于 Vue 的某个特定方面,而不是一个概览。 -* **更有深度**:为了避免指南写得太长,我们试着只包含了尽可能简单的示例来帮助你理解每个功能,然后就奔下一个话题了。在 cookbook 里,我们以更生动的形式包含了更复杂的示例并结合特性。每个 recipe 都可以尽可能的翔实,以彻底探索这个领域。 +* **更有深度**:为了避免指南写得太长,我们试着只包含了尽可能简单的示例来帮助你理解每个功能,然后就奔下一个话题了。在 cookbook 里,我们以更生动的形式包含了更复杂的示例并结合特性。每个案例都可以尽可能的翔实,以彻底探索这个领域。 * **传授 JavaScript**:在指南里,我们假设你至少具有 ES5 JavaScript 的中级水平。例如,我们不会解释 `Array.prototype.filter` 在计算属性中是如何过滤一个列表的。然而在 cookbook 里,我们将对一些必要的 JavaScript 特性 (包括 ES6/2015+) 进行探索和解释,以帮助我们构建更好的 Vue 应用。 * **探索生态系统**:对于高级特性,我们会假设你已经对生态系统有一定了解。例如,如果你想在 webpack 中使用单文件组件,我们不会解释如何在 webpack 中配置 Vue 以外的部分。在 cookbook 里,我们有空间去更深度探索这些生态系统中的库——至少能到对 Vue 开发者普遍使用的程度。 -## Recipe 编写指南 +## 参与 Cookbook 贡献 + +### 我们的目标 + +Cookbook 为开发者提供了一些示例,涵盖常见的或有趣的用例,并逐步解释更复杂的细节。我们的目标是超越一个简单的示例介绍,展现更广泛适用的概念及其注意事项。 + +如果你有兴趣参与贡献,请将您的想法填入 issue 并加上 **cookbook idea** 的标签作为起步,这样我们就可以帮助并引导您完成一个 pull request。在你的想法被认同之后,请尽可能遵循以下模板。有些小节是必须的,有些是可选的。我们强烈建议您遵循其顺序,但这也不是必须的。 +通常情况下案例应该: + +> * 解决一个具体的普遍性问题 +> * 从尽可能简单的示例开始 +> * 一次只介绍一个复杂的点 +> * 链接到其它文档,而不是在这里重新解释概念 +> * 把问题描述清楚,而不是假设大家对这个问题很熟悉 +> * 解释过程,而不是只告诉你最终结果 +> * 解释策略的利弊,包括它不适用于什么场景 +> * 会提及相关的替代方案,但会放到一个单独的案例中细讲 + +我们需要您遵照下面的模板。当然我们也理解有的时候为了使内容更清晰或顺畅你是有必要做一些调整的。另外不论怎样,所有的案例都应该从某些点上讨论选择使用这个模式的细微差别,且我们倾向于它们以替代方案章节的形式出现。 + +### 基本的示例 + +_必须的_ + +1. 用一两句话来说明问题。 +2. 用一两句话解释最简单的可能的解决方案。 +3. 显示一小段代码示例。 +4. 用一句话解释它完成了什么。 + +### 关于其价值的细节 + +_必须的_ + +1. 解决人们在看例子时可能遇到的常见问题。(最好以块引用格式呈现) +2. 显示常见错误的例子,以及如何避免它们。 +3. 用非常简单的代码示例展示好模式和坏模式。 +4. 讨论这个模式令人信服的理由。参考链接不是必需的,但鼓励提供。 + +### 实际的例子 + +_必须的_ + +通过以下方式演示能够为常见或有趣的用例提供支持的代码: + +1. 通过几个简单的设置例子,或者 +2. 嵌入一个 CodePen / JSFiddle 的例子 + +如果你选择稍后再提供,那么你仍应该表述它是什么和做什么。 + +### 额外的上下文 + +_可选的_ -通常情况下 recipe 应该: +为这个模式写点东西,描述在这个模式下,它会应用到什么地方,为什么它能正常工作;以及在此基础上运行一些代码、提供一些延伸阅读材料,都是非常有帮助的。 -> 1. 解决一个具体的普遍性问题 +### 何时避免这个模式 -> 2. 从尽可能简单的示例开始 +_可选的_ -> 3. 一次只介绍一个复杂的点 +本节不是必需的,但强烈建议。你没有必要写一些特别简单易懂的事项,比如根据状态的改变开关 class,但是对于 mixin 这样的更高阶的模式来说是非常重要的。大多数高阶的问题的答案都是[“要看情况!”](https://codepen.io/rachsmith/pen/YweZbG),该部分就包含了这一点。在此,我们要诚实地看待模式何时有用,何时应该避免,什么时候更有意义。 -> 4. 链接到其它文档,而不是在这里重新解释概念 +### 替代方案 -> 5. 把问题描述清楚,而不是假设大家对这个问题很熟悉 +_可选的,除非这部分内容在之前已经提供过了_ -> 6. 解释过程,而不是只告诉你最终结果 +如果你已经在上一节提供了避免使用的条件,那么这一节是必须的。探索其它方法非常重要,这样人们在遇到某些反模式的情形时不至于无所适从。这样做是因为考虑到 web 是一个不同人有着不同代码结构解决不同问题的大舞台。这个应用是大是小?它们要把 Vue 集成到一个现成的项目中还是从零起步构建新项目?它们的用户只是想达成一个目标还是多个?有很多异步数据吗?所有的这些担忧都会影响实现替代品。一篇好的 cookbook 会为开发者提供这些相关信息。 -> 7. 解释策略的利弊,包括它不适用于什么场景 +## 致谢 -> 8. 会提及相关的替代方案,但会放到一个单独的 recipe 中细讲 +文档贡献是需要很多时间的,如果您花时间提交这部分的文档,我们将感激不尽。 diff --git a/src/v2/cookbook/unit-testing-vue-components.md b/src/v2/cookbook/unit-testing-vue-components.md index 36b6c2f48..521150f4e 100644 --- a/src/v2/cookbook/unit-testing-vue-components.md +++ b/src/v2/cookbook/unit-testing-vue-components.md @@ -4,7 +4,7 @@ type: cookbook order: 6 --- -## 简单的示例 +## 基本的示例 单元测试是软件开发非常基础的一部分。单元测试会封闭执行最小化单元的代码,使得添加新功能和追踪问题更容易。Vue 的[单文件组件](../guide/single-file-components.html)使得为组件撰写隔离的单元测试这件事更加直接。它会让你更有信心地开发新特性而不破坏现有的实现,并帮助其他开发者理解你的组件的作用。 @@ -58,9 +58,7 @@ test('Foo', () => { // 将名字更新至足够长 wrapper.setData({ - username: { - 'Lachlan' - } + username: 'Lachlan' }) // 断言错误信息不再显示了 diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index 77330e246..2bccf2449 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -4,7 +4,7 @@ type: cookbook order: 9 --- -## 简单的示例 +## 基本的示例 有很多时候你在构建应用时需要访问一个 API 并展示其数据。做这件事的方法有好几种,而使用基于 promise 的 HTTP 客户端 [axios](https://github.com/axios/axios) 则是其中非常流行的一种。 @@ -124,7 +124,7 @@ new Vue({ .catch(error => { console.log(error) this.errored = true - }). + }) .finally(() => this.loading = false) } })