Jay的博客

Vue 三种强制刷新方法的机制、使用场景、开销说明。本文章将会告诉你 $forceUpdate 正确的使用时机；key 属性为什么能实现组件强制刷新。

使用过 element-ui 的朋友，应该都用过 MessageBox 弹框组件。MessageBox 弹框 只需要一条JS代码就可以调用使用，非常方便。那这是怎么实现的呢？我们也来搞一个这样的组件。

element-ui el-table 动态新增 el-table-column，表格闪现问题的分析与解决在做动态增加删除 el-table 的列，遇到 column 显示隐藏会造成 el-table 闪烁情况：效果如下：代码如下：<template> <div> <el-select v-model="select"> <el-option label="显示列3" :value="true"></el-opt

关于 key 的使用，最常用的场景就是 v-for了。每当我们要在页面中添加一个v-for，Vue 都会强烈建议我们给生成的列表子项设置key。但是，在实际的使用中，大家很可能对于 key 的使用并不正确。我们平常的用法哪里猜错了呢？到底该怎么正确使用key?

借助 webpack 的 require.context()，轻松实现 vue 模块的自动化导入。

一、什么是 ESLint在 vue-cli 下进行过开发的，大概都会有过这样的体验：代码明明没有错误，vscode （编辑器）就是报错标红。这个现象就是 ESLint 在搞鬼了。ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。—— 摘抄于《ESLint 官方文档—— Getting Started with ESLint》上面对 ESLint 的描述通俗的讲就是：ESLint 是一个代码检测工具，用于检测代码

最近使用 `element-ui` 的 `upload` 组件上传图片列表，发现当选择上传的图片出错时，会将上一张图片删除了。问题原因分析、解决方法。及upload methods 如何使用。

1. Vue CLI 中 img src 动态赋值2. 自定义组件实现v-model3. Element-ui: Vue 中 阻止 element-ui 组件事件冒泡4. Element-ui：在<el-form>不设置rule的时候 resetFields 失效

前言在平常的开发或者学习中，我们可能会有意无意的接触到CSS Modules。那CSS Modules到底是什么呢？现在，我将带你走进CSS Modules，去了解它的始末。本文将从什么是CSS Modules、CSS Modules诞生的原因、怎样使用CSS Modules这三个角度去讲解CSS Modules。另外，如果你觉的本文写得不够好，我在文末也附上了前辈大佬们对CSS ...

在搭建网站时，上传文件都是一个不可避免的需求。为了实现上传文件功能，需要使用`<input type="file"/>` 、formData数据和ajax(axios)来实现。

因为Vue 是SPA，所以首页第一次加载时会把所有的组件以及组件相关的资源全都加载了。这样就会导致首页加载时加载了许多首页用不上的资源，造成网站首页打开速度变慢，降低用户体验。为了解决上面问题，我们需要对Vue实现组件懒加载。本文将对懒加载的实现原理以及使用进行讲解。

背景：<child></child> //child是一个组件如上，我们都知道组件的引用就跟常规标签一样。但是组件标签并不能进行如下操作：<child> <p>我是一个组件！</p></child>如果在创建组件时没有使用<slot>插槽，‘<p>我是一个组件！</p>’这句将不会渲染。因为默认情况下，父组件在子组件内套的内容，是不显示的。什么是 <slot>插槽？首先

在Vue 中，对HTML的原生事件做了支持。例如：click、focus、change等事件。除了原生事件外，Vue 还允许用户自定义事件。什么是事件？什么是自定义事件？在了解自定义事件前，先来了解什么是事件。

在Vue中，父子组件的通讯有Vue提供的一套操作方法，常用的借助props、ref等来实现。那非父子组件间的通讯如何实现呢？一般的可以使用vuex来实现。但是，vuex一般处理的是全局的组件状态管理。而且，有些项目根本就没有用到vuex。为此，这里提供另一种组件通讯方式：Vue 事件总线—— EventBus。

style scoped的作用在使用Vue-Cli 开发时，我们都知道，在组件的<style></style>加上 scoped属性，可以让<style></style>里的样式只在当前组件生效。那，这是如何实现的呢？Vue 对 scoped的渲染规则对于所有的 Vue 组件，只要设置了<style scoped></st...

axiso是一个基于 promise 的 HTTP 库。相比AJAX，他有着丰富的API，更易于使用。那他与AJAX有什么样的区别呢？在vue中如何使用？其拦截器又是什么呢？

前言在项目开发中，一般分为有三个环境：development环境test环境production环境因此，我们就会遇到某些变量会根据不同的环境进行变动。例如，后端暴露给前端的API地址。在development环境中，API地址可能是后端的开发主机地址；但是到了production环境，API地址就变成了服务器主机地址。面对这种情况，难道我们在每次把代码部署到服务器前都要收到去修改吗...

1. 怎么设置全局属性；2. 怎么引用全局属性；3 . 原型是什么？4. `__proto__`与`prototype`的区别5. Vue全局公共方法优化

Watch (监听) 用于实时监听data里面的值的变化。var watchExampleVM = new Vue({ el: '#watch-example', data: { question: '', answer: 'I cannot give you an answer until you ask a question!' }, watch: { ...

前言在vue的开发中，组件间的嵌套是一定会使用的技术。那在vue-cli 的使用是怎样的呢？一、在父组件中调用子组件步骤：创建一个子组件<template> <div> 这里是子组件！！ </div></template><script>export default { name: "Children"...

前言在vue 的开发中，对router -link 的使用是不可避免的。有时候，我们需要对router-link 添加事件。正好，前段时间，我就遇到这样的需求。当我写下以下代码时，无论我怎么点都没有反应。 <router-link @click="isFinish()">link</router-link>最后，百度了才知道，必须给事件添加修饰符.native 事...

一、前言在实际的开发中，我们的界面基本都是多层嵌套组合在一起的。为了能直观的查看项目的结构, Vue Router 引入的嵌套路由的功能。二、写法首先，我们先回顾一下非嵌套路由的写法：引入vue-router编写配置文件const route = [ { path: '/foo', component: Foo}]指定显示的位置<router-view&gt...

文章目录前言方法一：v-if方法二：this.$forceUpdate()方法三：:key=“value”前言在vue 开发中，出于各种目的，我们常常需要让组件重新加载渲染。接下来，我们就讲讲强制组件刷新的方法。方法一：v-if对于v-if 的使用，我们常用在子组件显示上。我们查看文档时，会发现它常常被用于与v-show 的比较。对于经常性加载的组件，显示方式应该使用v-show 来实现...

前言为了让vue 页面效果展示时高端点、友好点，我们可以适当的加入一些过渡效果。使用规则在vue 中，如果要让某个组件（元素）添加过渡效果，就必须让该组件（元素）包裹在<transition></transition> 元素中。该元素有个name 属性，用于标识作用。此外，我们还要去设置过渡效果css。这部分将着重讲：Vue 为过渡效果设置了一系列的class:...

前言当我们开发完项目后，需要将项目部署到服务器上。这时，我们就需要对项目进行打包了，生成纯HTML、CSS和JS文件了。一般的，我们进行项目打包时只需要在命令行运行 npm run build 就可以进行项目打包了。但是如果不进行一些配置的话。我们就会遇到运行打包好的 index.html 文件，页面时全部空白的。这时，我们只需要进行下列设置即可：第一种错误：这个错误是因为没有对webp...

关于vuex的…mapActions、 …mapState、…mapMutations和…mapGetters的理解背景：mapState、mapGetters、mapMutations、mapActions他们返回的都是一个对象，而vue的methods、computed也是一个对象。在js中不能把多个对象直接放到一个对象中，如：{{name:‘aaa’},{age:18}}是错的，故而...

前几天在学vuex对mutations和actions进行了比较学习，现在说一下自己对两个的理解：相同点：mutations和action都是用来改变Vuex store的状态的；不同点：mutations提供的回调函数是同步的；而actions提供的方法是异步的，此外，actions的方法最终还是通过调用mutations的方法来实现修改vuex的状态的。解析：在使用mutations或...