vue-fetch使用教程

Posted 2020-10-17 陈志瀮

 

1.安装命令“

cnpm install --save isomorphic-fetch es6-promise

2.由于ie不支持Promise，所以需要安装promise-polyfill;

cnpm install promise-polyfill --save-exact

需要在index.js中引用

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Promise from "promise-polyfill";

if(!window.Promise){
    window.Promise = Promise;
}

3.使用

<template>
  <div class="hello">
    <h1 @click="getUrl">{{ msg }}</h1>
    <router-link to="/test/one">testlinks</router-link>
    <router-link to="/test/two" exact>testlinks1</router-link>
    <router-link to="/user/one">testlinks2</router-link>
    <transition :name="tranName">
      <router-view></router-view>
    </transition>
    <ul>
      <li v-for=‘item in items‘>{{item.id}}</li>
    </ul>
  </div>


</template>

<script>

require("es6-promise").polyfill();
require(‘isomorphic-fetch‘);

export default {
  name: ‘HelloWorld‘,
  data () {
    return {
      msg: ‘Welcome to Your Vue.js App‘,
      tranName:‘slide-left‘,
      items:[]
    }
  },
  created(){
    let _this = this;
    fetch(‘./src/static/data.json‘).then(function(res){
      return res.json();
    }).then(function(stories){
      console.log(stories)
      _this.items = stories;
    }).then(function(err){
      console.log(err)
    })
  },
  methods:{
    getUrl(){
      console.log(1)
    }
  },
  beforeRouteUpdate (to, from, next) {
    const toDepth = to.path.split(‘/‘).length
    const fromDepth = from.path.split(‘/‘).length
    this.tranName = toDepth >= fromDepth ? ‘slide-right‘ : ‘slide-left‘
    next()
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
  opacity: 0
}
.slide-left-enter-active, .slide-right-leave-active {
  transition: all .5s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(30px, 0);
  transform: translate(30px, 0);
}
.slide-left-leave-active, .slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-30px, 0);
  transform: translate(-30px, 0);
}
</style>