Vue案例

一、计数器

在这里插入图片描述

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>计数器</title>
</head>

<body>
    <div id="app">
        <button @click="sub">-</button>
        <span>{{ num }}</span>
        <button @click="add">+</button>
    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                add:function(){
                    if(this.num<10){
                        this.num++
                    }
                    else{
                        alert("别点啦,最大值!")
                    }
                },
                sub:function(){
                    if(this.num>0){
                        this.num--
                    }
                    else{
                        alert("别点啦,到底啦!")
                    }
                }
            },
        })
    </script>
</body>
</html>

二、图片切换

在这里插入图片描述

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>V-show</title>
</head>

<body>
    <div id="mask">
        <h2>乐山师范学院</h2>
        <img width="1000" :src="imgArr[index]">
        <br>
        <br>
        <input type="button" value="上一张" @click="prev" v-show="index>0"> 
        <input type="button" value="下一张" @click="next" v-show="index<imgArr.length-1">
    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#mask",
            data: {
                imgArr: [
                    "./image/ls-1.jpg",
                    "./image/ls-2.jpg",
                    "./image/ls-3.jpg",
                    "./image/ls-4.jpg",
                    "./image/ls-5.jpg",
                    "./image/ls-6.jpg",
                    "./image/ls-7.jpg"
                ],
                index: 0,
                previsShow: false
            },
            methods: {
                prev:function(){
                    this.index--
                },
                next:function(){
                    this.index++
                }
            }
        })
    </script>
</body>
</html>

三、小红记事本

在这里插入图片描述

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>小红记事本</title>
    <style>
        ul,li{
            list-style-type: none;
        }
    </style>
</head>

<body>
    <div id="note">
        <h2>欢迎使用小红记事本</h2>
        <input type="text" v-model="inputValue" @keyup.enter="add">
        <ul v-for="iterm,index in list">
            <li>{{ index+1 }}. {{ iterm }}   <input type="button" value="delete" @click="del(index)"></li>
        </ul>
        <br>
        <span v-show="list.length > 0"><i>{{ list.length }} 项事宜未完成!</i><input type="button" value="clear" @click="clear"></span>
    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#note",
            data: {
                list: [
                    "吃饭",
                    "睡觉",
                    "打豆豆"
                ],
                inputValue: "请输入后按回撤..."
            },
            methods: {
                add:function(){
                    this.list.push(this.inputValue);
                },
                del:function(index){
                    this.list.splice(index,1);
                },
                clear:function(){
                    this.list = [];
                }
            }
        })
    </script>
</body>
</html>

四、天气早知道

在这里插入图片描述

main.js

/*
    接口:http://wthrcdn.etouch.cn/weather_mini
    方法:get
    参数:city(城市)
    返回:该城市一周的天气状况
*/

var app = new Vue({
    el: "#app",
    data: {
        city: "深圳",
        weatherList: []
    },
    methods: {
        searchWeather:function(){
            var that = this;
            console.log(this.city);
            url = "http://wthrcdn.etouch.cn/weather_mini?city=" + this.city;
            axios.get(url).then(function(response){
                that.weatherList = response.data.data.forecast;
                console.log(that.weatherList)
            }, function(err){
                console.log(err)
            })
        },
        changeCity:function(city){
            this.city = city;
            this.searchWeather();
        }
    }
})

index.html

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>天气早知道</title>
</head>

<body>
    <div id="app">
        <h2>天气早知道</h2>
        <input type="text" value="请输入城市名称" v-model="city" @keyup.enter="searchWeather"> <button id="input_sub" @click="searchWeather">搜索</button>

        <br>

        <a href="javascript:;" @click="changeCity('北京')">北京</a>
        <a href="javascript:;" @click="changeCity('上海')">上海</a>
        <a href="javascript:;" @click="changeCity('广州')">广州</a>
        <a href="javascript:;" @click="changeCity('深圳')">深圳</a>

        <ul>
            <li v-for="item in weatherList">
               {{ city }}天气: {{ item.date }}  {{ item.type }}  {{ item.low }}~{{ item.high }}  {{ item.fengli }} {{  item.fengxiang }} <hr>
            </li>
        </ul>
    </div>

    <!--官网提供的 axios cdn地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./js/main.js">
        /*
            接口:http://wthrcdn.etouch.cn/weather_mini
            方法:get
            参数:city(城市)
            返回:该城市一周的天气状况
        */
    </script>
</body>
</html>

五、邂听音乐

在这里插入图片描述

main.js

/*
    接口1:https://autumnfish.cn/search
    方法:get
    参数:keywords(关键字)
    返回:与该关键字相关的歌曲列表

    接口2:https://autumnfish.cn/song/url
    方法:get
    参数:id(歌曲id)
    返回:返回该歌曲在线播放地址

    接口3:https://autumnfish.cn/comment/hot?type=0
    方法:get
    参数:id(歌曲id)
    返回:返回该歌曲热门评论
*/

var app = new Vue({
    el: "#music",
    data: {
        query: "周杰伦",
        musicList: [],
        musicUrl: "",
        comments: []
    },
    methods: {
        searchMusic:function(){
            var that = this;
            axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(function(response){
                console.log(response.data.result.songs);
                that.musicList = response.data.result.songs;
            }, function(err){
                console.log(err);
            })  
        },
        getMusicUrl:function(id){
            var that = this;
            axios.get("https://autumnfish.cn/song/url?id=" + id).then(function(response){
                console.log(response.data.data[0].url);
                that.musicUrl = response.data.data[0].url;
            }, function(err){
                console.log(err)
            }),

            axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + id).then(function(response){
                console.log(response.data.hotComments);
                that.comments = response.data.hotComments;
            }, function(err){
                console.log(err);
            })
        }
    }
})

index.html

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>邂听音乐</title>
</head>

<body>
    <div id="music">
        <h2>欢迎使用邂听</h2>
        <input type="text" v-model="query" @keyup.enter="searchMusic"> <input type="button" value="搜索" @click="searchMusic">
        
        <audio ref="audio" :src="musicUrl" controls autoplay loop></audio>

        <ul v-for="item,index in musicList">
            <li><input type="button" value="播放" @click="getMusicUrl(item.id)"> {{ index+1 }}. {{ item.name }}</li>
        </ul>

        <h3>热门评论</h3>
        <ul v-for="item in comments">
            <li>{{ item.user.nickname }} - {{ item.content}}</li>
        </ul>

    </div>

    <!--官网提供的 axios cdn地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./js/5-main.js">
     
    </script>
</body>
</html>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页