FishPlusOrange
FishPlusOrange
前一段时间，在参与一个 Vue 新项目时，选择 `axios` 作为前端 HTTP 库。在使用 `axios` 过程中发现，通过 `post` 方式传递的参数后端接收不到： ```javascript import Vue from 'vue' import axios form 'axios' Vue.prototype.$axios = axios this.$axios.post('/api', { username: 'FishPlusOrange', password: '123456' })...
在使用 `babel` 过程中往往涉及到两个重要的概念，`babel-polyfill` 和 `babel-plugin-transform-runtime`。因为 `babel` 在编译时默认只转换新的 JavaScript 语法糖，不会编译新的 API，比如 `Promise`、`Symbol`、`Set` 等等。这时候就需要 `babel-polyfill` 和 `babel-plugin-transform-runtime`： ### babel-polyfill 由于 `babel` 不会编译新的 JavaScript API，所以需要使用 `babel-polyfill` 为当前环境提供一个**垫片**。 从入口文件（`lib/index.js`）的源码可以看到，`babel-polyfill` 主要由两个部分组成：`core-js` 和 `regenerator-runtime`： - core-js...
每一个 Vue 实例都有一个完整的生命周期，其包括实例创建、设置数据监听、编译模板、将实例挂载到 DOM以及在数据变化时更新 DOM 等。 Vue 实例的生命周期简单概括就是从创建到挂载再到销毁，以及过程中的更新。 在整个生命周期过程中，Vue 提供了一些**生命周期钩子**，给了我们在不同阶段执行自定义逻辑的机会。 接下来总结一下生命周期的概念以及生命周期钩子的使用。 话不多说，先来看一个例子（[JSFiddle](https://jsfiddle.net/FishPlusOrange/uL5a7k1y)）： ```html {{ message }} ``` ```javascript new Vue({ el: "#app", data() { return { message: 'Here goes lifecycle...
个人认为比较好的方法是利用对象的 `toString` 方法进行检测。 其主要原理是，如果控制台输出的是对象，那么就会保留该对象的引用，每次打开控制台时都会重新调用该对象的 `toString` 方法并将返回结果打印到控制台。 这样，我们就可以通过自定义 `toString` 方法，以检测浏览器 DevTools 是否处于开启状态。 以函数为例： ```javascript let foo = () => {} foo.toString = () => 'opening' console.log('%s', foo) // opening ``` 但需要注意的是，部分对象只会调用默认的...
Vue 组件之间的通信是 Vue 一大重点知识，这里在**不涉及 Vuex** 的前提下，对其进行一个总结。 Vue 组件之间的通信大致可以分为以下几种情况： - 父子组件之间 - `props` - `ref` - `v-on` / `$emit` - `v-model` - `$children` - `$parent` - `$listeners` - `.sync` - `provide`...
在 Vue 项目开发过程中，我们多多少少都使用过 Vue 渲染函数，这里对其进行一个简单的总结。 ### 基础应用 个人在编写一些可复用的组件时常常会用到 `render` 函数。在绝大多数情况下，Vue 推荐使用模版来创建 HTML。然而在一些场景中，我们确实需要 JS 的编程能力，这时就可以用 `render` 函数，相比模版，它更接近编译器。 #### 使用模板 看一个官方的例子： ```html Hello world! ``` 对于该锚点标题组件，假设我们这样定义组件接口： ```html Hello world! ``` 如果只能通过 `prop`...
之前浏览器兼容性问题都是分开记录的，Issues 现在支持删除，所幸就把单独记录的都删了，汇总到这里。 这些问题大部分都是以前开发过程中遇到的，现在的项目基本上不要求兼容低版本 IE，所以汇总的问题数可能不是很多，就当做是一个简单的记录吧。 ### IE11 浏览器下 get 请求缓存问题 开发过程中遇到一个问题： IE11 浏览器下，发起同一个 GET 请求（参数一致），无法获取到实时数据。 经排查发现： 默认情况下，当 IE11 浏览器发起的 GET 请求参数一致时，只有第一次请求会发送到服务器并返回结果（状态码200）。对于后续发起的相同请求，浏览器直接使用缓存数据（状态码304），从而无法获取到实时数据，导致业务出现问题。 解决方案： - 添加随机数 在相应的 GET 请求后面添加一个随机数参数，比如时间戳： ```javascript // url 为原请求路径...
Vue 使用了基于 HTML 的模板语法，在模板内我们一般只进行简单的数据处理。如果放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，我们都应当使用[**计算属性**](https://cn.vuejs.org/v2/guide/computed.html)。 举一个简单的计算属性例子（假设是复杂逻辑）： ```html {{ info }} let vm = new Vue({ el: '#app', data: { name: 'FishPlusOrange', age: 24 }, computed: { info: function() { return this.name...
在写前端样式时，CSS 预处理器可谓是前端开发者的开发利器。个人比较喜欢的是 Sass3 的语法规则 SCSS，以下是在 vue-cli 项目中使用 Sass 的相关配置（均基于 webpack 模板和 SCSS 语法）： ### 配置和使用 以我的个人项目 [cnode-by-vue](https://github.com/FishPlusOrange/cnode-by-vue/blob/master/build/webpack.base.conf.js) 为例： 1. 安装相关依赖 node-sass 和 sass-loader： ```bash npm install node-sass sass-loader --save-dev ```...
简单记录一下使用 vue-cli 构建的项目在**本地开发环境**下接口调试过程中遇到的一些问题。 一般情况下，本地开发环境中前端工程的端口号和后台接口的端口号不相同，举个简单的栗子： 在一个使用 vue-cli 构建的项目中，后端提供一个获取数据的接口 `/get` 和一个传输数据的接口 `/send`，端口号为8080，所以本地通过 `http://localhost:8080/get` 和 `http://localhost:8080/send` 请求这两个接口。 为了避免端口号冲突，我们配置 `config/index.js` 文件中 `dev` 下的端口号 `port` 为8686（保证不相同即可）。终端执行 `npm run dev`，本地通过 `http://localhost:8686` 访问该前端工程主页面，开始接口调试。 以 vue-resource 为例，请求 `/get`...