随笔分类 - vue
摘要：安装 cnpm i node-sass cnpm i sass-loader 使用 在src/assets文件夹中创建global.scss文件(存放定义的css样式) 在vue.config.js文件中定义css配置 注意sass-loader的安装版本,如果是v8的版本使用prependDate
阅读全文
摘要：创建eslint.js文件/或在eslint.js文件中配置以下文件 //eslint配置文件 module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/essential', ], parserOption
阅读全文
摘要：安装三个依赖 npm install -S file-saver xlsx npm install -D script-loader 1.使用方法 <input type="file" @change="importExcel"> 或者使用element-ui <el-upload ref="inp
阅读全文
摘要：安装三个依赖 npm install -S file-saver xlsx npm install -D script-loader 1、在src目录下创建一个目录vendor，放入Export2Excel.js 2、安装相关组件 npm install -S file-saver 用来生成文件的w
阅读全文
摘要：生成打包报告 (vue ui 可视化面板) 通过 vue.config.js 修改 webpack 的默认配置 ( ① chainWebpack 通过链式编程的形式，来修改默认的 webpack 配置 ② configureWebpack 通过操作对象的形式，来修改默认的 webpack 配置 )
阅读全文
摘要：(1)1.主要技术是应用虚拟列表 2 什么是虚拟列表 虚拟列表就是只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染，以实现减少消耗，提高用户体验的技术。它是长列表的一种优化方案，性能良好。 3 实现思路 （1）写一个代表可视区域的div，固定其高度，通过overflow使其允许纵向 Y 轴
阅读全文
摘要：在vue的main中,我们经常用到插件,插件都是用Vue.use(plugin)进行注册的,那么在use的时候到底做了什么? 当我们调用use的时候,会调用插件中的install(设置)函数,并将vue实例传入install方法, 但是同一个插件只会在项目中安装一次，所以，其内部还有的作用就是防止同
阅读全文
摘要：问题:打包完成后,项目启动后还有打印语句? 1.开发环境, 生产环境, 是2套不同的环境 开发环境需要console.log使用 生产环境不需console.log使用 让一套代码, 在2个环境自动生效 nodejs打包时执行main.js代码时, node内全局内置变量process(固定) co
阅读全文
摘要：mixin是什么 Mixin是面向对象程序设计语言中的类，提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂 本质 本质其实就是一个js对象， 它可以包含我们组件中任意功能选项，如data、c
阅读全文
摘要：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新 因此比如我们修改一个数组其中的一个值，或者添加一条数据时，数据变化了,但是视图没有渲染。 例如: <div v-for="item in items" :key="item">{{item}}</div> <button @click="a
阅读全文
摘要：render 函数是 Vue2.x 新增的一个函数、主要用来提升节点的性能，它是基于 JavaScript 计算。使用 Render 函数将 Template 里面的节点解析成虚拟的 Dom 。 render也可以称为渲染函数 因为 Vue 是虚拟 DOM，所以在拿到 Template 模板时也要转
阅读全文
摘要：全局自定义指令 在main.js中注册input聚焦 Vue.directive('focus', { inserted: function (el) { // 聚焦元素 el.focus() } }) directive:指令 inserted:嵌入 focus:指定的是指令的名称，使用的时候要加
阅读全文
摘要：两者的区别: computed:依赖多个变量计算出一个变量,具有缓存机制,依赖值不变的时候,会复用计算值,不能执行异步操作, watch:通常监听一个变量,可以执行异步操作 简单记就是:computed是多对一,watch是一对多 计算属性(computed) 为什么要用计算属性? 当一个数据需要复
阅读全文
摘要：Vue的生命周期 Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们称为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。 生命周期: vue实例从创建到销毁的过程 beforeCreate( 创建前/出生
阅读全文
摘要：第一种: 传递一个数组，这里的class需要使用v-bind的数据绑定; <h2 :class="['red', 'size']">hello</h2> 第二种: 在数组中使用三元表达式; <h2 :class="['red', 'size', flag?'active':'']">hello</h
阅读全文
摘要：vue路由的两种导航传参方式: 1.声明式导航(router-link) 2.编程式导航(push|replace) query参数 声明式导航(router-link) 父组件: 传递参数 <!-- 跳转并携带query参数，to的字符串写法 --> <router-link to="/home/
阅读全文
摘要：1.概念 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。 2.何时使用？ 多个组件需要共享数据时 3.搭建vuex环境 创建文件：src/store/index.js //引
阅读全文
摘要：EventBus 一种组件间通信的方式，适用于任意组件间通信。 EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件。EventBus主要是用到发布者-订阅者的设计模式，所以代码里需要有一个
阅读全文
