Vue
vue 实用总结, 技巧分析
绿子丿
这个作者很懒,什么都没留下…
展开
-
文档碎片对象的角度看 减少对 dom 的操作
文档碎片对象的角度看 减少对 dom 的操作减少dom操作通常我们总是在使用各种 前端框架时, 会说减少dom操作;尽可能多的使用前端框架所带的方法去操作元素,为什么要减少dom操作?我们平时每次对dom的操作都会触发"重排"(重新渲染界面,发生重绘或回流),这严重影响到能耗,一般通常采取的做法是尽可能的减少 dom操作来减少"重排",怎样减少dom操作?文档碎片 可以帮我们;** 什么是文档碎片?**文档碎片: document.createDocumentFragment原创 2022-03-03 13:56:10 · 244 阅读 · 0 评论 -
uniapp 代码和打包优化
uniapp 代码和打包优化uniapp 代码和打包优化1. 代码优化1.1 代码书写规范性1.2 组件或插件按需引入2. 打包优化uniapp 代码和打包优化uniapp 打包,优化思路:1. 代码优化1.1 代码书写规范性这里主要是书写代码的规范, 避免不必要的备注,console等;这里推荐可以使用 uniapp 插件市场的 eslint-js点击 工具 --> 插件安装 --> eslint-js --> 配置这里具体配置依个人而定: 主要是换行,多余空格,分号,原创 2020-10-14 09:33:25 · 3573 阅读 · 2 评论 -
父亲向子组件传值
父亲向子组件传值+ 步骤既然父向子传值,肯定有必备的条件父组件 ===> 1. 调用子组件 2. 注册局部组件, 3. 注册的局部组件用来传值给儿子// 父亲调用儿子的组件import son from './components/son'// 父亲export default { name:'Father', data(){...原创 2019-09-07 16:31:16 · 161 阅读 · 0 评论 -
nginx + compression-webpack-plugin 实现打包压缩
nginx + compression-webpack-plugin 实现打包压缩**前端:安装 : npm i compression-webpack-pluginvue.config.js 配置 const CompressionWebpackPlugin = require("compression-webpack-plugin");const productionGzipEx...原创 2020-03-25 13:32:16 · 567 阅读 · 0 评论 -
打包分析工具 webpack-bundle-analyzer
打包分析工具 webpack-bundle-analyzer安装npm install webpack-bundle-analyzer --save-devvue.config.js配置module.exports = { chainWebpack: config => { config .plugin('webpack-bu...转载 2020-03-25 13:09:46 · 189 阅读 · 0 评论 -
node express vue前后端小项目带导出功能-过程记录
项目结构后端: nodejs + express前端: vue , vue-cli数据库: 无 ,暂时使用json文件,只是用来暂时用来显示,实际数据来自钉钉后台导出功能: 使用的是 @d2-projects/vue-table-exportfs文件读写 文件读写会遇到同步异步读写问题;定时同步数据 使用node-schedule麻烦点: 数据的同步请求和异步下面是基础...原创 2020-01-17 19:20:03 · 320 阅读 · 0 评论 -
excel @d2-projects/vue-table-export
@d2-projects/vue-table-exportexcel 导出工具安装: npm i @d2-projects/vue-table-export --save引入 : import excel from '@d2-projects/vue-table-export';挂在: Vue.use(excel )使用: this.$export.excel({ ...原创 2020-01-17 19:47:18 · 2061 阅读 · 0 评论 -
Vuex 状态管理,简单理解
Vuex 状态管理,简单理解如果你之前使用过vue.js,你一定知道在vue中各个组件之间传值的痛苦,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被修改,所有引用该值的地方就会自动更新,那么接下来我们就来学习一下vuex是如何修改状态值的:我们新建一个vue项目(这里由于我们是讲解vuex,所以对于vue项目的创建我们不会讲解太详细);在命令行输入 vue init w...转载 2019-12-31 13:33:58 · 146 阅读 · 0 评论 -
Vue watch handle
Vue watch handle 方法 监听$routewatch 监听路由对象 $route // 监听路由 watch:{ '$route': { handler ({ fullPath }) { // $route对象内部的fullPath this.active = fullPath this.$nextTick(() =>...原创 2019-12-30 19:56:34 · 1436 阅读 · 0 评论 -
Vue-route 的 beforeEach 实现导航守卫
vue-route 的 beforeEach 实现导航守卫vue-route beforeEach 可以做一些路由进入前的验证 // 全局路由const vueRouter = new Router({ routes: [ //...... { path: '/account', name: 'account...原创 2019-12-30 19:39:20 · 132 阅读 · 0 评论 -
Vue this.$nextTick
Vue this.$nextTickVue 中的 nextTick 涉及到 Vue 中 DOM 的异步更新Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM,API 文档中官方示例如下:...转载 2019-12-30 15:35:32 · 86 阅读 · 0 评论