4个小时入门vue

4个小时入门vue
Posted on

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

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

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

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

二、音乐播放器
4个小时入门vue

源码：

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8" />
6  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
8  <title>Document</title>
9  <!-- 样式 -->
10  <link rel="stylesheet" href="./css/index.css">
11</head>
12
13<body>
14  <div class="wrap">
15    <div class="play_wrap" id="player">
16      <div class="search_bar">
17        <img src="images/player_title.png" alt="" />
18        <!-- 搜索歌曲 -->
19        <input type="text" autocomplete="off" v-model='query' @keyup.enter="searchMusic();" />
20      </div>
21      <div class="center_con">
22        <!-- 搜索歌曲列表 -->
23        <div class='song_wrapper' ref='song_wrapper'>
24          <ul class="song_list">
25            <li v-for="item in musicList">
26              <!-- 点击放歌 -->
27              <a href="javascript:;" @click='playMusic(item.id)'></a>
28              <b>{{item.name}}</b>
29              <span>
30                <i @click="playMv(item.mvid)" v-if="item.mvid!=0"></i>
31              </span>
32            </li>
33
34          </ul>
35          <img src="images/line.png" class="switch_btn" alt="">
36        </div>
37        <!-- 歌曲信息容器 -->
38        <div class="player_con" :class="{playing:isPlay}">
39          <img src="images/player_bar.png" class="play_bar" />
40          <!-- 黑胶碟片 -->
41          <img src="images/disc.png" class="disc autoRotate" />
42          <img :src="coverUrl==''?'./images/cover.png':coverUrl" class="cover autoRotate" />
43        </div>
44        <!-- 评论容器 -->
45        <div class="comment_wrapper" ref='comment_wrapper'>
46          <h5 class='title'>热门留言</h5>
47          <div class='comment_list'>
48
49            <dl v-for="item in hotComments">
50              <dt>
51                <img :src="item.user.avatarUrl" alt="" />
52              </dt>
53              <dd class="name">{{item.user.nickname}}</dd>
54              <dd class="detail">
55                {{item.content}}
56              </dd>
57            </dl>
58          </div>
59          <img src="images/line.png" class="right_line">
60        </div>
61      </div>
62      <div class="audio_con">
63        <audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
64      </div>
65      <div class="video_con" v-show="showVideo">
66        <video ref='video' :src="mvUrl" controls="controls"></video>
67        <div class="mask" @click="closeMv"></div>
68      </div>
69    </div>
70  </div>
71  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
72  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
73  <!-- 官网提供的 axios 在线地址 -->
74  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
75  <script type="text/javascript">
76    // 设置axios的基地址
77    axios.defaults.baseURL = 'https://autumnfish.cn';
78    // axios.defaults.baseURL = 'http://localhost:3000';
79
80
81
82    // 实例化vue
83    var app = new Vue({
84      el: "#player",
85      data: {
86        // 搜索关键字
87        query: '',
88        // 歌曲列表
89        musicList: [],
90        // 歌曲url
91        musicUrl: '',
92        // 是否正在播放
93        isPlay: false,
94        // 歌曲热门评论
95        hotComments: [],
96        // 歌曲封面地址
97        coverUrl: '',
98        // 显示视频播放
99        showVideo: false,
100        // mv地址
101        mvUrl: ''
102      },
103      // 方法
104      methods: {
105        // 搜索歌曲
106        searchMusic() {
107          if (this.query == 0) {
108            return
109          }
110          axios.get('/search?keywords=' + this.query).then(response => {
111            // 保存内容
112            this.musicList = response.data.result.songs;
113
114          })
115
116          // 清空搜索
117          this.query = ''
118        },
119        // 播放歌曲
120        playMusic(musicId) {
121          // 获取歌曲url
122          axios.get('/song/url?id=' + musicId).then(response => {
123            // 保存歌曲url地址
124            this.musicUrl = response.data.data[0].url
125          })
126          // 获取歌曲热门评论
127          axios.get('/comment/hot?type=0&id=' + musicId).then(response => {
128            // console.log(response)
129            // 保存热门评论
130            this.hotComments = response.data.hotComments
131
132          })
133          // 获取歌曲封面
134          axios.get('/song/detail?ids=' + musicId).then(response => {
135            // console.log(response)
136            // 设置封面
137            this.coverUrl = response.data.songs[0].al.picUrl
138          })
139
140        },
141        // audio的play事件
142        play() {
143          this.isPlay = true
144          // 清空mv的信息
145          this.mvUrl = ''
146        },
147        // audio的pause事件
148        pause() {
149          this.isPlay = false
150        },
151        // 播放mv
152        playMv(vid) {
153          if (vid) {
154            this.showVideo = true;
155            // 获取mv信息
156            axios.get('/mv/url?id=' + vid).then(response => {
157              // console.log(response)
158              // 暂停歌曲播放
159              this.$refs.audio.pause()
160              // 获取mv地址
161              this.mvUrl = response.data.data.url
162            })
163          }
164        },
165        // 关闭mv界面
166        closeMv() {
167          this.showVideo = false
168          this.$refs.video.pause()
169        },
170        // 搜索历史记录中的歌曲
171        historySearch(history) {
172          this.query = history
173          this.searchMusic()
174          this.showHistory = false;
175        }
176      },
177
178    })
179
180  </script>
181</body>
182
183</html>

三、版本二
4个小时入门vue

源码：

1<!DOCTYPE html>
2<html lang="zn">
3    <head>
4        <meta charset="UTF-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
6        <title>Vue音乐实例 _ Ganto</title>
7        <link rel="stylesheet" href="css/index.css">
8        <link rel="shortcut icon" type="text/css" href="http://ganto.xyz/images/favicon.ico"/>
9    </head>
10    <body>
11        <div id="box">
12            <div id="app">
13                <div class="header">
14                    <span class="ntm"><a style="color: white;text-decoration: none;" href="#">Music</a></span>
15                    <div class="search">
16                        <input type="text" placeholder="请输入歌手名字" class="text" v-model="city" @keyup.enter="getjoke">
17                        <input type="button" class="button" value="搜索" @click="getjoke" >
18                    </div>
19                    <span class="tm" title="点击隐藏"><i>右上角展开</i>×</span>
20                </div>
21                <ul>
22                    <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>
23                </ul>
24                <div class="section">
25                    <div class="nar">
26                        <span class="name">{{ name }}</span>
27                        <img class="img" :src="imgUrl" alt="">
28                    </div>
29                    <div class="lyric">
30                        <span v-for="lrc in lyric">{{ lrc.toString().substring(10,)  }}</br></span>
31                    </div>
32                </div>
33                <audio autoplay controls loop :src="url"></audio>
34            </div>
35            <span class="kai" title="展开">√</span>
36            <span class="github" title="右键关闭"><a style="color: #2ab;text-decoration: none;" href="http://ganto.xyz/vue/musicVueDemoByGanto.zip">GitHub源码</a></span>
37        </div>
38        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
39        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
40        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
41        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
42        <script src="js/index.js"></script>
43        <script>
44            $(function(){
45                $(".kai").hide();
46                $(".tm i").hide();
47                $(".tm").click(function(){
48                    $("#app").slideUp(100);
49                    $(".kai").fadeIn();
50                });
51                $(".tm").hover(function(){
52                    $(".tm i").stop().slideDown();
53                },function(){
54                    $(".tm i").stop().slideUp();
55                })
56                $(".kai").click(function(){
57                    $("#app").slideDown(100);
58                    $(".kai").fadeOut();
59                });
60                var app = $("#app"),
61                    header = $(".header");
62                var disX,
63                    disY;
64                header.mousedown(function(e){
65                    disX = e.pageX - parseInt(app.offset().left);
66                    disY = e.pageY - parseInt(app.offset().top);
67                    document.onmousemove = function(e){
68                        var event = e || window.event;
69                        app.css({"left":e.pageX - disX + "px", "top":e.pageY - disY + "px"});
70                    }
71                    document.onmouseup = function(){
72                        document.onmousemove = null;
73                    }
74                    
75                })
76                $(".github").mousedown(function(e){
77                    if(e.button == 2){
78                        $(this).fadeOut();
79                    }
80                })
81            })
82        </script>
83    </body>
84</html>

Post Views: 42