vue 使用外部JS与调用原生API操作示例

针对“vue 使用外部JS与调用原生API操作”，我会给出详细的攻略教程。包含以下几个方面：

vue中如何使用外部JS
vue如何调用原生API
示例说明

1. vue中如何使用外部JS

要在vue中使用外部JS，我们需要使用import语法去加载外部JS。在vue中，可以在单独的.js文件中写代码，然后通过ES6的import语法进行引用。这样，就可以在.vue组件中使用这个外部JS的代码。

下面是一个示例，假设我们有一个外部JS文件，在这个文件中定义了一个名为hello的函数，这个函数可以输出“Hello World”。

// 外部JS文件：hello.js
function hello() {
  console.log("Hello World");
}

在我们想要使用这个函数的.vue组件文件中，可以这样引用这个外部JS文件，并使用里面定义的hello函数：

<!-- .vue组件 -->
<template>
  <div>
    <button @click="clickHandler">点击我</button>
  </div>
</template>

<script>
// 引入外部JS文件
import hello from "./hello.js";

export default {
  methods: {
    clickHandler() {
      // 在click事件中使用hello函数
      hello();
    }
  }
};
</script>

2. vue如何调用原生API

在vue中调用原生API，我们需要先定义一个对象，这个对象中包含了一个或多个方法，这些方法可以调用原生API。然后，我们可以在vue中使用这个对象的方法去操作原生API。需要注意的是，这个对象的方法最好使用Promise来封装，这样就可以在vue中使用async/await语法来简化异步操作。

下面是一个基本的原生API操作示例，假设我们要调用navigator.geolocation.getCurrentPosition()获取当前地理位置：

// 定义原生API对象，并使用Promise封装
const NativeAPI = {
  getPosition() {
    return new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(
        position => resolve(position),
        error => reject(error)
      );
    });
  }
};

然后，在我们想要使用这个原生API的.vue组件中，可以这样调用这个方法：

<!-- .vue组件 -->
<template>
  <div>
    <button @click="clickHandler">点击我</button>

    <p v-if="position">当前位置：{{ position.coords.longitude }}, {{ position.coords.latitude }}</p>

    <p v-else>获取位置中</p>
  </div>
</template>

<script>
// 引用原生API对象
import NativeAPI from "./NativeAPI.js";

export default {
  data() {
    return {
      position: null
    };
  },

  methods: {
    async clickHandler() {
      try {
        // 调用原生API
        const position = await NativeAPI.getPosition();

        this.position = position;
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>