How to use external plug-ins in Vue components

Timeļ¼š2020-9-28

Take Axios for exampleThere are three steps to using external plug-ins

  1. Package (install external plug-in)

    NPM I Axios / / run the command in the corresponding directory

  2. Import package (import external plug-ins in a single file component)

    import axios from “axios”

  3. Use the package (in the corresponding code location)

    Use the same as before, how to use or how to use

axios({
url:"xxx"
}).then(res=>{
})

DEMO

<template>
  <div>
    <input type="text" v-model="searchValue" />
    < button @ Click = "getmusic" > Click me < / button >
    <ul>
      <li v-for="(item, index) in songs" :key="index">{{item.name}}</li>
    </ul>
  </div>
</template>
<script>
//Use Axios 1: install Axios, NPM I Axios 2: import Axios from "Axios" 3: use
//Guide Package
import axios from "axios";
export default {
  data() {
    return {
      SearchValue: the value of the // input box
      songs: []
    };
  },
  methods: {
    getMusic() {
      //How to use it before and how to use it now
      axios({
        url: "https://autumnfish.cn/search?keywords=" + this.searchValue,
        method: "get"
      }).then(res => {
        this.songs = res.data.result.songs;
        window.console.log(this.songs);
      });
    }
  }
};
</script>
<style>
</style>

Recommended Today

Deep understanding of HTTP protocol

*Foreword: I’d like to share with you an article about my experience since I developed it, Let’s share a personal understanding of HTTP* -MaojialešŸ˜Š What are the methods of HTTP? HTTP 1.0 defines three request methods: get, post and head HTTP1.1 adds five request methods: options, put, delete, trace and connect What are the specific […]