qq_40685439的博客

1、安装echarts：npm install echarts --save2、安装ant-design-vue：yarn add ant-design-vue（我用的tab组件是ant-desgin-vue的，所以要安装这个）3、main.js引入以上两位import Vue from 'vue'import App from './App.vue'import Antd from 'ant-design-vue';import 'ant-design-vue/dist/antd.css

手机模拟器：夜神模拟器；解决的办法细节有两点：vue.config.js配置文件把publicPath根路径配置上module.exports = { publicPath:'./'}2.路由配置为hash模式（默认就是哈希模式） ，不能是history模式const router = new VueRouter({ routes})原因不太清楚，先蹲一个解答回复。...

众所周知，vue的传值方法很多，如下：父传子：子组件设置props + 父组件设置v-bind:/:子传父：子组件的$emit + 父组件设置v-on/@;Bus总线：新建一个vue实例， emit发送，on接收,这个方法要注意以下坑1：第一次触发的时候，接收页面 $ on没监听到，可以去了解一下页面跳转的生命周期的关系，注意接收的时间就行了，或者把发送 $ emit放在this. $ nextTick里面；坑2：$on监听不会自动销毁，所以多次跳转会发现接收多次，需要在监听页面的销毁生命周期函数用

import 和 requirenode编程中最重要的思想就是模块化，import和require都是被模块化所使用。遵循规范require 是 AMD规范引入方式import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法调用时间import 是在编译时调用,所以必须放在文件开头requier是在运行时调用,所以require理论上可以运用在代码的任何地方本质require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把requir

转载：https://blog.youkuaiyun.com/RkHker/article/details/108541282

链接：https://www.cnblogs.com/Ivy-s/p/9937173.html

回顶部按钮为一张img图片btnFlag 控制图片显示隐藏backTop 回顶部的方法HTML代码<img v-if="btnFlag" class="go-top" src="图片url" @click="backTop">// vue的两个生命钩子，这里不多解释。// window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件vue实例：mounted () { window.addEventListener('scroll', this.scro

链接：https://www.cnblogs.com/wfblog/p/10519599.html

Vue.extend 属于 Vue 的全局 API，在实际业务开发中我们很少使用，因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中，Vue.extend + $mount 这对组合是我们需要去关注的。官方文档学习开始之前我们先来看一下官方文档是怎么描述的。Vue.extend( options )参数：{Object} options用法：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特

在以前我们希望组件之间实现双向绑定，即将父组件的值传给子组件，而后又在子组件中更新该值，并传递回给父组件，是比较麻烦的一件事。按照一般的方式，我们是通过在子组件中抛出一个事件，同时在父组件写一个方法接收并更新，实在是麻烦。现在有了一种更简便的方法，直接使用 .sync 来实现。如下面的代码：<db-component-demo :moduleCode.sync="moduleCode"></db-component-demo>在原本的绑定上，添加.sync子组件中，同

步骤：安装依赖 npm install vue-mobile-calendar -S2.在入口文件main.js中引入：import Vue from 'vue'import Calendar from 'vue-mobile-calendar'Vue.use(Calendar)3.使用：<calendar v-model="calendarShow" :defaultDate="defaultDate" :minDate="minDate"

场景：在分页查询的时候，有时候我们在切换查询条件时，分页的页数还停留在上一次查看的页数，而不是从第一页开始。下图是重新查询的数据，但是页码还停留在第六页（当数据多于六页数据的时候，会显示第六页的数据，但是当数据少于六页数据时，就会显示暂时无数据，其实数据是拿回来的，只是这时候分页器接收到的页码是6，而没有那么多数据显示，就会显示暂无数据）**解决办法：**可以给装分页器的元素添加一个条件渲染，让每次请求时，分页器都重新加载。在请求开始前，把pageshow设为false，请求结束之后，就设为true（

在vue中，如果要过滤的数据是依赖this上下文的话，是会报错的，因为this的指向是undefined，而不是vue实例；打印结果：原因：这句话的大概意思是，vue中的过滤器更偏向于对文本数据的转化，而不能依赖this上下文，如果需要使用到上下文this我们应该使用computed计算属性的或者一个method方法。解决办法1：在data中定义一个that=this，在需要过滤的过滤器中传入that参数，然后在过滤器中使用结果：可以拿到firstTime的值解决办法2：改用compu

1. 安装Vue CLIVue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。npm install -g @vue/cli# ORyarn global add @vue/cli2.构建项目vue create my-project这里选择第二个（Manually sel

如图，在定义menuArr为对象数组，在html中需要循环渲染对象中的某个数据（图片中的name），但是会报图二的错误，而页面正常渲染。图1：图2：**产生bug的原因：**在渲染的时候，menuArr的值还没初始化，里面的对象还不存在，在这个对象中取其他值自然会报错，但是渲染完成后，menuArr中的值加载好了，因此可以渲染到，这也就是为什么界面正常显示，但控制台会报错的原因。解决办法：：渲染之前先判断一下menuArr里面的对象是否存在，也就是加上一个条件判断v-if。...

<form v-on:submit.prevent> <div> <input type="search" name="search" required v-model='inputVaule'> </div> <div> <input type="submit" name="submit" @click='search' value="提交"> </div&..

this.$set(obj, key, value)我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性<template> <div class="hello"> <button @click="setMessage">添加属性</button> {{ student.name }} <input type="text" v-model="student.age"> </div

我们在前端开发中经常看到:visible.sync这种修饰符，很多人不知道这是干什么的，特别是在使用ElementUI的时候，里面有个弹窗el-dialog组件的时候会有用到:visible.sync<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="centerDialogV

vue-luck-draw是开源的，可以直接查看链接：https://100px.net/docs/wheel/blocks.html，GitHub上的发布者是ldqjs；支持多种框架以及不同端设备的需求，形式有九宫格以及大转盘两中，各种配置安排的明明白白...

一般来说。利用this.$router.push进行页面跳转时，如果传递的参数为对象（图片中data为对象）时，不能直接传，而是需要把对象经过JSON.stringify转为字符串，取数据的时候需要用JSON.parse解析出来，刷新的时候才不会出现undefined。注意：1、经过测试，此方法只对以query形式传参时才会起效果，params不行。2、params传参，push里面只能是 name:‘xxxx’,不能是path:’/xxx’, 否则拿到的数据是undefined。因为params只.

场景：对某项数据进行增加/删除之后，重新调用获取此数据的方法（通过调用接口来获取），数据并没有被更新到。原因（猜测）：vue-apollo是有数据缓存机制的，对于请求相同的接口，不会向后台直接发起请求，二是通过从缓存那里拿数据。解决：加上fetchPolicy: ‘no-cache’...

遇到的问题：当父组件用Props传参datePickerObj给子组件时，datePickerObj的类型为对象，其中有三个属性，showTitle，showDate，showTime。子组件接收时，默认三个属性全是true，当父组件只传其中一个属性时父组件：子组件的模板：子组件的props：结果：页面该显示的时间日期的选择框没有出来原因：props 默认值只在没有传参时才会被读取，并不会为你的参数对象补齐属性，改善：利用计算属性，ES6对象的新方法assign（如果父组件有传参就覆盖默

百度地图的功能组件bm-marker，改变默认的图标，图标的来源如果是本地的话，需要用require引入，否则不显示。网络路径引入没有此问题

vue项目中，关闭eslint，以下的方法是我认为比较方便快捷的：在根目录的配置文件中vue.config.js加上lintOnSave: false,即可。

在全局注册vue组件时（注意全局注册必须在vue实例化之前声明)，template选项可以写我们的页面结构，也可以传一个id，当传的是页面结构模板时，最后渲染出来的是结构模板里面的内容。但是，如果当一个模板很复杂时，为了维护性以及代码易读性，可以对模板进行抽离，然后在全局注册的模板的template的选项中传一个templat标签的id，（但是template模板要放在el选项的元素外面），最后渲染出来的是template标签中的内容。...

最新的elementUI中的el-cascader组件的坑（版本2.13.2）在使用el-cascader组件时，发现如果渲染的数据过多时，组件的高度就会占满整个屏幕的高度，而el-cascader组件不会自动加上滚动条，并且二级选择器也没渲染出来，在2.6.0版本时还不会出现这种情况，查了一下原因，好像是新版本的坑于是给组件加样式：.el-cascader-menu {height: 300px;}就显示正常了，...

vue-router的hash模式跟history模式hash模式：URL地址栏中在#（包括）后面的为hash的值，可通过window.location.hash获取。HTTP的请求路径不包括hash值，#是用来指导浏览器动作的，对服务器端完全无用（页面无需跳转）。history模式：这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。但是前端的 URL 必须和实际向后端发起请求的 URL 一致，不然会报404。结论来源于：https://www.cn