Home >  > 4个小时入门vue

4个小时入门vue

0

看完这个才发现,不是Vue难学,而是没有找到好的教程。

进度:目前已经学到第12节。

一、感想
其实感觉写Vue和写类差不多,主要是写属性、写方法。

基于 Vue.js 的移动端组件库
http://mint-ui.github.io/#!/zh-cn

二、音乐播放器

源码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- 样式 -->
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="wrap">
    <div class="play_wrap" id="player">
      <div class="search_bar">
        <img src="images/player_title.png" alt="" />
        <!-- 搜索歌曲 -->
        <input type="text" autocomplete="off" v-model='query' @keyup.enter="searchMusic();" />
      </div>
      <div class="center_con">
        <!-- 搜索歌曲列表 -->
        <div class='song_wrapper' ref='song_wrapper'>
          <ul class="song_list">
            <li v-for="item in musicList">
              <!-- 点击放歌 -->
              <a href="javascript:;" @click='playMusic(item.id)'></a>
              <b>{{item.name}}</b>
              <span>
                <i @click="playMv(item.mvid)" v-if="item.mvid!=0"></i>
              </span>
            </li>

          </ul>
          <img src="images/line.png" class="switch_btn" alt="">
        </div>
        <!-- 歌曲信息容器 -->
        <div class="player_con" :class="{playing:isPlay}">
          <img src="images/player_bar.png" class="play_bar" />
          <!-- 黑胶碟片 -->
          <img src="images/disc.png" class="disc autoRotate" />
          <img :src="coverUrl==''?'./images/cover.png':coverUrl" class="cover autoRotate" />
        </div>
        <!-- 评论容器 -->
        <div class="comment_wrapper" ref='comment_wrapper'>
          <h5 class='title'>热门留言</h5>
          <div class='comment_list'>

            <dl v-for="item in hotComments">
              <dt>
                <img :src="item.user.avatarUrl" alt="" />
              </dt>
              <dd class="name">{{item.user.nickname}}</dd>
              <dd class="detail">
                {{item.content}}
              </dd>
            </dl>
          </div>
          <img src="images/line.png" class="right_line">
        </div>
      </div>
      <div class="audio_con">
        <audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
      </div>
      <div class="video_con" v-show="showVideo">
        <video ref='video' :src="mvUrl" controls="controls"></video>
        <div class="mask" @click="closeMv"></div>
      </div>
    </div>
  </div>
  <!-- 开发环境版本,包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="text/javascript">
    // 设置axios的基地址
    axios.defaults.baseURL = 'https://autumnfish.cn';
    // axios.defaults.baseURL = 'http://localhost:3000';



    // 实例化vue
    var app = new Vue({
      el: "#player",
      data: {
        // 搜索关键字
        query: '',
        // 歌曲列表
        musicList: [],
        // 歌曲url
        musicUrl: '',
        // 是否正在播放
        isPlay: false,
        // 歌曲热门评论
        hotComments: [],
        // 歌曲封面地址
        coverUrl: '',
        // 显示视频播放
        showVideo: false,
        // mv地址
        mvUrl: ''
      },
      // 方法
      methods: {
        // 搜索歌曲
        searchMusic() {
          if (this.query == 0) {
            return
          }
          axios.get('/search?keywords=' + this.query).then(response => {
            // 保存内容
            this.musicList = response.data.result.songs;

          })

          // 清空搜索
          this.query = ''
        },
        // 播放歌曲
        playMusic(musicId) {
          // 获取歌曲url
          axios.get('/song/url?id=' + musicId).then(response => {
            // 保存歌曲url地址
            this.musicUrl = response.data.data[0].url
          })
          // 获取歌曲热门评论
          axios.get('/comment/hot?type=0&id=' + musicId).then(response => {
            // console.log(response)
            // 保存热门评论
            this.hotComments = response.data.hotComments

          })
          // 获取歌曲封面
          axios.get('/song/detail?ids=' + musicId).then(response => {
            // console.log(response)
            // 设置封面
            this.coverUrl = response.data.songs[0].al.picUrl
          })

        },
        // audio的play事件
        play() {
          this.isPlay = true
          // 清空mv的信息
          this.mvUrl = ''
        },
        // audio的pause事件
        pause() {
          this.isPlay = false
        },
        // 播放mv
        playMv(vid) {
          if (vid) {
            this.showVideo = true;
            // 获取mv信息
            axios.get('/mv/url?id=' + vid).then(response => {
              // console.log(response)
              // 暂停歌曲播放
              this.$refs.audio.pause()
              // 获取mv地址
              this.mvUrl = response.data.data.url
            })
          }
        },
        // 关闭mv界面
        closeMv() {
          this.showVideo = false
          this.$refs.video.pause()
        },
        // 搜索历史记录中的歌曲
        historySearch(history) {
          this.query = history
          this.searchMusic()
          this.showHistory = false;
        }
      },

    })

  </script>
</body>

</html>

三、版本二

源码:

<!DOCTYPE html>
<html lang="zn">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue音乐实例 _ Ganto</title>
        <link rel="stylesheet" href="css/index.css">
        <link rel="shortcut icon" type="text/css" href="http://ganto.xyz/images/favicon.ico"/>
    </head>
    <body>
        <div id="box">
            <div id="app">
                <div class="header">
                    <span class="ntm"><a style="color: white;text-decoration: none;" href="#">Music</a></span>
                    <div class="search">
                        <input type="text" placeholder="请输入歌手名字" class="text" v-model="city" @keyup.enter="getjoke">
                        <input type="button" class="button" value="搜索" @click="getjoke" >
                    </div>
                    <span class="tm" title="点击隐藏"><i>右上角展开</i>×</span>
                </div>
                <ul>
                    <li class="li" :title="a.name + '-' + a.artists[0].name" v-for="(a,index) in arr" @click="fun(a.id,a.name,a.artists[0].name)">{{a.name}}-{{a.artists[0].name}}</li>
                </ul>
                <div class="section">
                    <div class="nar">
                        <span class="name">{{ name }}</span>
                        <img class="img" :src="imgUrl" alt="">
                    </div>
                    <div class="lyric">
                        <span v-for="lrc in lyric">{{ lrc.toString().substring(10,)  }}</br></span>
                    </div>
                </div>
                <audio autoplay controls loop :src="url"></audio>
            </div>
            <span class="kai" title="展开">√</span>
            <span class="github" title="右键关闭"><a style="color: #2ab;text-decoration: none;" href="http://ganto.xyz/vue/musicVueDemoByGanto.zip">GitHub源码</a></span>
        </div>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <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/index.js"></script>
        <script>
            $(function(){
                $(".kai").hide();
                $(".tm i").hide();
                $(".tm").click(function(){
                    $("#app").slideUp(100);
                    $(".kai").fadeIn();
                });
                $(".tm").hover(function(){
                    $(".tm i").stop().slideDown();
                },function(){
                    $(".tm i").stop().slideUp();
                })
                $(".kai").click(function(){
                    $("#app").slideDown(100);
                    $(".kai").fadeOut();
                });
                var app = $("#app"),
                    header = $(".header");
                var disX,
                    disY;
                header.mousedown(function(e){
                    disX = e.pageX - parseInt(app.offset().left);
                    disY = e.pageY - parseInt(app.offset().top);
                    document.onmousemove = function(e){
                        var event = e || window.event;
                        app.css({"left":e.pageX - disX + "px", "top":e.pageY - disY + "px"});
                    }
                    document.onmouseup = function(){
                        document.onmousemove = null;
                    }
                    
                })
                $(".github").mousedown(function(e){
                    if(e.button == 2){
                        $(this).fadeOut();
                    }
                })
            })
        </script>
    </body>
</html>

https://www.bilibili.com/video/av76249419?p=4

本文暂无标签

发表评论

*

*