vue
文章平均质量分 62
啥时候能干全栈
一个想要成为全栈工程师的默默奋斗小憨憨
展开
-
移动端/PC端适配实践
第一种方案amfe-flexible/lib-flexible和postcss-pxtorem,是阿里手淘系开源的一个库,用于设置font-size,同时处理一些窗口缩放的问题。我们使用的vant-ui,他的viewport适配方案,是按照设计稿375px去做的。所以第二种postcss-px-to-viewport更适合使用,postcss-px-to-viewport将px转换成视口单位vw。使用amfe-flexible/lib-flexible和postcss-pxtorem。原创 2023-08-14 14:51:26 · 1047 阅读 · 0 评论 -
van-list列表后退后@load首次渲染失效问题
van-list列表首次load失效问题原创 2022-08-01 15:39:44 · 822 阅读 · 1 评论 -
vuex实现项目中登录状态的管理
工具:chorme浏览器安装Vue.js devtools方便调试登录场景:页面的导航处或其他地方有时会显示用户现在的登录状态,状态可分为:未登录,正在登录(loading),登录成功并显示用户名。有些页面是不需要登录就可以让用户浏览的,但是有些页面必须登录才可以进入浏览。实践:场景1思考与实践用vuex创建一个数据仓库//src目录下新建一个store目录,创建index.js如下//创建数据仓库import Vuex from 'vuex';import vue from原创 2021-09-17 18:12:45 · 1577 阅读 · 1 评论 -
vue-slider-component滑块拖动插件的使用
效果图你可以左右拖动它的范围进度条,标签的样式都可以通过props更改文档里面写的很清楚。你可以设置一个点拖动,当然也可以很多个点拖动,上图我用了两个点。数值的范围,数值的最大最小值你也可以控制。总体使用感受很好,功能很齐全,文档也有具体api的使用和样例。使用文档gitub地址跟着里面的QuickStart安装,参数配置都写的很清楚,比如我写了一个demo首先你去npm install vue-slider-component --save然后你去main.js里面引入他import V原创 2021-08-31 17:50:10 · 4960 阅读 · 0 评论 -
VUE3效率的提升
静态提升vue2中当我们写如下代码<h1>hello</h1>静态节点如下render(){ createVNode("h1",null,"Hello World")}Vue3中认为静态节点就不会改变了,没有必要放在渲染函数中,因为渲染函数在更改时会反复运行。如下只创建一次,之后在render函数中重复使用就可以了const hoisted = createVNode("h1",null,"Hello World")function render(){原创 2021-06-16 19:02:36 · 177 阅读 · 0 评论 -
vite的理解并对比同类型的脚手架工具
webpack原理webpack打包后启动开发服务器,当改动模块后,跟改动模块相关的模块都要进行重新打包所以热替换慢vite原理直接请求服务器,先请求页面,页面发送请求到index.js,然后再发送对应模块的请求。综上总结:1.webpack会先打包然后启动开发服务器,请求服务器时直接给予打包结果。vite时直接启动开发服务器,请求哪个模块再对该模块进行实时编译。2.现代浏览器本身支持ES Module,会自动向依赖的Module发送请求,vite利用这一点,将开发环境下的模块文件,作为浏览原创 2021-06-16 17:55:28 · 358 阅读 · 1 评论 -
VUE高德地图实现根据移动覆盖点获得经纬度坐标和详细地址及根据经纬度确定覆盖点
经纬度手动定位,输入经纬度,显示详细地址。 async handleMapPositioning() { const result = await this.$api.getProductLocation(this.unionId); this.reMap = new AMap.Map('map-container-re-locate', { zoom: 13, viewMode: '2D'.原创 2021-05-27 18:54:55 · 1082 阅读 · 0 评论 -
前端网络总结
参考:浏览器工作原理1. DNSDNS(Domain Name System)是域名“系统”的英文缩写,是一种组织成域层次结构的计算机和网络服务命名系统,它用于TCP/IP网络,它所提供的服务是用来将主机名和域名转换为IP地址的工作。向浏览器的地址栏中输入一个URL按回车后:看浏览器缓存,如果浏览器不认识看本机host,然后是家里的路由器有没有缓存映射,如果都没有,有可能访问上级路由城市路由,继续向上级找。访问网站输入网站域名,DNS服务器就解析我们的域名为ip。这样我们实际访问的就是对应的ip地原创 2021-04-30 23:50:22 · 197 阅读 · 1 评论 -
如何理解虚拟DOM
1. 什么是虚拟dom一个普通的js对象,我们可以在这里看到⬇️,描述了视图界面的结构mounted(){ console.log(this._vnode)}在vue中,每个组件都有一个render函数,每个render函数会返回一个虚拟dom树,也就是说每个组件都对应一棵虚拟dom树。2.为什么需要虚拟dom在vue中,试图渲染会调用render函数,这种渲染不仅发生在组建创建的时候,同时发生在试图依赖的数据更新的时候,如果渲染的时候直接使用真实的dom,真实dom的创建更新插入等操作会原创 2021-04-02 14:52:49 · 218 阅读 · 0 评论 -
vuex
Vuex_State安装npm install vuex --save使用在src目录下新建store文件,在store中创建store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default storeVuex 通过store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中。通过在根实例中注册store选项,该store实例会注入到根组件下的所有子组件中,且子组件能通过原创 2020-11-17 19:07:41 · 155 阅读 · 0 评论 -
pwa
参考pwa1.添加manifest.json配置页面参数:{ "name": "WECIRCLE", "short_name": "WECIRCLE", "icons": [ { "src": "./img/icons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, {原创 2020-10-27 10:08:39 · 316 阅读 · 0 评论 -
AntDesign的select组件placeholder不显示问题
如下,select组件同时绑定了v-model和placeholder,当v-model绑定data中属性为空时,select绑定的placeholder属性不显示。 <a-select v-model="level" placeholder="选择日志级别" style="width: 250px" allow-clear> <a-select-option value="info">一般</a-select-option>原创 2020-10-10 18:04:07 · 2395 阅读 · 0 评论 -
vue判断移动端还是pc端显示不同组件
移动端和pc用了两套ui库 在不同设备显示不同组件 mounted() { if (this._isMobile()) { alert("手机端"); this.deviceType = 'mobile' } else { alert("pc端"); this.deviceType = 'pc' } }methods里面写判断移动端 _isMob原创 2020-09-24 17:42:26 · 1297 阅读 · 0 评论 -
node+officegen将代码导成word文档并添加页眉
officegen文档首先你要知道node.js如何读取文件和写入文件//读取const fs = require('fs')const path = require('path')const filename = path.resolve(__dirname,'./myFiles/1.txt')async function test(){ const content = await fs.promises.readFile(filename,'utf-8'); console原创 2020-09-22 17:46:56 · 2290 阅读 · 0 评论 -
记一次vue组件编写
实现效果:彩色刻度条随着底下5个数值的不同而变换长度,数值和相邻两个进度条缝隙对应,游标随着传入的值不同而变换位置。分析: 进度条总长度为100%,我们可以根据每一段进度占总体进度条的百分比来进行计算,得出每一段进度的长度,底下的进度数值同理,游标的位置也可进行计算得出百分比。已知: scale: [0, 30, 132, 438, 540, 644],//数值段 currentValue:200,//当前值计算:游标的位置:我们可以用(当前值-最小值)/(最大值-最小值)*100%来原创 2020-09-20 22:27:26 · 158 阅读 · 0 评论 -
nuxt学习笔记和踩坑记录
前置知识Nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染)。nuxt.js她简化了SSR的开发难度。那什么是ssr?SSR,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文件,将html页面传递给浏览器。SSR有两个优点:SSR生成的HTML是有内容的,这让搜索引擎能够索引到页面内容。SSR直接将HTML字符串传递给浏览器。大大加快了首屏加载时间。安装首先你要有vue-cli,然后你就可以初始化vue init nuxt/star原创 2020-09-15 14:57:45 · 1751 阅读 · 1 评论 -
Vue好用插件收集
一.滚动条插件各种不同样式滚动条Vuescroll.js官方文档地址二.无缝衔接滚动vue-seamless-scroll安装:npm install vue-seamless-scroll --savemain.js中添加import vueSeamlessScroll from 'vue-seamless-scroll'Vue.use(vueSeamlessScroll)文档地址...原创 2020-08-14 15:49:52 · 540 阅读 · 0 评论 -
vue中引入echarts
第一步下载npm install echarts --save在main.js中添加import echarts from 'echarts' //引入echartsVue.prototype.$echarts = echarts //引入组件第二步创建一个图表,一定要写图表的宽高<div id="vegpie-chart" style=" width:100%;height: 376px"></div>第三步在methods中获取绘制 var vegCh原创 2020-08-14 14:20:02 · 276 阅读 · 1 评论 -
vue-cli4中如何引入高德地图
使用的是vue-cli4,首先去高德地图获取你的key。第一步在vue.config.js中配置module.exports = { configureWebpack: { externals: { 'AMap': 'AMap' } }}第二步在public目录下的index.html中添加(写在body里面) <script src="https://webapi.amap.com/maps?v=1.4.15&a原创 2020-08-12 16:37:54 · 1228 阅读 · 1 评论 -
细细品一品VUE
1.更改数据后,页面会立刻重新渲染吗?数据变化,页面就会重新渲染。VUE更新DOM操作是异步执行的,只要侦听到数据变化就会开启一个异步队列,同步执行栈执行完毕后会执行异步执行栈,队列中微任务先执行。2.如何在更改数据后,看到渲染后页面上的值?利用vm.$nextTick或Vue.nextTick页面重新渲染,DOM更新后,会立刻执行vm.$nextTick△两者的区别:vue.nextTick内部函数的this指向window,vm.$nextTick内部函数的this指向vue实例对象。ne原创 2020-06-09 01:44:31 · 237 阅读 · 0 评论 -
vue系统学习
文章目录01课程准备02开始使用Vueel$mountdata插值表达式03vue的响应式-1vm.$elvm.$nextTick & Vue.nextTick04vue的响应式-205扩展_剖析Vue响应式原理06Vue相关指令v-prev-cloakv-oncev-textv-html01课程准备所有代码及文件放到github上进行托管,同学们自行clonegithub地址:h...原创 2020-05-19 11:46:13 · 599 阅读 · 2 评论 -
vue仿百度联想
功能:输入关键字弹出联想。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...原创 2020-03-30 00:25:43 · 530 阅读 · 0 评论 -
vue实现姓名筛选
功能:输入框中输入名字中的一个字可进行筛选,点击男女也可进行筛选<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0...原创 2020-03-29 16:05:08 · 1496 阅读 · 0 评论 -
vue实现调查问卷
同步展示:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu...原创 2020-03-29 02:00:36 · 7778 阅读 · 4 评论 -
vue实现简易计算机demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<...原创 2020-03-29 00:47:18 · 1719 阅读 · 0 评论 -
vue实现工作计划demo
文本框中输入计划点击添加,增加内容到正在进行,正在进行中check后移动至已完成,已完成的工作可以返回正在进行。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...原创 2020-03-28 23:30:26 · 573 阅读 · 0 评论 -
用vue仿淘宝商品筛选
css略,点击牛仔裤添加到已选条件,点击x取消选择<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2020-03-28 20:51:39 · 2534 阅读 · 2 评论