Vue2简单学习_vue2学习-优快云博客

需要使用到的包vue和axios

<!--vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

第一个Vue程序

在这里插入图片描述

1、导包

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<!--vue3-->
<script src="https://unpkg.com/vue@3"></script>

2、编写代码

	<div id="app">
        {{ message+'!' }}
        {{ school.name }}
        {{ like[2] }}
    </div>
        
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"你好， vue！",
                school:{
                    name:"abc",
                    phone:"123456"
                },
                like:["吃饭", "睡觉", "打豆豆"]
            }
        })
    </script>

el:挂载点

在这里插入图片描述

data数据类型

在这里插入图片描述

v-text

在这里插入图片描述

<div id="app">
        <p v-text="age"></p>
        <p v-text="age+'!'"></p>
        <p v-text="age>10"></p>
        <p v-text="10-1"></p>
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                age:19
            }
        })
    </script>

在这里插入图片描述

v-html

在这里插入图片描述

v-on

在这里插入图片描述

<div id="app">
        <button @click="doIt('hello', '猪')">doit</button>
        <input type="text" @Keyup.enter="sayHi">
    </div>    
    <script>
        var app = new  Vue({
            el:"#app",
            methods:{
                doIt(p1, p2){
                    console.log(p1)
                    console.log(p2)
                },
                sayHi(){
                    alert("Hi!")
                }
            }
        })
    </script>

计数器

<div id="app">
        <button @click="sub">-</button>
        <span>{{ num }}</span>
        <button @click="add">+</button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                add(){
                    if(this.num<7){
                        this.num++
                    }else{
                        alert("已经最大")
                    }
                },
                sub(){
                    if(this.num>1){
                        this.num--
                    }else{
                        alert("已经最小")
                    }
                }
            }
        })
    </script>

在这里插入图片描述

v-show

在这里插入图片描述

<div id="app">
        <button @click="changIsShow">显示/隐藏图片</button>
        <button @click="addAge">加年龄</button>
        <img v-show="isShow" src="./resource/test.jpg">
        <img v-show="age>=18" src="./resource/test.jpg">
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                age:16
            },
            methods:{
                changIsShow(){
                    this.isShow=!this.isShow
                },
                addAge(){
                    this.age++
                }
            }
        })
    </script>

v-if

在这里插入图片描述

<div id="app">
        <button @Click="toggleIsShow">隐藏显示元素</button>
        <p v-show="isShow">v-show</p>
        <p v-if="isShow">v-if</p>
        <p v-if="temperature>35">热死了</p>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:true,
                temperature:35
            },
            methods:{
                toggleIsShow(){
                    this.isShow=!this.isShow
                }
            }
        })
    </script>

在这里插入图片描述

v-bind

在这里插入图片描述

	<style>
        .active{
            border: 1px solid red;
        }
    </style>
    
     <div id="app">
        <img v-bind:src="imgSrc">
        <img :src="imgSrc" :title="imgTitle">
        <br>
        <img :src="imgSrc" :title="imgTitle"
            :class="isActive?'active':''"
            @click="toggleActive"        
        >
        <img :src="imgSrc" :title="imgTitle"
            :class="{active:isActive}"
            @click="toggleActive"        
        >
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"./resource/熊.png",
                imgTitle:"熊",
                isActive:false
            },
            methods:{
                toggleActive(){
                    this.isActive=!this.isActive
                }
            }
        })
    </script>

图片切换

在这里插入图片描述

<div id="app">
        <button @click="preImage" v-show="index>0">上一张</button>
        <img :src="imgArray[index]">
        <button @click="nextImage" v-show="index<imgArray.length-1">下一张</button>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgArray:[
                    "./resource/01.jpg",
                    "./resource/02.jpg",
                    "./resource/03.jpg",
                    "./resource/04.jpg"
                ],
                index:0
            },
            methods:{
                preImage(){
                    this.index--
                },
                nextImage(){
                    this.index++
                }
            }
        })
    </script>

v-for

在这里插入图片描述

<div id="app">
    <ul>
        <li v-for="(item,index) in city">
            第{{ index+1 }}个城市：{{ item }}
        </li>
    </ul>
    <button @click="add">新增</button>
    <button @click="remove">删除</button>
    <h2 v-for="item in person">
        姓名：{{item.name}}==年龄:{{item.age}}
    </h2>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            city:["成都", "北京", "上海"],
            person:[
                {
                    name:"张三",
                    age:18
                },
                {
                    name:"李四",
                    age:20
                }
            ]
        },
        methods:{
            add(){
                this.person.push({name:"王五", age:22})
            },

            remove(){
                this.person.shift()
            }
        }
    })
</script>

v-model

在这里插入图片描述

<div id="app">
        <input type="button" value="修改" @click="change">
        <input type="text" v-model="message" @Keyup.enter="getM">
        {{ message }}
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"hello"
            },
            methods:{
                getM(){
                    alert(this.message)
                },
                change(){
                    this.message="world"
                }
            }
        })
    </script>

记事本

<div id="app">
        <input type="text" v-model="inputValue" @Keyup.enter="add">
        <ul style="border: 1px solid black;" v-if="list.length!=0">
            <li v-for="(item, index) in list">
                <div>
                    第{{index+1}}项 {{ item }}
                    <a href="#" @click="remove(index)">delete</a>
                </div>
            </li>
        </ul>
        <b>{{ list.length }}条记录</b> <b @click="removeAll">清空</b>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                list:["吃饭", "睡觉", "打豆豆"],
                inputValue:"好好学习，天天向上"
            },
            methods:{
                add(){
                    this.list.push(this.inputValue)
                },
                remove(index){
                    this.list.splice(index, 1)
                },
                removeAll(){
                    this.list.splice(0)
                }
            }
        })
    </script>

在这里插入图片描述

axios基本使用

在这里插入图片描述

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

	<button class="get">get</button>
    <button class="post">post</button>

    <script>
        /* get */
        /*
            接口1:随机笑话
            请求地址:https: / / autumnfish . cn/ api/joke/list 
            请求方法:get
            请求参数:num(笑话条数,数字)
            响应内容:随机笑话
        */
        document.querySelector(".get").onclick = function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=2")
            .then(function(resonpse){
                console.log(resonpse)
            },function(err){
                console.log(err)
            })
        }
        /* post */
        /*
            接口2:用户注册
            请求地址:https:/ /autumnfish. cn/ api/user/reg
            请求方法:post
            请求参数:username(用户名，字符串)
            响应内容:注册成功或失败
        */
        document.querySelector(".post").onclick = function(){
            axios.post("https://autumnfish.cn/api/user/reg"
            ,{username:"jack"})
            .then(function(response){
                console.log(response)
            },function(err){
                console.log(err)
            })
        }
    </script>

axios+vue

在这里插入图片描述

<div id="app">
        <button @click="getJoke">获得笑话</button>
        <p>{{ joke }}</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
            接口:随机获取条 笑话
            请求地址: https://autumnfish.cn/api/joke
            请求方法:get
            请求参数:无
            响应内容:随机笑话
        */
        var app = new Vue({
            el:"#app",
            data:{
                joke:"hhh"
            },
            methods:{
                getJoke(){
                    var that = this
                    axios.get("https://autumnfish.cn/api/joke")
                    .then(function(response){
                        that.joke = response.data
                    })
                }
            }
        })
    </script>

查询天气

在这里插入图片描述

<div id="app">
        <input type="text" v-model="city" @Keyup.enter="seacherWeather">
        <b @click="clickCityWeather('成都')">成都</b>
        <b @click="clickCityWeather('广州')">广州</b>
        <b @click="clickCityWeather('深圳')">深圳</b>
        <b @click="clickCityWeather('重庆')">重庆</b>
        <br>
        <div v-for="(item, index) in weatherList" style="border: 1px solid black;">
            {{item.day}}
            {{item.date}}
            {{item.tem2+'ºC'}}~{{item.tem1+"ºC"}}
            {{item.narrative}}
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
            请求地址:http://ajax-api.itheima.net/api/weather
            请求方法:get 
            请求参数:city(城市名)
            响应内容:天气信息
            1.点击回车
            2.
            查询数据
            3.渲染数据
        */
        var app = new Vue({
            el:"#app",
            data:{
                city:'',
                weatherList:[]
            },
            methods:{
                seacherWeather(){
                    var that = this
                    axios.get("http://ajax-api.itheima.net/api/weather?city="+this.city)
                    .then(function(response){
                        that.weatherList = response.data.data.data
                    })
                    .catch(function(err){
                        console.log(err)
                    })
                },
                clickCityWeather(city){
                    this.city = city
                    this.seacherWeather()
                }
            }
        })
    </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>
</head> 
<body>
    <div id="app">
        <input type="text" v-model="keywords" @Keyup.enter="searchMusic"> <button @click="searchMusic">搜索</button>
        <br>
        <ul>
            <li v-for="(item, index) in musicList">
                {{item.name}} <a href="#" @click="playMusic(item.id)">播放</a> <a v-if="item.mvid!=0" href="#" @click="playMv(item.id, item.mvid)">播放mv</a>
            </li>
        </ul>
        <img :src="picCover" style="height: 300px;"><br>
        <audio v-if="playMediaType=='audio'" :src="musicSrc" controls autoplay loop @play="playListen" @pause="pauseListen"></audio><br>
        <video v-if="playMediaType=='video'" controls :src="mvUrl" autoplay="true" style="height: 200px;"></video>
        <!-- <p v-text="playStatus?'音频播放中...':'音频未播放'"></p> -->
        <div v-for="(item, index) in hotComments" style="border: 1px dashed black;">
            <img :src="item.user.avatarUrl" style="height: 30px;"> <b>{{item.user.nickname}}</b><br>
            {{item.content}}
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*  
            1.关键字搜索歌曲
            请求地址:https://autumnfish.cn/search
            请求方法:get
            请求参数:keywords(查询关键字)
            响应内容:歌曲搜索结果

            2:歌曲url获取接口
            请求地址: https://autumnfish.cn/song/url
            请求方法:get
            请求参数:id(查询关键字)
            响应内容:歌曲ur1地址

            3.歌曲详情获取
            请求地址:https://autumnfish.cn/song/detail
            请求方法:get
            请求参数:ids(歌曲id)
            响应内容:歌曲详情(包括封面信息)

            4.热门门评论获取
            请求地址: https://autumnfish.cn/comment/hot?type=0
            请求方法:get
            请求参数:id(歌曲id,地址中的type固定为6)
            响应内容:歌曲的热门门评论

            5. mv地址获取
            请求地址:https://autumnfish.cn/mv/url
            请求方法:get
            请求参数:id(mvid,为0表示没有mv)
            响应内容:mv的地址
        */
        var app = new Vue({
            el:"#app",
            data:{
                keywords:"",
                musicList:[],
                musicSrc:"",
                picCover:"",
                hotComments:[],
                playStatus:false,
                mvUrl:"",
                playMediaType:''
            },
            methods:{
                searchMusic(){
                    var that = this
                    axios.get("https://autumnfish.cn/search?keywords="+this.keywords)
                    .then(function(response){
                        console.log(response.data.result.songs)
                        that.musicList = response.data.result.songs                        
                    },function(error){
                        console.log(error)
                    })
                },
                playMusic(musicId){
                    this.playMediaType='audio'
                    var that = this
                    console.log(musicId)
                    //播放
                    axios.get("https://autumnfish.cn/song/url?id="+musicId)
                    .then(function(response){
                        console.log(response.data.data[0].url)
                        that.musicSrc=response.data.data[0].url
                    },function(error){
                        console.log(error)
                    })
                    this.getMusicInfo(musicId)
                },
                playMv(musicId, mvid){
                    this.playMediaType='video'
                    var that = this
                    axios.get("https://autumnfish.cn/mv/url?id="+mvid)
                    .then(function(resonpse){
                        console.log(resonpse)
                        that.mvUrl = resonpse.data.data.url
                    },function(error){
                        console.log(error)
                    })
                    this.getMusicInfo(musicId)
                },
                getMusicInfo(musicId){
                    var that = this
                    //获取封面
                    axios.get("https://autumnfish.cn/song/detail?ids="+musicId)
                    .then(function(response){
                        console.log(response.data.songs[0].al.picUrl)
                        that.picCover=response.data.songs[0].al.picUrl
                    },function(error){
                        console.log(error)
                    })
                    //获取热评
                    axios.get("https://autumnfish.cn/comment/hot?type=0&id="+musicId)
                    .then(function(response){
                        console.log(response.data.hotComments)
                        that.hotComments=response.data.hotComments
                    },function(error){
                        console.log(error)
                    })
                },
                playListen(){
                    console.log("play")
                    this.playStatus=true
                },
                pauseListen(){
                    console.log("pause")
                    this.playStatus=false
                }
            }
        })
    </script>
</body>
</html>