vue开发的音乐小播放器

最新推荐文章于 2024-03-12 21:48:20 发布

樂笒

最新推荐文章于 2024-03-12 21:48:20 发布

阅读量772

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_49413017/article/details/124625947

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

简介
NPM
介绍
本地应用
- Vue指令

简介

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>