2024年Web前端最全基于elementUI的一个使用v-model实现的经纬度输入的vue组件(1)，腾讯3轮面试都问了前端事件分发

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 绑定一个 [12.34,-45.67] (东经西经，南纬北纬 正负表示) 形式的经纬度数组，能够按度分秒进行编辑，效果如下所示，点击东经，北纬可切换。
• 经纬度的 度转度分秒
• 能够获取度分秒格式数据

Coordinates组件实现

• 模板

一个span显示东经西经，三个输入框输入度分秒

<template>
  <div class="coordinates">
    <!-- 经度 -->
    <div class="item">
      <span class="itude"
            @click="itudeChange(true)">{
   { longFlag | longitudeName }}</span>
      <el-input v-model="longitude[0]"
                @change="change(true,0)"
                size="mini">
        <i slot="suffix">°</i>
      </el-input>
      <el-input v-modelumber="longitude[1]"
                @change="change(true,1)"
                size="mini">
        <i slot="suffix">′</i>
      </el-input>
      <el-input v-model="longitude[2]"
                @change="change(true,2)"
                size="mini">
        <i slot="suffix">″</i>
      </el-input>
    </div>
    <!-- 纬度 -->
    <div class="item">
      <span class="itude"
            @click="itudeChange(false)">{
   { latFlag | latitudeName }}</span>
      <el-input v-model="latitude[0]"
                @change="change(false,0)"
                size="mini">
        <i slot="suffix">°</i>
      </el-input>
      <el-input v-model="latitude[1]"


### 文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。



个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

![](https://img-blog.csdnimg.cn/img_convert/3e0d5b0f6a97b823cc1ef22ff1a18191.png)



第二阶段:移动端开发技术

![](https://img-blog.csdnimg.cn/img_convert/fc21db0a800494796dc6408ce1486031.png)

第三阶段:前端常用框架

![](https://img-blog.csdnimg.cn/img_convert/644efd4ddd0f8d43535f1982ec0da6e4.png)



**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/topics/618166371)**

*   推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

*   大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。



可以帮助快速解决问题；

*   大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。