冰雪为融的博客

相信很多人用vuejs构建单页应用时都会用到一些全局方法，比如发ajax请求时喜欢用axios挂载到vue原型上，如下：// 1 引入vue和axiosimport Vue from 'vue'import axios from 'axios'// 2 对axios的一些封装// code ...// 3 然后挂载到原型上Vue.prototype.$axios = axios用的时候就直接上this.$axios// 用axios.get()方法可以这样用this.$ax

我们知道，在vue3.0引入了composition API,setup函数是其核心函数在setup函数中，可以使用ref函数，用于创建一个响应式数据，当数据发生改变时，Vue会自动更新UI例如：使用ref函数定义一个变量countimport { ref } from 'vue';function useChangeCount() { let count = ref(0); function change_count() { count.value += 1

通过v-model控制模态框的显示隐藏示例：<template> <a-modal title="" :centered="true" :visible.sync="visible" :mask="false" :footer="null" :width="width" @ok="handleOk" @cancel="handleCancel" > <div class="modal-ti

官方解释：Vue.use( plugin ) 参数： {Object | Function} plugin 用法： 安装 Vue.js 插件。如果插件是一个对象，必须提供install方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。 该方法需要在调用new Vue()之前被调用。 当 install 方法被同一个插件多次调用，插件将只会被安装一次。 Vue.use()什么时候使用？它在使用时...

一、在filter/index 文件中实现全局过滤器函数如下所示目录export function pluralize(time, label) { if (time === 1) { return time + label; } return time + label + 's';}/* 数字 格式化 */export function numberFormatter(num, digits) { const si = [ { value: 1e18

组件销毁有很多种情况比如页面关闭，路由跳转（没有使用keep-alive时的路由切换）还可以使用v-if和改变key值来销毁组件，这属于手动销毁组件

Axios请求头中的Content-Type常见的有3种：　　　　1.Content-Type:application/json　　　　2.Content-Type:application/x-www-form-urlencoded　　　　3.Content-Type:multipart/form-data1.Content-Type: application/jsonAxios中默认的请求类型，它声明了请求数据会以json字符串的形式发送。在php中，使用$_POST是接收不到的

通过is属性动态渲染组件<template> <div class="tabs-select"> <a-tabs :default-active-key="defaultActiveKey" size="small"> <a-tab-pane v-for="item in tabs" :key="item.key" :tab="item.tab" :force-rende.

vue的插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。实际上，一个slot最核心的两个问题这里就点出来了，是显示不显示和怎样显示。了解vue的同学都知道插槽分为单个插槽，具名插槽，还有作用域插槽，前两种比较简单这里就不赘述了，今天的重点是讨论作用域插槽。简单来说，前两种插槽的内容和样式皆由父组件决定，也就是说显示什么内容和怎样显示都由父组件决定；但是第三种插槽就不同了，作用域插槽的样式由父组件决定，内容却由子组件控制。简单来说：前两种插槽不能绑定数.

前言Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。本文是作者通过实际项目的优化实践进行总结而来，希望读者读完本文，有一定的启发思考，从而对自己的项目进行优化起到帮助。本文内容分为以下三部分组成： Vue 代码层

exportPreSumData(this.params) .then(res => { const blob = new Blob([res]); const fileName = '累积降水量统计.xls'; const elink = document.createElement('a'); elink.download = fileName; elink.style.displ.

Prettier 简单使用ESLint 与 Prettier配合使用首先肯定是需要安装prettier，并且你的项目中已经使用了ESLint，有eslintrc.js配置文件。npm i -D prettier配合ESLint检测代码风格安装插件：npm i -D eslint-plugin-prettiereslint-plugin-prettie...

导出表格代码：exportHandle() { exportPreSumData(this.params) .then(res => { const blob = new Blob([res]); const fileName = '报表.xls'; const elink = document.c...

可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。html：<div id="app"> {{context}}</div>js...

添加一个css属性 pointer-events:none; 即可//据网传，除了none/auto以外，其他都是用在svg项目中pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all<button&...

网上有很多方法，但此处只记录一个亲测有效的方法1、通过让元素获得焦点其原理是通过让元素支持focus事件,让元素获取焦点,div正常情况下是无法像input元素一样获得焦点的，但是正如我们可以通过给div加上conteneditable属性让div元素变得可以编辑一样,在这里我们也可以通过给div元素加上tabindex = "0"的属性让元素可以获取焦点:简单示例：<...

element Table 展开行功能 官方使用：通过设置 type="expand" 和Scoped slot可以开启展开行功能，el-table-column的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的Scoped slot相同。但这种设置，只是点击箭头可展开 ，点击整行是不能展开的但想要提升用户体验，最好的是点击行可展开，所以，本人研...

这里我写一下我自己用的vue 移动端适配 ，可能跟别人的不一样。但是效果是一样的。我是安装 amfe-flexiblenpm i -S amfe-flexible安装px2rem，使得我们在开发中不需要自己手动计算，照常写pxnpm install px2rem-loader --save-dev在build目录下的utils.js修改配置 co...

网上有很多，我也看了很多，下面是我看到的最容易理解的也是我最认同的解释，所以就记录一下喽要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假...

主要借助于NProgress 插件NProgress是页面跳转是出现在浏览器顶部的进度条官网：http://ricostacruz.com/nprogress/github：https://github.com/rstacruz/nprogress安装：$ npm install --save nprogress或者 $ yarn add nprogress使用...

下载最简单的方法就是用a链接实现，然后加一个download属性。但是有一个问题，从后台请求回的接口，对于图片和pdf及svg都不能实现下载功能，也就是download没有起作用。所以下面的方法就是解决这个问题的。<a @click="downloadFile(file.name, file.url)" >下载</a>/* 第一个参数是文件的名字，第二个参数是文件...

在vue中不同组件通信方式如下1.父子组件，通过prop2.非父子组件，通过vuex或根vue转载器通常是以上两种情况，然而还有一种比较特殊的情况，即孙子组件或更深层次的组件通信1.下面是a.vue<template> <div class="test"> <son prop="data"></son>...

vue中的render函数，我在网上找了很多，下面这一篇文章最详细https://blog.youkuaiyun.com/kkae8643150/article/details/52910389/ { // 和`v-bind:class`一样的 API 'class': { foo: true, bar: false }, // 和`v-bind:style`一样...

在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource。关于为什么放弃推荐? -&gt; 尤大原话最近团队讨论了一下，Ajax 本身跟 Vue 并没有什么需要特别整合的地方，使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果，vu...

最近做vue项目时遇到登录权限问题，登录以后再发送的请求头部并没有携带登录后设置的cookie，导致后台无法校验其是否登录。检查发现是vue项目中使用axios发送ajax请求导致的。查看文档得知axios默认是不让ajax请求头部携带cookie的，因此，在main.js中设置如下：import axios from 'axios'axios.defaults.withCredentia...

前言我们在使用vue-cli启动项目的时候npm run dev便可以启动我们的项目了，通常我们的请求地址是以localhost:8080来请求接口数据的，localhost是没有办法设置cookie的。我们可以在vue-cli配置文件里面设置一个代理，跨域的方法有很多，通常需要后台来进行配置。我们可以直接通过node.js代理服务器来实现跨域请求。vue proxyTable接口跨域...

1、首先axios不支持vue.use()方式声明使用，看了所有近乎相同的axios文档都没有提到这一点 建议方式在main.js中如下声明使用import axios from 'axios';Vue.prototype.$axios=axios;那么在其他vue组件中就可以this.$axios调用使用2.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问...

在做项目的时候，遇到一个问题，当刷新页面的时候，导航的激活菜单和当前显示的组件不匹配，查了一下官网（https://www.iviewui.com/components/menu），寥寥几句话就说完了，至于怎么实现没有详细说明Menu methods:方法名    说明    参数updateOpened    手动更新展开的子目录，注意要在 $nextTick 里调用    无up...

vue.js的官网写的很好哈，我就是为了详细认真的学习一遍，所以才总结的，比较推荐看官网：vue.js操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型...

使用iview做项目的时候，打包上传到服务器后，iview中自带的字体图标显示不出来，百度了很多方法，下面的方法可靠哦更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置：添加 publicPath: '../../', 完美解决问题if (options.extract) { return ExtractTextPlugin...

 1、Menu 导航菜单：问题1：当屏幕小的时候，如果我们选择的主题是dark或者是primary，那掉下来的文字会看不到如下图官网示例：正常情况下：当屏幕缩小的时候：此时统计分析和综合设置就找不到了，其实也不是找不到了，只是掉了下来，下面是白色背景，文字也是白色的，自然就找不到了原因：如果我们检查就会发现，这个menu菜单也是通过让li浮动实现的，所以我们...

怎么使用和安装我就不详细说了，文档写得很清楚，https://www.kancloud.cn/wangfupeng/wangeditor3/3325991、当屏幕缩时，富文本编辑器的选项会被隐藏，如下图官网的demo：当屏幕变小时，菜单选项就超出了富文本编辑器的区域，撤回和恢复已经隐藏不见了原因，如果我们检查代码就会发现，其实富文本编辑器使用了弹性盒模型（不懂的百度，推荐阮一峰大神的文...

看到一篇比较好的文章，分享出来：https://blog.youkuaiyun.com/qmzmzxk/article/details/81748422官网也写得很清楚：https://www.iviewui.com/components/table#PX注意一点，初始化排序，官方解释：通过给某一列设置 sortType 可以在初始化时使用排序。 { title: '...

如果我们在Form组件中嵌套使用Input组件的时候，会有一个小问题，如果我们在一个Form组件中只使用了一个Input组件，当该Input组件获取焦点的时候，我们按enter键，整个页面会刷新解决办法：方法一、&lt;Form ref="formInline" :model="jigouInfo" inline :label-width="80" @keydown.native.e...

 vue中，只有组件内的值，发生了变化，组件才会重新渲染，那我们怎么实现，两个不同组件，一个组件内的值发生变化，另一个组件也随之变化，比较常用的场景就是下面的例子了：头部导航是一个单独的组件，侧边栏是一个组件，其余部分是内容区，想要的效果就是，当内容区的个人信息修改成功之后，希望头部右侧的个人信息（姓名和头像）也随着变化分析：头部和内容区，不在同一个组件内，也不是父子关系解决办法：通过...

在VUE-CLI 3下的第一个Element-ui项目（菜鸟专用）上面这个链接是vue-cli3.0安装element-ui的详细过程，如果想要按需引用看下面的1.引入vue add elementHow do you want to import Element? --&gt;选择 Import on demand （关键）Choose the locale you want t...

写在前面vue-cli 3.x 的beta版本已经发布了一段时间，很早就像体验一番一直找不到时间。这些日子刚好有空就想着依照网上的一些例子练下手，刚一上手就踩到坑了。3.x 版本对整个项目的构建都有很大的改动，项目的默认配置整个都转移到CLI service里去了，从而所有的配置文件在初始化的项目中并没有生成。初次生成项目的时候可谓是完全懵的，无论是baidu还是google，对于3.x的介...

日期组件如下：/*组件中的属性有 type，value,placeholder,placement,options,width 属性值和iview中相对应的方法有 onChange, onClear, onOk*/<template> <div> <DatePicker :open="open" :options="op...

一、什么是MVVM？MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewMo...

https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&amp;mid=2247485737&amp;idx=1&amp;sn=14fe8a5c72aaa98c11bf6fc57ae1b6c0&amp;source=41#wechat_redirect