atu1111的博客

vue引入css三种方式1.在对应.vue文件的中引入<script>import "@/assets/css/reset.css"</script>2.在.vue文件的中引入<style scoped> @import '../../assets/css/VueCss.css'; </style>3.main.js 全局引入import './assets/css/common.css'...

Render()函数&JSX  本文参考这篇文章 https://www.jianshu.com/p/7353974795dd1. 前言1.1 HTML DOM树与和Vue的virtual DOM我们知道，浏览器在解析HTML文件时，会将HTML标签解析成一个DOM树（tree of DOM nodes）。通过结构化的组织节点元素，浏览器可以很方便的跟踪整个页面的情况，但频繁的局部更新节点代价很高。为了更高效的渲染HTML，Vue.js和React以及Ember.js一样，根据真实DO

vue页面echarts卡顿问题1.在vue中使用echarts使用setOption更新加载图形很慢  在vue中使用echarts和绘制柱状图，图例很多，但是只有100多条，但是绘制很慢。this.myChart.setOption(this.option)  因为是在data中定义了myChart属性，在script中定义一个变量用来接收myChart，就可以解决这个问题,原因变量定义在data里，canvas触发了vue监听而更新，而每一次的更新，导致加载变慢var myChartmy

双击事件会触发两次单击事件问题  问题描述：当在dom上同时绑定单击事件和双击事件时，点击双击事件会触发两次单击事件，这是我们不想看到的，而是应该单击事件与双击事件分开。  分析：单击事件和双击事件区别就在间隔时间，当我们点击一次时，设置一个延时器，延时一定时间（300ms为好），在这300ms之内，在此点击，认定执行的是双击事件，如果超过300ms再点击第二次，执行的是单击事件。  方案：  单击事件代码：handleNodeClick(data) { var that = this

vue-router的base和vue.config.js的publicPath区别和联系  vue-router的base官方文档解释：base类型: string默认值: "/"应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"  vue.config.js的publicPath官方文档解释：1.只设置vue-router的base配置  配置路由基准路径为app,vue.config.js配置文件的publicPath为相对路径

vue-use应用  相信很多人在用Vue使用别人的组件时，会用到 Vue.use() 。例如：Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时，就不需要用 Vue.use(axios)，就能直接使用。那这是为什么呐？  答案  因为 axios 没有 install。  什么意思呢？接下来我们自定义一个需要 Vue.use() 的组件，也就是有 install 的组件，看完之后就明白了。1.自定义指令  以自定义指令举例，也可以自定义组件。  ins

vue 部署上线清除浏览器缓存  本文借鉴https://blog.youkuaiyun.com/weixin_43299180/article/details/116271209  vue 项目打包上线之后，每一次都会有浏览器缓存问题，需要手动的清除缓存。这样用户体验非常不好，所以我们在打包部署的时候需要尽量避免浏览器的缓存。下面是我的解决方案：一、修改根目录index.html在 head 里面添加下面代码<meta http-equiv="pragram" content="no-cache"&g

Vue通过在index.html添加的script js文件 如何在组件内使用不会 xxx is not defined错误  本文参考https://www.cnblogs.com/sxz2008/p/8245282.html我们以 jQuery 为例，来讲解一、绝对路径直接引入，全局可用  主入口页面 index.html 中用 script 标签引入：<script src="./static/jquery-1.12.4.js"></script>这样，其实就已经可

vue之webpack打包的一些理解  一个使用vue-cli2创建的项目,npm run build 打包后的文件目录如下：  打包后的文件分析：app.js：基本就是你实际编写的那个app.vue(.vue或.js?),没这个页面跑不起来.vendor.js:vue-cli全家桶默认配置里面这个chunk就是将所有从node_modules/里require(import)的依赖都打包到这里，所以这个就是所有node_modules/下的被require(import)的js文件manife

vue多页面应用  配置vue多页面，生成的vue项目默认是单页面  单页面和多页面的优缺点：单页面应用是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中，内容较多时首页加载速度比较慢多页面是指一个应用中有多个页面，页面跳转时是整页刷新1.在src文件夹下新建两个页面文件夹2.每个页面文件夹下都有基本的一个.html后缀的文件（页面模板文件），.js文件（主入口）和.vue（根组件）  public下面的index

如何知道vue-cli创建的项目对应的webpack版本  找到项目下node_modules/webpack/package.json文件里的version字段即可知道

Vue.config.productionTip = false 是什麽意思？  main.js中总会有这么一行代码：Vue.config.productionTip = false  访问项目，打开控制台如下提示信息。  将Vue.config.productionTip 设为true ，打开控制台如下提示信息,比设为false多了行提示信息。Vue.config.productionTip = true它会显示你生产模式的消息。所以，在开发环境下，保持默认设置false即可。...

  1).vue这选择Runtime+Compiler或Runtime+Only版本生成的项目，public 下面都有的 index.html 模板文件 <div id="app"></div>  html里面的div元素id为app可以不用在里面写内容，因为在main.js里的template里面的内容会对el绑定的元素进行替换。  这是Runtime+Compiler版本项目下main.js内容new Vue({ el: '#app', components:

npm install 安装依赖包 --save、–save-dev、-S、-D的区别  本文参考：https://blog.youkuaiyun.com/aaqingying/article/details/1013713521.npm install 和 npm i 是一样的,都是安装package.json文件中的依赖包。  安装单独的依赖包时，npm install <packageName>  --save等同于-S （常用，可保存在package.json文件中），  -S, --sa

乾坤-vue应用实例1.前期准备工作1.1 创建主应用  1) vue 新建主应用vue create qiankun-main  2) 创建src/components/father.vue<template> <div>我是father</div></template><script>export default { name: 'Father'}</script><style sco

vue-router的base和mode配置项  路由代码如下：const router = new VueRouter({ mode: 'history', base: '/vue', routes})  1) mode   mode: 'history’表示，访问路径不带#号，如：http://localhost:8080/vue  2) base  配置单页应用的基路径，当点击路由时： <router-link to="/">Home</ro

vue根目录下index.html中的id="app"与src目录下的App.vue中的id="app"的关系  1) index.html中的<div id="app"></div>是指定绑定元素根路径的  2) App.vue的<div id="app"></div>则是用于具体注入绑定元素的内容  3) 由于Vue组件必须有个根元素，所以App.vue里面，根元素<div id="app"></div>与外层被注入框架in

vue“@”和“~” 的使用1. vue设置别名  在build文件夹下的webpack.base.conf.js文件中设置src的路径别名。resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),'#': resolve('src/assets')}},  默认会有‘@’别名，指向src目录，还可以添加自定义别名等等

Vue.extend使用及理解  Vue.extend返回的是一个“扩展实例构造器”，也就是一个预设了部分选项的 Vue 实例构造器。刚学的时候对“扩展实例构造器”这一名词感觉很疑惑，其实它就像构造函数，构造函数中会事先定义好一些属性，new出来的对象也就默认有构造函数中的属性，同理Vue.extend也是如此<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met

vue–extends使用    extends和mixins类似，通过暴露一个extends对象到组件中使用。mixins功能请查看文章mixins使用及理解  extends会比mixins先执行。执行顺序：extends > mixins > 组件  extends只能暴露一个extends对象，暴露多个extends不会执行<!DOCTYPE html><html lang="en"><head> <meta charset="

vue中mixins的理解及应用  混入定义：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。  应用场景：在项目中，如果我们需要提取公用的数据或者通用的方法，并且这些数据与方法不需要组件间进行维护，就可以使用mixins1.方法的复用  在借助mixins之前，在两个不同的组件的组件中调用foo方法，需要重复定义，倘若方法比较复杂，代码将更加冗余。若借助m

谷歌浏览器安装vuejs devtools 插件  git clone时默认分支为最新的develop分支。develop是测试分支，不是正式分支，git时更换分支即可。 本人亲测v5.1.1分支是可用的，估计再向前的分支也是可用，当然master分支更是可用。 正确获取方法（使用分支:v5.1.1）,develop是测试分支下载后，npm run build出现如下错误：1 . 下载chrome扩展插件。在github上下载压缩包并解压到本地，github下载地址：https://github.c

vue事件总线  EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次1.创建事件总线import Vue from 'vue'export const EventBus = new Vue();//事件中心2. 页面

vue生命周期  本文借鉴：https://blog.youkuaiyun.com/mqingo/article/details/86031260[vue实例的生命周期](https://cn.vuejs.org/v2/guide/instance.html #实例生命周期)什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！[生命周期钩子]( https://cn.vuejs.org/v2/api/ #选项-生命周期钩子)：就是生命周期事件的别名而已；

项目根目录下的.editorconfig文件  此文来自https://www.cnblogs.com/xieqian/p/10045610.html一、.editorconfig文件是什么？  在项目里，大多时候都能看到.editorconfig文件，刚开始总是忽视掉它，认为它不太重要。但是，它的存在，必定有它的理由，于是，抽空来研究一下，它是什么，能做什么。   官网是这么介绍EditorConfig的，“EditorConfig帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码样式。E

怎么新建vue3.0版本项目   vue-cli脚手架版本是@vue/cli 4.5.13，可以选择生成是3.0版本还是2.0版本项目

vue3.0集成krpano1.将全景krpano静态资源文件vtour放入vue项目中  vue@cli3没有static，需要放在public目录下2.修改index.html文件。在文件中引入tour.js  构建vtour组件。由于krpano没有提供npm包（当然也不会提供，你懂得），所以只能通过script引入相关文件。krpano最关键的是tour.js，所以需要修改index.html文件。在文件中引入tour.js。由于我们将vtour放在static中，所以路径改变了，添加如下

vue3怎么获取public静态资源  vue@cli3没有static，静态资源都放在public目录下1.定义变量获取静态资源路径process.env.BASE_URL data() { return { publicPath: process.env.BASE_URL }; },2.通过${}引入 <img :src="`${publicPath}/favicon.ico`" alt="">...

Vue中使用${}实现变量和字符串的拼接1.先定义好变量 data() { return { a:'你好' }; },2.在字符串中使用${}拼接变量  注意不是单引号，而是两个 ` 号（esc下面的按键） mounted(){ alert(`${this.a}世界`) }...

vue获取微信定位1.下载依赖  npm install weixin-js-sdk --save-dev2.在vue页面使用<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div></template>

vue通过百度地图获取当前位置<template> <div class="about"> <h1>This is an about page</h1> <baidu-map @ready="mapHandle" style="width:100%;height:400px" :scroll-wheel-zoom='true' ></baidu-map> </div></template&g

vue自定义百度地图弹窗1.全局注册方式1.1 引入百度地图和百度地图自定义弹窗js(自己去百度api里面下载就可以了)<!DOCTYPE html><html lang=""><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w

vue使用百度地图1.安装：npm install vue-baidu-map --save2.全局注册使用有3种2.1在main.js注册使用  在main.js全局注册import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, { ak: 'xPNLWkqdUGRQNqT2ze1Hh6bGVoj0GTuk'})2.1.1在vue页面使用：<template> <div class="about">

vue路由1.路由导航守卫  to: Route: 即将要进入的目标 路由对象  from: Route: 当前导航正要离开的路由  在路由守卫中，只有next()是放行，其他的诸如：next(’/logon’) 、 next(to) 或者 next({ …to, replace: true })都不是放行，而是：中断当前导航，执行新的导航。可以这么理解：next() 是放行，但是如果next()里有参数的话，next()就像被重载一样，就有了不同的功能。  下面这段代码意思是:如果页面要跳转的路

vue路由keep-alive  keep-alive会把其包裹的所有组件都缓存起来1.在App.vue写2个router-view出口//需要缓存的<keep-alive> 　　<router-view v-if="$route.meta.keepAlive"></router-view></keep-alive>//不需要缓存的<router-view v-if="!$route.meta.keepAlive"></ro

vue-cli3中配置axios及使用  1.vue 安装 npm install axios ，在main.js里面就可以使用axiso如下配置：import axios from 'axios'Vue.prototype.$axios = axiosaxios.defaults.baseURL = 'http://10.81.36.96:8080';  2.vue页面，如下调用，不会出现跨域问题methods: { async getArtInfo() {

vue cli3.0 打包静态文件目录的配置  要使打包后的文件与cli2.0的相同，需要修改vue.config.js的几项配置变量：module.exports = { publicPath: './', outputDir: "dist", // 输出文件目录 lintOnSave: false, // eslint 是否在保存时检查 assetsDir: 'static', // 配置js、css静态资源二级目录的位置 }...

Vue方法与事件  下面这段定义讲解，我只是敲了大概的实现，对定义不是很了解 1. @click方法名可以不加(),默认会将原生事件对象 event 传入。 2..Vue 提供了一个特殊变量$event，用于访问原生 DOM 事件 3.使用的preventDefault()也可以用 Vue 事件的修饰符来实现，在＠绑定的事件后加 小圆点“．”，再跟一个后缀来使用修饰符<!DOCTYPE html><html lang="en">

列表渲染指令  当需要将一个数组遍历或枚举一个对象循环显示时，就会用到列表渲染指令 v-for。它的表达 式需结合 in 或者 of来使用，类似 item in items 的形式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1

条件渲染指令   v-if、 v-else-if、 v-else指令类似于java的条件语句 if(status==1) { } else if(status==2) { } else if(status==3) { }