![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 68
小球学前端
没有什么是不可能的,努力吧!
展开
-
【前端小点】Vue3中的IP输入框组件
使用vue3写ip输入框组件原创 2024-01-23 16:18:32 · 1051 阅读 · 0 评论 -
【mars3d】Vue3项目集成mard3d实现gis空间地理系统
vue3项目集成mars3d框架原创 2023-06-21 14:54:05 · 2201 阅读 · 0 评论 -
【mars3d】基于vue3的marsgis通用UI库 mars-ui 的使用
一名脑残程序员的mars-ui心酸使用记录。通过mars3d的官网我们可以看到,有配套的UI库使用,那么我们如何使用到自己的项目中呢,跟着文章一步一步来吧!1、引入UI库① 安装ant-design-vuecnpm install ant-design-vue --save② 下载基于vue开发的mars3d的源码,直通车: git clone https://gitee.com/marsgis/mars3d-vue-project.git,如下图所示,将src/components/mar原创 2023-06-28 10:43:26 · 2462 阅读 · 2 评论 -
【前端小点】Generator异步方案与Async/Await
Generator,Async/Await原创 2023-03-27 11:51:20 · 325 阅读 · 0 评论 -
【前端小技能】一个项目中,不同页面使用不同的favicon.ico
如何在一个项目中,使用多个ico文件,根据页面动态修改ico文件原创 2023-01-31 11:21:22 · 476 阅读 · 0 评论 -
【前端小技能】Vue集成百度离线地图
vue项目开发在内网中使用百度离线地图,原创 2022-10-12 11:41:07 · 11334 阅读 · 49 评论 -
大前端基础【4-6笔记】Vue3基础
Vue3基础,setUp语法糖,ref、reactive、readonly,shallowReadonly响应式数据设置,侦听器,计算属性详解原创 2022-10-08 14:48:10 · 350 阅读 · 0 评论 -
【websocket】Node+Vue2+WebSocket实现前后端通讯
WebSocket是一个长连接,客户端可以给服务端发送消息,服务端也可以给客户端发送消息,全双工通信原创 2022-09-28 09:58:48 · 2135 阅读 · 1 评论 -
【Snabbdom】虚拟DOM-Snabbdom
Snabbdom,虚拟DOM原创 2022-07-04 17:46:51 · 305 阅读 · 0 评论 -
《前端小技能》-- vue中使用谷歌地图绘制一个或多个点(开箱即用)
如何在谷歌地图上添加点坐标,并动态设置图标样式,如何实现谷歌地图上的多点聚合,如何在页面中动态引入谷歌js原创 2021-12-08 18:28:41 · 2414 阅读 · 6 评论 -
【vue项目问题解决】如何用鼠标滚轮控制元素缩放?
记录在项目开发过程中遇到的问题,积累开发经验,欢迎大家一起留言探讨一个元素(例如div),如何通过鼠标滚轮来控制他的缩放呢,很显然,我们需要为元素绑定监听事件,在vue中如何实现这种效果呢?模板代码:<template> <div class="body" id="body"> <div class="content" id="content"> 我是缩放的元素 </div> </div></tem.原创 2021-11-25 17:46:00 · 2318 阅读 · 1 评论 -
【vue项目问题解决】如何做到webpack打包vue项目后,可以修改配置文件IP和端口
记录在项目开发过程中遇到的小问题,积累开发经验,欢迎大家一起留言探讨问题我们在vue项目中打包的时候,webpack会将我们的组件,html,js,css,jpg等其他文件进行打包,其中请求的ip和端口也是在开发过程中写好的,直接打包生成了相应的js,如果此时我们想要修改请求的IP和端口,需要修改打包后的文件,不好查找,并且也容易出错。期望效果打包之后,可以通过修改某个配置文件,进行ip和端口的配置代码实现1、public文件夹下创建config.js,将apiURL添加到window对象中.原创 2021-10-15 16:41:03 · 2299 阅读 · 3 评论 -
【vue项目问题解决】echarts,使用中提示undefined问题及重绘问题
记录在项目开发过程中遇到的小问题,欢迎大家一起留言探讨1、问题 :引入echars,使用中提示undefined问题问题描述cnpm安装了echars,在main.js中全局引入,之后提示echarsundefined期望效果可以在组件中直接通过this.$echarts使用正确引入方式局部引入,组件中直接引入 import echarts from "echarts";安装cnpm install echars -S引入// 引入echartsimport echarts fr.原创 2021-10-15 12:18:34 · 7160 阅读 · 2 评论 -
【vue项目问题解决】跳转新路由,滚动距离不变问题
记录在项目开发过程中遇到的小问题,欢迎大家一起留言探讨问题在一个页面中改变scrollTop,再跳转新路由的时候,发现这个滚动距离依旧在预期结果在一个页面中改变scrollTop,再跳转新路由的时候,滚动距离变为0编码实现在App.vue中监听路由变化export default { watch: { $route() { // 路由变化的时候,让滚动数据变为0 document.body.scrollTop = 0 document.doc.原创 2021-10-15 11:56:34 · 238 阅读 · 0 评论 -
大前端基础【4-2笔记】Vue Router详解
Vue RouterVue Router是vue.js官方提供的一个插件,用来快速实现单页应用.1、单页应用SPA(Single Page Application)单页面应用程序,简称单页应用.指的是网站中"所有"功能都在单个页面中进行呈现.例如:后台管理系统\移动端\小程序等.优点前后端分离开发,提高了开发效率业务场景切换时,局部更新结构用户体验好,更加接近本地应用.缺点不利于SEO初次首屏加载速度比较慢页面复杂度比较高2、前端路由前端路由,值得是URL有内容间的映射关系原创 2021-06-23 11:13:00 · 164 阅读 · 1 评论 -
大前端基础【4-2笔记】Vue.js组件
Vue.js组件组件用于封装页面的部分功能,将功能的结构、样式、逻辑代码封装成整体.1、组件基础本质上,组件是可复用的Vue实例,所以它们可与new Vue接收相同的选项,例如data,methods以及生命周期钩子.仅有的例外是没有像el这样根实例特有的选项,1.1 命名规则kebab-case:‘my-components’PascalCase: ‘MyComponents’注意:无论采用哪种命名方式,在DOM中都只能有kebab-case可以使用.<div id="app"&原创 2021-06-21 16:48:08 · 140 阅读 · 0 评论 -
大前端基础【4-1笔记】Vue进阶语法
内容来源:拉勾教育"前端就业集训营"二期1、自定义指令1.1 全局指令指的是被任意vue实例和组件使用的指令,语法如下,例子是定义了一个focus的指令,注意,使用的时候需要添加v-:<div id="app"> <input type="text" v-focus></div> Vue.directive("focus", { inserted(el){ console.log(el); el.focus(); }}).原创 2021-05-20 10:27:50 · 101 阅读 · 0 评论 -
vue-elementui-admin 动态路由渲染
vue-elementui-admin 动态路由渲染在官网下载vue-elementui-admin,进行二次开发,实现动态路由渲染,用户登录后,通过接口从服务端获取权限列表,然后渲染到侧边栏。注意:此次二次开发未涉及角色(role)删选,需要角色删选权限的可以绕行1、router.js(@/router/router.js)定义constantRouterMap:放置所有权限都需要的路由表,例如登录页等。// router.jsimport Router from 'vue-router';原创 2021-05-12 16:24:03 · 3360 阅读 · 1 评论 -
大前端基础【4-1笔记】事件和表单处理
事件与表单处理1、事件处理v-onv-on指令用于进行元素的事件绑定,例如:点击按钮会更新p标签内部的值,简写方式@click<div id="app"> <p>{{content}}</p> <button v-on:click="content='新内容'">123</button> <button @click="content='新内容'">123</button></div>v原创 2021-04-25 10:58:12 · 133 阅读 · 0 评论 -
大前端基础【4-1笔记】Vue基础指令
传统网页开发步骤请求数据------->根据数据生成网页结构------->监听用户操作,变化元素变化------->发送服务器请求------->更新结构(用户点击新增,删除等)传统网页开发缺点DOM操作频繁,代码繁杂。DOM操作与逻辑代码混合,可维护性差不同功能区域书写在一起,可维护性低模块之间的依赖关系复杂Vue.js简介解决上述问题,渐进式JavaScript框架,官方网站:https://cn.vuejs.org/1、Vue.js核心特性1、数据驱原创 2021-04-21 11:26:51 · 128 阅读 · 0 评论 -
大前端基础~flex基础及布局
flex布局传统布局:兼容性号布局繁琐局限性,不能在移动端很好的布局flex布局:操作简单,布局极为简单PC端浏览器支持情况较差IE11或更低版本不支持如何选择:1、如果是PC端页面布局,选择传统布局2、移动端或者是不考虑兼容性问题的PC端网页布局,考虑使用flex布局1、flex布局原理1、flex是flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。2、当我们为父盒子设置flex布局以后,子元素的fl原创 2021-01-08 10:26:50 · 288 阅读 · 0 评论 -
大前端基础~rem及媒体查询
rem布局em:相对单位,参考的是父级元素的字号大小的倍数,如果是2em表示是字号的2倍rem:相对单位,参考的是根元素html的字号大小的倍数,如果是2rem表示是html元素字号的2倍rem优势:参考元素是html,一个页面中只有一个html元素,可以实现整体控制。1、媒体查询(Media Query):使用@media查询,可以针对不同的媒体类型定义不同的样式@media可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面1.1原创 2021-01-08 10:25:06 · 458 阅读 · 0 评论 -
大前端基础~移动开发基础
移动开发基础注意移动端浏览器我们主要对webkit进行兼容我们现在开发的移动端主要针对手机端开发现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一学会用谷歌浏览器模拟手机界面以及调试1、视口视口就是浏览器显示页面内容的屏幕区域视口分为布局视口、视觉视口、理想视口移动端布局想要的是理想视口就是手机屏幕有多宽,我们的布局视口就有多宽想要理想视口,我们需要给我们额移动页面添加<meta>标签标准的viewport参数设置视口宽度和设备保持一致视口默认缩放比例为0不原创 2021-01-08 10:22:10 · 161 阅读 · 0 评论 -
大前端~Nuxt.js基础
NuxtJS基础一、介绍官网:https://nuxtjs.org/Nuxt.js是基于Vue.js生态的第三方开源服务器渲染框架,帮我们轻松的使用vue.js技术栈构建同构应用,主要关注的UI页面渲染二、基础路由地址:https://zh.nuxtjs.org/guide/routingNuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。假设 pages 的目录结构如下:pages/--| user/-----| index.vue-----|原创 2020-10-28 23:14:41 · 296 阅读 · 1 评论 -
大前端~vue组件间通信方式
组件间通信方式父组件给子组件传值子组件给父组件传值不相关组件传值1、父组件给子组件传值//父组件<template> <div id='app'> <child title="我是父组件传递的title"/> </div></template><script>import child from './child'export default { components: { c原创 2020-09-20 13:57:00 · 178 阅读 · 0 评论 -
大前端~令人头大的this问题总结
this问题举例总结1、首先this指向谁,跟如何定义没关系,而是指向他的调用者,例如下边的例子,this指向谁?答案是:不确定,因为不知道调用者是谁。function foo(){ console.log(this)}foo() //全局作用域(因为运行环境不一样,所以不可单纯理解为windows,而是指向全局对象)use strictfoo() // undefined 严格模式下,指向undefined2、对于下述代码,this的指向const obj1 = { fo原创 2020-09-12 12:08:05 · 177 阅读 · 0 评论 -
大前端【3-2】Vue模板编译的过程
模板编译的主要目的是将模板template转化为渲染函数render抽象语法树:AST,使用对象的形式描述树形的代码结构模板编译是将模板字符串首先转化为AST对象,然后优化AST对象,优化的过程是在标记静态根节点,然后吧优化号的AST对象转化为字符串形式的代码,最终把字符串形式代码通过newFunction转化为匿名函数,这个匿名函数就是最终生成的函数render函数,模板编译就是啊模板字符串转化为渲染函数。入口函数,compileToFunctions(template.....)1、check原创 2020-09-09 23:39:52 · 484 阅读 · 0 评论 -
大前端【3-2】Vue响应式原理简述
数据响应式是指,当数据发生变化自动更新视图,不需要手动操作dom,第一步、入口,initState()vm状态的初始化,整个响应式是从init方法中开始的,在init方法中,调用initState方法初始化状态,在initState方法中调用initData(),将data属性注入到vue实例上,并且调用observe()将其转化为响应式对象,observe是响应式的入口第二步、observe(value)位于src/core/observer/index.js,首先判断value是否是对象,如果不原创 2020-09-09 23:39:04 · 369 阅读 · 0 评论 -
大前端【3-2】简述Vue首次渲染过程
第一步、Vue初始化,实例成员、静态成员首先进行vue的初始化,即初始化实例成员及静态成员.第二步、new Vue()初始化结束以后,调用vue的构造函数new Vue(),在构造函数中调用this._init()方法第三步、this.init()this.init()相当于整个项目的入口,在这个方法中,最终调用vm.$mount()第四步、vm.$mount()这个$mount()是src/platform/web/entry-runtime-with-compiler.js中定义的,核心作原创 2020-09-09 23:38:10 · 689 阅读 · 0 评论 -
大前端【3-1-3笔记】Virtual DOM 的实现原理
Virtual DOM 的实现原理了解什么是虚拟DOM以及虚拟DOM的作用Snabbdom的基本使用Snabbdom的源码解析一、虚拟DOM1、什么是虚拟DOMVirtual DOM (虚拟DOM),是由普通的JS对象来描述DOM对象,因为不是真实的DOM对象,所以叫虚拟DOM2、为什么使用虚拟DOM手动操作 DOM 比较麻烦,还需要考虑浏览器兼容性问题,虽然有 jQuery 等库简化 DOM 操作,但是随着项目的复杂 DOM 操作复杂提升为了简化 DOM 的复杂操作于是出现了各种原创 2020-08-18 22:54:37 · 238 阅读 · 0 评论 -
大前端【3-1-2笔记】响应式原理
一、回顾1、数据响应式数据模型仅仅是普通的JavaScript对象,当我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率2、双向绑定数据改变,视图改变;视图改变,数据改变;可以使用v-model在表单元素上创建双向数据绑定3、数据驱动数据驱动是vue最独特的特性之一,开发过程中只需要关注数据本身,不需要关心数据如何渲染到视图。二、响应式原理当我们吧一个普通的JS对象传入vue实例作为data选项,vue将遍历此对象所有的属性,并使用Object.defineProp原创 2020-08-18 22:53:06 · 254 阅读 · 0 评论 -
大前端【3-1-1笔记】手写Vue Router
1、Hash模式与History模式二者的存在表现形式和原理上的区别1、表现形式的区别Hash:https://api.aibianxian.net/igameh5/#/detail/213?token=123,链接中带有#号History: https://api.aibianxian.net/igameh5/detail/213/1232、原理区别Hash:基于锚点,以及onHashChange事件,通过锚点的值作为路由地址,当地址发生变化后,触发onHashChange事件,然后根据路径决原创 2020-08-02 16:01:05 · 282 阅读 · 0 评论