vue技术
关注
分享
扫一扫
文章平均质量分 82
前端程序猿dzf
记录程序猿开发的一点一滴
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
浅谈html2canvas实现浏览器截图的原理
1、什么是html2canvashtml2canvas可以直接截取特定dom元素内的所有内容并导出图片官网地址：http://html2canvas.hertzen.com/2、使用方式安装npm i html2canvas -S引入使用// vue文件 <!-- 海报html --> <template> <div class="c-code" v-if="showOriImg"> <div clas原创 2021-12-16 16:36:22 · 8344 阅读 · 1 评论 -
拖拽组件实现原理
直接进主题：1、做拖拽组件 核心是要设置组件绝对定位平且设置动态的style: left top动态变化就行<template> <div @mousedown="handleMouseDown" class="locationWidget" :class="{ active: isActive }" :style="{ 'margin-top': (widget.marginTop |原创 2021-10-22 16:42:14 · 3176 阅读 · 0 评论 -
nuxt服务端开发使用记录
一、初始化项目npx create-nuxt-app my-blog使用sass 自动注入功能npm install sass sass-loader @nuxtjs/style-resources安装axios 和代理 npm install @nuxtjs/axios @nuxtjs/proxy -S安装cookies插件npm i cookie-universal-nuxt -S 二、项目整体结构package.json{ "name": "my-blog", "原创 2021-05-18 11:30:11 · 549 阅读 · 0 评论 -
浅谈vuex源码分析
vuex使用方式store/index.jsimport Vue from 'vue'import Vuex from '@/vuex'// import Vuex from 'vuex'// import logger from 'vuex/dist/logger.js'Vue.use(Vuex)// // new Vuelet store = new Vuex.Store({ state: { // state = > data name: 'zhufe原创 2021-05-07 11:45:27 · 300 阅读 · 1 评论 -
浅谈vue的ssr服务端渲染
为什么使用服务器端渲染 (SSR)更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。请注意，截至目前，Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引。在这里，同步是关键。如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。更快的内容到达时间 (time-to原创 2021-04-27 17:11:19 · 1706 阅读 · 9 评论 -
vue的data属性数据劫持思路
vue的data属性数据劫持思路1、 一开始初始化使用入口<body> <!-- 'hello' + arr + 'world' --> <div id="app" a=1 style="color:red;background:blue"> hello {{arr}} world </div> <script src="dist/vue.js"></script>原创 2021-04-13 07:10:24 · 522 阅读 · 0 评论 -
react16接入微前端到vue项目总结
1.vue主应用配置const apps = [ { name: 'react16', entry: '//localhost:3888', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）fetch container: '#react16', activeRule: '/rfmtools/#/react16' }];registerMicroApps(apps); // 注册应用sta原创 2020-12-29 12:24:49 · 739 阅读 · 0 评论 -
手写vue-router核心源码
1、vue-router使用规则vue-router使用时 要调用Vue.use(VueRouter)使用如下：router/index.jsimport VueRouter from '@/vue-router';Vue.use(VueRouter);const routes = [ { path: '/', name: 'Home', component: Home },]const router = new VueRo原创 2020-12-25 11:42:42 · 234 阅读 · 0 评论 -
qiankun-微前端初体验
这里写自定义目录标题1、微前端2、什么是微前端2.1技术栈无关2.2独立开发、独立部署2.3增量升级2.4独立运行时3、初步简单使用介绍3.1 首先创建基座项目，即顶层项目，用来包裹各个微项目。3.2 首先创建vue微项目，可独立运行，可加载在父级项目。3.3 首先创建react微项目，可独立运行，可加载在父级项目。4、启动3个项目测试下1、微前端qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。qiankun 孵化自蚂蚁金融原创 2020-08-18 16:39:14 · 2137 阅读 · 6 评论 -
vuex框架原理和源码研究分析
大家一直使用vuex, 但是大多数很少了解到vuex的背后原理，我也很好奇它的背后原理，故上网看博客了解和下载Vuex源码研究分析。vuex是管理页面数据状态的统一数据操作生态系统。修改数据要通过action mutation state change 的流程才能修改，保证数据的修改可控和方便排查数据流向。state变化后，vue根据双向数据绑定实现页面展示。目录一、框架核心流程二、vuex源码目录机构三、初始化装载与注入3.1装载实例3.2 装载分析四、store对象构造4.1 环境判断4.2 数据初原创 2020-05-10 22:42:36 · 257 阅读 · 0 评论