vue项目回顾2【常用功能实现】

1.vue页面中的css样式

也可以这样写：

推荐

以及

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：
 

js:
 swipeHandler(e){
          console.log("swipe" + e.direction);
        }

4.代参跳转

html:
 

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.父组件向子组件传数据
父组件：

子组件：

   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.音频播放

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

8.后退

 this.$router.go(-1);

9.图片引用

10.enter提交

11.多组件引用

------------------------------------------------------------------------
 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

{{play.currentTime_|starttime('1',timer)}}

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