如何在 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
• 三个.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 的原因。