首先看一下项目的预览图

PC浏览器

音乐播放器切歌功能的实现

html部分：

<audio src="" autoplay="true"></audio>

我准备了5首歌，当歌曲放完时要自动切换到下一首，这就要靠JS实现了：

var oPlayer = document.getElementsByTagName('audio')[0];
oPlayer.src = "music/"+ Math.ceil(Math.random()*5) +".mp3";
oPlayer.addEventListener('timeupdate', function() {if (oPlayer.currentTime === oPlayer.duration ) {oPlayer.src = "music/"+ Math.ceil(Math.random()*5) +".mp3";}
});

绑定一个事件监听函数来实现一首歌曲播放完毕自动切换到下一首，当然也可以利用这个函数写一个播放进度。

DIV居中

给父元素设置相对定位，就可以这样写子元素的样式来使其居中：

  .content {width: 800px;height: 600px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}

手机orPC？

我的意图是尽可能使用PC访问，但是也允许点击“仍然要试试？”在手机端使用。这里就涉及到浏览器的判断，用jQurey就可以实现：

$(document).ready(function () {$('.nopc').hide();//pc判断if(navigator.userAgent.match(/mobile/i)) {$('.nopc').show(200);$('.expla').hide(200);$('#btn').hide(200);}//手机端访问$('#mobileBtn').click(function () {$('.nopc').hide(600);$('.expla').show(800);$('#btn').show(1000);});
});

限于水平，目前想不到更好的写法。

Vue部分

Vue提供一个更通用的方法通过watch选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。
以上摘自Vue文档

HTML结构：

  <section  id="app"><input type="text" value="" placeholder="亲，请输入身份证号" ref="inputInfo"v-model="information"><button v-on:click="getInfo">查询</button><p v-if="seen2">{{ tip }}</p><div class="info" v-if="seen"><p>姓名：<span>{{ name }}</span></p><p>年龄：<span>{{ age }}</span></p><p>性别：<span>{{ sex }}</span></p><p>生日：<span>{{ birthday }}</span></p><p>地址：<span>{{ address }}</span></p></div></section>

JS部分：

var vm = new Vue({el: '#app',data: {information: '',name: null,age: null,birthday: null,tip: null,seen: false,        seen2: false},// 如果 information 发生改变，这个函数就会运行watch: {information: function (newInfo) {//显示tipthis.seen2 = truethis.tip = "请输入18位身份证号"}},methods: {getInfo: function () {var value = this.$refs.inputInfo.valueif (value.length !== 18) {this.tip = "身份证号应为18位"} else {var url = 'https://route.showapi.com/25-3?id='+value+'&showapi_appid=32653&showapi_sign=d04acc7ae0d741249112a1227a045e3b'//接下来就是请求数据了，记得要在此之前引入vue-resource.jsthis.$http.get(url).then(function(res) {var data = res.body.showapi_res_body.retDatathis.age = new Date().getFullYear() - value.substr(6,4)this.birthday = data.birthdaythis.address= data.addressif (data.sex === 'M') {this.name = '单身' + this.age + '年的单身狗'this.sex = '男'} else {this.name = '萌萌哒的小仙女'this.sex = '女'}//关闭tip，显示结果this.seen2 = falsethis.seen = true})}}}
});

结束语

到此为止，核心的部分就总结完了。最后安利一下：Vue比Angular好上手多了！点击下方地址就可以看这次的demo哦。
点我点我

查看源码

Vue开发小实践--身份查询系统相关推荐

Vue.js 2.5 发布，而这个会玩的团队已经自研出用 Vue 开发小程序的框架了
在尤大微博铺垫着"将会引入一些关于 TypeScript 的改进"一周之后,代号为 Level E 的 Vue.js 2.5 带着日漫风来到了我们眼前.从 Release Note ...
FinClip黑板报：3分钟了解Vue开发小程序的技术原理
Vue. React 和 Angular 是当前应用最广的三大前端框架,仅从 GitHub 趋势来看,Vue 更是排在了第一位,目前已经达到了 17 万的 Star. 目前,不管是 BAT 大厂,还是 ...
3分钟了解Vue开发小程序的技术原理
Vue. React 和 Angular 是当前应用最广的三大前端框架,仅从 GitHub 趋势来看,Vue 更是排在了第一位,目前已经达到了 17 万的 Star. 目前,不管是 BAT 大厂,还是 ...
用Vue开发小程序的框架
在尤大微博铺垫着"将会引入一些关于 TypeScript 的改进"一周之后,代号为 Level E 的 Vue.js 2.5 带着日漫风来到了我们眼前.从 Release Note ...
浅入了解Vue开发小程序的技术原理
Vue. React 和 Angular 是当前应用最广的三大前端框架,仅从 GitHub 趋势来看,Vue 更是排在了第一位,目前已经达到了 17 万的 Star. 目前,不管是 BAT 大厂,还是 ...
2018年江苏省计算机小高考,江苏2018年小高考成绩查询系统网站入口：江苏省教育考试院...
[导语]无忧考网从江苏省教育考试院获悉,江苏2018年小高考成绩查询系统网站入口将于4月9日上午正式开通! 江苏省教育考试院关于发布江苏省2018年普通高中学业水平测试必修科目考试成绩的通告江苏省2 ...
一些Vue开发小技巧，让你开发更便捷
Vue是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用.Vue的核心库只关注视图层,方便与第三方库或既有项目整合. 下面我们来看一些v ...
基于springboot+vue的疾病匿名检测查询系统
基于springboot+vue的疾病匿名检测查询系统 ✌全网粉丝20W+,csdn特邀作者.博客专家.CSDN新星计划导师.java领域优质创作者,博客之星.掘金/华为云/阿里云/InfoQ等平台优 ...
一个基于.Net+Vue开发的开源权限工作流系统
今天给大家推荐一个开源权限工作流系统,一个快速开发框架. 项目简介这是一个基于.Net 5开发的权限管理.工作流系统框架.借鉴了Martin Fowler企业级应用开发思想,框架选项都是使用最新的技 ...

Vue开发小实践--身份查询系统