Vue组件-极简的地址选择器

liuhh 发布于2019-08-05 14:01 / 3016人阅读

摘要：一前言本文用完成一个极简的地点选择器，我们接下来带大家实现这个。当然其中也有一些值得学习与注意的地方。但是这其实也有无法监控的数据。

一、前言

本文用Vue完成一个极简的地点选择器，我们接下来带大家实现这个。当然其中也有一些值得学习与注意的地方。话不多说，我们先上demo图。因为每个人的需要不一样，我这边就不在实现更多的功能，所以留有更大的空间供大家增删改。

GitHub地址：Vue-location_Select

二、需要学习的地方 （1）数据更新Vue无法监控

首先要说一下的就是这个点，我们在Vue中有个好处就是可以不用操作dom，直接操作数据。但是这其实也有Vue无法监控的数据。如数组和对象。当然这里只是指一小部分操作而已，大部分操作都是没毛病的。接下来说说哪些数据操作Vue无法监控

1、数组

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如：vm.items.length = newLength

意思就是下面的情况都不能监控到，因此这样改变数组是不会刷新视图的

var vm = new Vue({
  data: {
    items: ["a", "b", "c"]
  }
})
vm.items[1] = "x" // 不是响应性的,
vm.items.length = 2 // 不是响应性的

实际上要解决这两者的方法也简单:

//解决第一类问题

vm.$set(vm.items, indexOfItem, newValue)

//为了解决第二类问题，你可以使用 splice：

vm.items.splice(newLength)

这样就可以使得Vue监控到数组操作的变化。当然还有以下的操作Vue也可以监控到的

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

2.对象

由于 JavaScript 的限制，Vue不能检测对象属性的添加或删除！ 这个是重点，如果动态的添加对象属性的话，那么请注意你添加对象属性的方式是否为$set，不然的话视图很有可能不更新。

var vm = new Vue({
  data: {
    userProfile: {
      name: "Anika"
    }
  }
})

vm.userProfile.age = 27;    //看着没问题，实际上Vue无法监控

因此解决办法也是老办法，用
vm.$set(vm.userProfile, "age", 27);

使用Object.assign()添加多个属性也要注意一下用法

//错误
Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: "Vue Green"
})

//正确
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: "Vue Green"
})

（2）V-for的用法 1.遍历数组

这里直接撸码，一看就懂

v-for = "(val,index) in arr" 
//得到的就是值和数组下标

//习惯性用法

2.遍历对象

v-for = "(val,key,index) in object" 
//得到的就是键值对还有下标

//习惯性用法

CSS3样式

当然这里就不多说了。这个直接给出传送门：css3用scale实现下划线动画

实现极简地点选择

这里就放主要的代码吧，虽然总代码也不多

html部分

methods:{
    getData(){
        let xhr = new XMLHttpRequest();                     //原生ajax
        xhr.open("get","http://127.0.0.1:3001/read");       //请求mock
        xhr.send();
        xhr.onreadystatechange = ()=> {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let locationN = JSON.parse(xhr.responseText);       //获取数据，地点json
                for (let key of Object.keys(locationN)) {           //遍历取出数据，取得键值
                    for(let key2 of Object.keys(this.locationName)){        //遍历data中locationName，为了分类
                        let pattern = new RegExp("["+key2.toString()+"]");      
                        if(pattern.test(key)){                              //正则匹配，如果找到就进入对应的分类对象中
                            
                            //判断该类中是否存在该字母这地名集合，如A，B，C
                            if (Array.isArray(this.locationName[key2][key.charAt(0)])) {
                                //如果存在则直接推入地名
                                this.locationName[key2][key.charAt(0)].push(locationN[key]);
                                
                                //没有则先创建再推入地名
                            } else {
                                this.$set(this.locationName[key2],key.charAt(0),[]);
                                this.locationName[key2][key.charAt(0)].push(locationN[key]);
                            }
                            break;
                        }
                    }
                }
            }
        }
    },
}

后话

到这里，我们就已经实现了该Vue组件，如果想细看代码或者使用的话，请点击Vue-location_Select，当然如果喜欢就不要吝啬你的star哦！

服务器托管混合云 js做地址选择器 vue组件 vue组件开发 vue父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/57734.html

Vue组件-极简的地址选择器

摘要：一前言本文用完成一个极简的地点选择器，我们接下来带大家实现这个。当然其中也有一些值得学习与注意的地方。但是这其实也有无法监控的数据。一、前言本文用Vue完成一个极简的地点选择器，我们接下来带大家实现这个。当然其中也有一些值得学习与注意的地方。话不多说，我们先上demo图。因为每个人的需要不一样，我这边就不在实现更多的功能，所以留有更大的空间供大家增删改。 showImg(https...

blastz 2019-08-29 15:32 评论0 收藏0
Vue组件-极简的地址选择器

摘要：一前言本文用完成一个极简的地点选择器，我们接下来带大家实现这个。当然其中也有一些值得学习与注意的地方。但是这其实也有无法监控的数据。一、前言本文用Vue完成一个极简的地点选择器，我们接下来带大家实现这个。当然其中也有一些值得学习与注意的地方。话不多说，我们先上demo图。因为每个人的需要不一样，我这边就不在实现更多的功能，所以留有更大的空间供大家增删改。 showImg(https...

shixinzhang 2019-08-26 11:54 评论0 收藏0
手摸手，带你封装一个vue component

摘要：灵活性和针对性。所以我觉得大部分组件还是自己封装来的更为方便和灵活一些。动手开干接下来我们一起手摸手教改造包装一个插件，只要几分钟就可以封装一个专属于你的。项目地址：vue-countTo配套完整后台demo地址：vue-element-admin系类文章一：手摸手，带你用vue撸后台系列一（基础篇）系类文章二：手摸手，带你用vue撸后台系列二（登录权限篇）系类文章三：手摸手，带...

pkhope 2019-08-20 15:48 评论0 收藏0
项目开发

摘要：前端菜鸟项目，大佬们轻喷美团外卖项目演示地址第期分享推荐上好玩容易上手的项目，帮你找到编程的乐趣。包含支持冒泡的事件框架资源模块等组件，按需选择组件，不绑架开发者。基于 Vue 的 WebSocket 实时聊天实战项目一个基于vue的，从前端到后端构建的项目。能让学到如何用，用到了vue全家桶，nodejs，通过webpack打包，图灵机器人，websocket等前沿知识进行构建。...

elva 2019-08-05 12:53 评论0 收藏0
2015年开源前端框架盘点TOP20

摘要：核心概念原则响应式浏览器支持预处理器响应式模块化官网地址地址名称类别语言创建者云适配最后更新时间年月人气在上有描述国内首个开源跨屏前端框架，中文排版支持更优本土化组件丰富。 2015年已经过去了，作为一个前端开发者，我觉得有必要把过去一年帮助过我或朋友们的优秀开源前端框架做个盘点，希望这些项目能够越来越好，帮助到更多的前端开发者们。此榜单根据github上star数作为排名依据，一个人...

silenceboy 2019-08-19 17:21 评论0 收藏0