1.vue页面中的css样式

  <div class="my-list" id="my-list" :style="{'width':this.$store.state.width_s+'px'}">

也可以这样写：

<li @click="tabSwitch(1)" :class="{'active':activeId==1}">推荐</li>

以及

<div @click="switchSongShow()" :class="{'picturecon':true,'paused':!play.play}">

2.axios的用法
在mian.js中写入：

import axios from 'axios'
Vue.prototype.$http = axios;

在当前页面引入

  import axios from 'axios'

get：

axios.get('/user?ID=12345')
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

post：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

3.手势滑动的使用

html：
 <div class="songlist-row-s"  v-finger:swipe="swipeHandler">
js:
 swipeHandler(e){
          console.log("swipe" + e.direction);
        }

4.代参跳转

html:
 <li v-for="(item,k) in songcollectList" @click="gofavoriteList(item)" v-if="k<6">
js:
      gofavoriteList(item_){
          //带着id跳转到favorite_list页面
            this.$router.push({
              name: 'favorite_list',
              params: {
                id:item_
              }
            });
          }
or:
this.$router.push({path:'/favorite_list'});

favorite_list页面：

beforeRouteEnter (to, from, next) {
          //跳转到这个页面后就被这个组件接受了
        next(vm => {
          var item_ = to.params.id;
    })
 },
也可以在methods的方法里面这样取
  methods:{
          testFn(){
            var item_ = this.$route.query.id;
          }
}

5.页面滚动监听

  mounted(){
          var tar = document.querySelector('.setting-index');
          var this_ = this;
          window.addEventListener('scroll',function () {
            console.dir(document.documentElement.scrollTop);
            if(document.documentElement.scrollTop == 160){
              this_.moreshow = false;
            }else{
              this_.moreshow = true;
            }
          });
      }

6.父组件向子组件传数据
父组件：

<template>
    <div class="songPage-friend">
      <Songlistcommon :message="api"></Songlistcommon>
    </div>
</template>

<script>
    import Songlistcommon from './tool/songListcommon'
    export default {
        name: "song-page_friend",
        data(){
            return{
              api:'https://api.bzqll.com/music/tencent/search?offset=0&type=song'
            }
        },
      methods:{},
      components:{
        Songlistcommon
      }
    }
</script>

子组件：

   export default {
      props:['message'],
      name: "song-listcommon",
      data(){
        return{
          songlist:[]
        }
      },
      mounted(){
        var this_ = this;
        var api_ = this.message;
        axios.get(api_).then((res)=>{
          this_.songlist = res.data.data;
        });
      }

7.音频播放

<audio v-show="false" id="audio" controls="controls" preload="auto" src="./../../static/myvideo.mp3"></audio>

var allProcess = document.getElementById('audio').duration;//音频时长

8.后退

 this.$router.go(-1);

9.图片引用

   <img :src="thissong.pic" alt="">

10.enter提交

 <input type="text" v-model="keyword" placeholder="你想搜的任何" @keyup.enter="submit()">

11.多组件引用

<Recommend></Recommend>
<Broad></Broad>
------------------------------------------------------------------------
 import Recommend from './songPage_recommend'
 import Broad from './songPage_broad'
-------------------------------------------------------------------------
 components:{
          Friend,Recommend,Broad,HeadNav
 }

12.引用公共js/css以及字体
在src/App.vue

import 'font-awesome/css/font-awesome.min.css'//引用字体
import './assets/css/common.css'//引用公共css

在main.js

import Common from './assets/js/common'
Vue.prototype.common = Common;//引用公共js

13.过滤filter

<span class="start">{{play.currentTime_|starttime('1',timer)}}</span>

   filters:{
        starttime(val,v1,v2){
          var currentTime_ = val;
       
        }
      }