如何在vue.js组件中编写常规的javascript和加载在线外部库？

Question

我正在用vue.Js (vue.cli)创建一个网站来展示我的一些作品。

实际上，所有的交互和实验都是在iframe中进行的，因为我不知道如何加载和使用外部javascript

例如，在我的一个组件中，我想使用gio.js。要使用它，您需要调用4个库：

• jquery -> https://code.jquery.com/jquery-3.3.1.slim.min.js
• three.js -> https://threejs.org/build/three.min.js
• gio.js -> https://raw.githack.com/syt123450/giojs/master/build/gio.min.js
• 数据-> https://raw.githack.com/syt123450/giojs/master/assets/data/sampleData.js

所以实际上我在我的组件中写了这个，但是没有什么工作：

因此，我希望正确地加载外部js文件，并在组件或外部文件中编写常规js。

<template>
  <div class="planet"> 
//globalArea is for render the planisphere
 <div id="globalArea"></div>
  </div>
</template>

<script>
export default {
  mounted() {
 let jqueryScript = document.createElement('script')
    jqueryScript.setAttribute('src', 'https://code.jquery.com/jquery-3.3.1.slim.min.js')
    document.head.appendChild(jqueryScript);
   let threeScript = document.createElement('script')
    threeScript.setAttribute('src', 'https://threejs.org/build/three.min.js')
    document.head.appendChild(threeScript);
 let gioScript = document.createElement('script')
    gioScript.setAttribute('src', 'https://raw.githack.com/syt123450/giojs/master/build/gio.min.js')
    document.head.appendChild(gioScript);
     let dataScript = document.createElement('script')
    dataScript.setAttribute('src', 'https://raw.githack.com/syt123450/giojs/master/assets/data/sampleData.js"')
    document.head.appendChild(dataScript);
  }
  methods: {
// Get the container to hold the IO globe
var container = document.getElementById( "globalArea" );
// Create Gio.controller
var controller = new GIO.Controller( container );
// Add data
controller.addData( data );
// Initialize and render the globe
controller.init();

  }
}
</script>

Answer 1

如果存在常见错误，则methods属性是一个包含所有要定义的方法的对象，例如：

export default {
  methods: {
    myFirstMethod () {
      //code goes here
    },
    mySecondMethod () {
      //code goes here
    },
  }
}

如果要在显示组件时初始化数据，可以在beforeCreate钩子上加载脚本，并将代码粘贴到mounted钩子上。以下是它的外观：

​

var app = new Vue({
	el: '#app',
  beforeCreate() {
    let jqueryScript = document.createElement('script')
    jqueryScript.setAttribute('src', '//code.jquery.com/jquery-3.3.1.slim.min.js')
    document.head.appendChild(jqueryScript);
    let threeScript = document.createElement('script')
    threeScript.setAttribute('src', '//threejs.org/build/three.min.js')
    document.head.appendChild(threeScript);
    let gioScript = document.createElement('script')
    gioScript.setAttribute('src', '//raw.githack.com/syt123450/giojs/master/build/gio.min.js')
    document.head.appendChild(gioScript);
    let dataScript = document.createElement('script')
    dataScript.setAttribute('src', '//raw.githack.com/syt123450/giojs/master/assets/data/sampleData.js')
    document.head.appendChild(dataScript);
  },
  mounted() {
  
    setTimeout(() => {
        // Get the container to hold the IO globe
      var container = document.getElementById( "globalArea" );
      // Create Gio.controller
      var controller = new GIO.Controller( container );
      // Add data
      controller.addData( data );
      // Initialize and render the globe
      controller.init();
    }, 2000)
    
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="planet"> 
    //globalArea is for render the planisphere
    <div id="globalArea" style="height: 500px"></div>
  </div>
</div>

​

另外，请记住，只有在脚本完全加载时才能访问这些脚本，这就是为什么我使用延迟2秒的setTimeout。