xumaozeng的博客

2021-01-15 Vue组件化思想及实践组件化组件化vue组件系统提供了一种抽象，让我们可以使用独立可复用的组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。组件化能提高开发效率、方面重复使用、简化调试步骤、提升项目可维护性，便于多人协同开发组件通信常用方式props$emit/$onevent busvuex边界情况$parent$children$root$refsprovide/inject非props特性- $attrs- $listeners

2021-01-06 Vue的设计思想及简版实现理解Vue的设计思想数据响应式原理Vue中的数据响应化理解Vue的设计思想将视图View的状态和行为抽象化，让我们将视图UI和业务逻辑分开Vue是MVVM框架的实现，其包括三大要素：数据响应式、模板引擎和渲染数据响应式：监听数据变化并在视图中更新Object.defineProperty()（Vue2）Proxy（Vue3）模板引擎：提供描述视图的模板语法插值：{{}}指令：v-bind, v-on, v-model, v-for,

2020-01-03 Vuex设计原理及简单实现Vuex核心概念Vuex原理解析Vuex核心概念Vuex是集中式存储管理应用的所有组件的状态，并以相应的规则保证以可预测的方式发生变化安装插件：vue add vuex组成部分：state状态、数据mutations更改状态的函数actions异步操作store包含以上概念的容器状态-statestate保存应用状态，store.jsexport default new Vuex.Store({ state: {counter:0

2021-01-02 Vue-router插件简单原理实现Vue-router官方介绍Vue-router源码实现Vue-router官方介绍Vue-Router是Vue.js官方的路由管理器安装：vue add router使用步骤：使用vue-router插件，router.jsimport Router from 'vue-router'Vue.use(Router)创建Router实例，router.jsexport default new Router({...})

2020-11-01 vue面试题集合

2020-09-14 Vue源码学习入口文件初始化数据响应式入口文件初始化首先，在package.json文件中script里找到dev=>配置文件scripts/config.js；然后根据TARGET:web-full-dev找到入口文件web/entry-runtime-with-compiler.jssrc\platforms\web\entry-runtime-with-compiler.js文件扩展了$mount方法：处理了template和el选项，尝试编译它们为render

2020-01-10 vue-cropper图片裁剪需求：对本地上传、远程FTP上传和视频截取三种方式的获得图片放入裁剪区进行裁剪无论哪种方式，都需要得到裁剪图片的文件file，然后通过window.URL.createObjectURL方法取得图片url，最后通过vue-cropper组件裁剪图片产出图片信息...

2020-01-09 本地上传文件速率的计算文件上传使用的组件是element-ui中的el-upload计算文件上传速率函数每个文件都有个唯一值，这个值就是MD5，获取方法如下描述：项目中对上传视频文件要求显示进度和速率文件上传使用的组件是element-ui中的el-upload使用el-upload中的钩子函数on-progress和before-upload中的参数计算出上传速率...

2019-10-29 Vue-简单的表情组件首先，定义表情对象包括src和title的JSON格式然后，定义表情组件样式文件index.vue，与face.json在同一目录下最后，在需要的文本框中插入选中的表情开发一个简单的表情插件组件，其包含三个部分：表情图像的json格式对象、表情面板组成样式和点击表情插入文本内容中首先，定义表情对象包括src和title的JSON格式表情对象为一...

2019-10-25 vue-单页面路由跳转滚动条置顶问题描述解决方法问题描述在vue单页面项目中，由路由跳转页面时滚动条重新置顶，但是如果有子路由的话，官方网站上的路由方法就不合适了官方方法：const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { ...

2019-10-12 Vue-vue框架全生命周期理解第一阶段：beforeCreate-初始化界面前深入响应式原理beforeCreate第二阶段：created(初始化界面后)created第三阶段：beforeMount(渲染dom前)beforeMount第四阶段：mounted(渲染dom后)mounted第五、六阶段：beforeUpdate(更改数据前)和updated(更改数据后)...

2019-08-01 使用脚手架vue-cli搭建vue+webpack配置项目创建项目创建项目全局安装vue-clicnpm install @vue/cli -g// 查看安装成功vue --version// 输出 vue版本2.9.6生成项目模板有很多模板，其中推荐使用webpack-simple(个人)和webpack(企业)两种，这里使用webpack模板...

2019-07-08 vuex+keepAlive动态缓存问题描述第一步 设置keepAlive包裹需要缓存的组件第二步 在列表页面里使用`beforeRouteLeave`函数控制需要是否需要缓存的条件问题描述现有三个页面，A（列表页面）、B（创建页面）、C（详情页面）需求：A页面进入B，B返回A页面刷新列表，A页面不缓存；A页面进入C页面，C返回A页面不刷新列表，需要缓存A页面解决方...

2019-07-08 vue项目文件的权限配置首先，在项目目录下的`main.js`里写入权限添加的主函数然后，在需要的文件中写入`main.js`中的方法，配置权限首先，在项目目录下的main.js里写入权限添加的主函数在项目目录下的server文件夹下的server.js文件中，写入接口函数 // 用户权限 export function get_permission(params) ...

2019-07-15 Vue非父子组件之间的通信父子组件之间的通信父组件向子组件通信-props子组件向父组件通信-$emit,@事件名非父子组件之间的通信首先，建立一个单独的bus文件，保存在组件之外然后，在需要传数据的组件里定义#emit事件最后，在需要监听事件的组件里created()里定义监听函数描述：vue中组件之间的通信有很多种，目前常用的有vuex状态管理模式、event-bus...