简介

VUE 官方文档观看进度
vue实例

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

请确认了解不同构建版本并在你发布的站点中使用生产环境版本，把 vue.js 换成 vue.min.js。这是一个更小的构建，可以带来比开发环境下更快的速度体验。

unpkg

https://unpkg.com/vue/dist/vue.js

NPM

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

# 最新稳定版
$ npm install vue

介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

本地应用

Vue指令

网络应用

axios 网络请求库

axios+vue 集合vue一起

axios

导包

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

天气案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.wrap {position: fixed;left: 0;top: 0;width: 100%;height: 100%;background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2019-12-31%2F5e0ac45db698f.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623081831&t=1b8c3d0748795e47323dd6cc38c0b36e);}.search {width: 640px;margin: 100px auto 0;}.logo img {display: block;margin: 0 auto;}.form_group {width: 640px;height: 40px;margin-top: 45px;}.input_txt {width: 538px;height: 38px;padding: 0px;float: left;border: 1px solid #41a1cb;outline: none;text-indent: 10px;}.input_sub {width: 100px;height: 40px;border: 0px;float: left;background-color: #41a1cb;color: #fff;font-size: 16px;outline: none;cursor: pointer;}.hotkey {margin: 3px 0 0 2px;}.hotkey a {text-decoration: none;font-size: 14px;color: #666;padding-right: 15px;}.weather_list{height: 200px;text-align: center;margin-top: 50px;font-size: 0px;overflow: hidden;position: relative;}.weather_list li {display: inline-block;width: 140px;height: 200px;padding: 0 10px;}.info_date {width: 100%;height: 40px;line-height: 40px;color: #999;font-size: 14px;left: 0px;bottom: 0px;margin-top: 15px;}.info_type span {color: #fda252;font-size: 30px;line-height: 80px;}.info_temp {font-size: 14px;color: #fda252;}.info_temp b {font-size: 13px;}.tem .iconfont {font-size: 50px;}</style>
</head><body><div class="wrap" id="app"><div class="search"><div class="logo"><img src="http://i0.hdslb.com/bfs/feed-admin/10641bbc5189591221c00958f3458f33798c7caa.png"alt=""></div><div class="form_group"><input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的天气"autofocus="autofocus"><button class="input_sub">搜索</button></div><div class="hotkey"><a href="javascript:;" @click="changecity('北京')">北京</a><a href="javascript:;" @click="changecity('上海')">上海</a><a href="javascript:;" @click="changecity('广州')">广州</a><a href="javascript:;" @click="changecity('武汉')">武汉</a></div></div><ul class="weather_list"><li v-for="item in weatherList"><div class="info_type"><span class="iconfont">{{item.type}}</span></div><div class="info_temp"><b>{{item.low}}</b>~<b>{{item.high}}</b></div><div class="info_date"><span>{{item.date}}</span></div></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>var app = new Vue({el: "#app",data: {city: '',weatherList: []},methods: {searchWeather: function () {// console.log('天气查询');// console.log(this.city);var that = this;axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+ this.city).then(function (response) {console.log(response.data.data.forecast);that.weatherList = response.data.data.forecast}).catch(function (err) { })},changecity:function(city){this.city = city;this.searchWeather();}}})</script>
</body></html>

音乐播放器

歌曲搜索
歌曲播放

vue开发的音乐小播放器相关推荐

html在线音频播放器实训总结,HTML5音乐列表播放器SMusic开发总结
前段时间写过一篇介绍简单音乐播放器效果开发的博文<为你的博客添加简单的CSS3音乐播放器>,实现了单曲循环播放效果,这个效果也是我的博客首页一直有的效果,同时文中也介绍了一些简单的HTML ...
基于机器学习的自动音乐生成播放器
目录详细设计说明书 1 1 引言 1 1.1 编写目的 1 1.2 背景 1 2. 此项目的任务提出者:西电软件工程课程组.西电软件开发小组 1 1.3 定义 2 1.4 参考资料 2 3 程序描述 ...
解决Chrome浏览器打开虾米音乐网页播放器时的排版问题
2019独角兽企业重金招聘Python工程师标准>>> 几年了,虾米音乐网页播放器听音乐都有个纠结的地方,就是用Chrome浏览器打开时,排版会出错,表现为播放器右边一部分显示不出来 ...
直播平台软件开发中选择点播播放器哪家强？
直播平台软件开发中选择点播播放器哪家强? 太长不看版这里选择了开源播放器IjkPlayer和直播云厂商播放器PLDroidPlayer作为测试样本. 数据统计软硬编码 IjkPlayer PLDr ...
游戏战歌网仿soso音乐 flex播放器
游戏战歌网仿soso音乐 flex播放器 2010年08月11日游戏战歌网仿soso音乐 flex播放器经过2个月的努力,游戏战歌网flex播放器开发完成... 主要是仿soso功能...当然 ...
[vue] 使用vue开发一个todo小应用，谈下你的思路
[vue] 使用vue开发一个todo小应用,谈下你的思路结构: 输入部分( input )和输出部分( ul ) 逻辑:用户输入之后,通过事件触发拿到用户输入的数据存起来, 将用户数据集合通过 v ...
android第三方开源音频播放器,Android第三方开源SeekBarCompat：音乐类播放器等APP进度条常用...
Android第三方开源SeekBarCompat:音乐类播放器等APP进度条常用 Android平台原生的SeekBar设计简单,然而,比如现在流行的一些音乐播放器的播放进度控制条,如果直接使 ...
【Python】音乐可视化播放器（PyQt5 + matplotlib.animation）
前言最近同学有个作业,做音乐可视化播放器,为了学习PyQt,我就尝试做了做.该设计主要分为音乐播放器和可视化两部分.两部分单独做相对于结合在一起容易很多,结合的过程遇到了很多麻烦. 音乐播放器: 采 ...
网易云音乐——歌曲播放器页面
网易云音乐--歌曲播放器页面 git地址 https://gitee.com/chen-haibin799/netease-cloud-music.git 实现步骤效果图 1.实现顶部导航栏这个写 ...

vue开发的音乐小播放器

文章目录

简介

NPM

介绍