import Vue from ‘vue‘ import App from ‘./App.vue‘ import router from ‘./router‘new Vue({el: ‘#app‘,render: h => h(App),router }) 当使用eslint校验运行上面这段代码时（该代码在src/main.js文件中），会报错 ? http://eslint.org/docs/rules/no-new Do not use ‘new‘ for side effects src/main.js:8:1 new Vue({两种方法解决该问题：方法一：定义一个变量xxx(可为任意值)接收新创建的Vuelet xxx = new V...
1、Vue packages version mismatch翻译：vue包版本匹配错误报错样例：报错原因：通常出现于一些依赖库的更新或者安装新的依赖库之后(可以认为npm update已经成为一种习惯)，导致了vue和vue-template-compiler的版本不一致。解决方案：统一vue和vue-template-compiler的版本1 "vue": "2.3.4", 2 "vue-template-compiler": "2.3.4",（注：如上所示版本号均为样例，具体实现请小伙伴们根据自己的版本号对应）然后执行：npm update 就可...
组件异步初始化一个列表，初始化列表之后会向父组件$emit一个可执行的方法（initItem），某几个父组件(<ComponentDeme />)没有定义执行initItem方法，则这几个父组件没有执行，某一个父组件(<ComponentDeme @initItem="initItem"/>)执行了这个方法之后，其他组件都会执行这个父组件的initItem的方法。 原文：https://www.cnblogs.com/Nyan-Workflow-FC/p/15222625.html
最近开发后台系统，需要调用子组件方法，思来想去，想到了refs，奈何在其中一个方法中可以正常调用，但是到了tab切换里面却报子组件方法未定义，一时半会没想到原因(也许是因为最近加班太多,脑容量不够了，哈哈)，先上代码：到这一步通过this.$refs.records.fetchTableData()无法调用<table-list-records>子组件的方法，控制台返回fetchTableData未定义，如下：但是在同一个界面另一个方法中却能正常执行：这里是在界面请求到用户详...
一、 使用 vue-cli 快速构建vue项目， 引入vue-echarts组件安装： > npm i vue-echarts --save 修改 webpack.config.js 配置：{test: /\.js$/,loader: ‘babel-loader‘, include: [resolve(‘src‘),resolve(‘node_modules/vue-echarts‘),resolve(‘node_modules/resize-detector‘)] }, 用法示例：<template><v-chart :options="polar"/> </template><script> import ECharts from ‘vue-echarts/components/ECharts‘ im...
首先安装依赖$ npm install --save vue-clipboard2然后再main.js中引用import Vue from‘vue‘import VueClipboard from ‘vue-clipboard2‘ Vue.use(VueClipboard) dome内容<iclass="el-icon-document-copy"//饿了么的复制图标v-clipboard:copy="copy"//需要复制的内容v-clipboard:success="onCopy"//复制成功回调title="复制"v-clipboard:error="onError"//复制失败回调></i> copy: "需要复制的内容",//声明的数据...
原文地址Vue中子组件调用父组件的方法，这里有三种方法提供参考第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template><div><child></child></div> </template> <script>import child from ‘~/components/dam/child‘;export default {components: {child},methods: {fatherMethod() {console.log(‘测试‘);}}}; </script>子组件<template><div><button @click="childMethod()">点击</button></di...
这篇文章主要介绍了关于如何解决vue中methods中的方法闭包缓存的问题，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下vue中methods中的方法闭包缓存问题问题背景需求描述在路由的导航栏中需要, 判断是否为第一次点击需要一个标志位来记录是否点击过现状:这个标志位只在一个函数中用过.不希望存放全局希望在这个methods中形成闭包, 用来缓存这个函数做出如下尝试后, 发现可以实现.当前问题:不能在闭包调用时找到正确...
本篇文章主要介绍了Vue2 SSR 缓存 Api 数据，内容挺不错的，现在分享给大家，也给大家做个参考。本文介绍了Vue2 SSR 缓存 Api 数据，分享给大家，具体如下：1. 安装缓存依赖: lru-cachenpm install lru-cache --dev2. api 配置文件config-server.jsvar LRU = require(lru-cache)let api if (process.__API__) {api = process.__API__ } else {api = process.__API__ = {api: http://localhost:8080/api/,cached: LRU({max: 1000,ma...
本篇文章主要介绍了vue项目优化之通过keep-alive数据缓存的方法，内容挺不错的，现在分享给大家，也给大家做个参考。<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。prop:include: 字符串或正则表达式。...
强缓存： 到底什么是强缓存？强在哪？其实强是强制的意思。当浏览器去请求某个文件的时候，服务端就在respone header里面对改文件做了缓存配置。缓存的时间、缓存类型都由服务端控制。强缓存实现： cache-control: max-age=315360000, public ,immutable客户端和代理服务器都可以缓存该资源，在315360000秒（10年）的有效期内，如果有请求该资源的需求的话就直接读取缓存,statu code:200 ，即使用户做了刷新操作，也不向服务器发起...
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 prop: include: 字符串或正则表达式。只有匹配的组件会被缓存。exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。通过vue提供的keep-alive减...
用到这个的业务场景是这样的： a页面点击新建列表按钮进入到新建的页面b，填写b页面并点击b页面确认添加按钮，把这些数据带到a页面，填充到列表（数组），可以添加多条， 点击这条的时候进入到编辑页面，确认修改之后，回退到a页面，a页面需要更新这条数据 实现这个功能的时候，由于是路由页面之间的跳转，首先想到的方案有几个：1. 用sessionStorage本地存储；2. 用路由参数带过去；3. 用兄弟组件传值 由于是添加完之后如果按回退...
1.安装good-storage插件 cnpm i good-storage --save2.读/写的方法 common/js/cache.js: import storage from good-storageconst SEARCH_KEY = __search__ const SEARCH_MAX_LENGTH = 15// compare:findindex传入的是function,所以不能直接传val function insertArray(arr, val, compare, maxLen) {const index = arr.findIndex(compare)if (index === 0) {return}if (index > 0) {arr.splice(index, 1)}arr.unshift(val) // 插入到...
vue开发的时候，我们经常会有这样的需求：开发一个详细页面来展示商品的详细信息，根据列表页传入的id进行请求，拿到对应的数据进行渲染。 但是一般在路由上都会加上keep-alive保持数据的状态，除非强制无缓存刷新，这就导致第一次进入详情页面时，可以在created中拿到id，但是返回后，再点击进入，就不会再走相应的生命周期了，无法拿到新的id 这时候可以使用vue的$destroy()方法 这是vue的一个生命周期，完全销毁一个实例。清理它...