Как написать обычный javascript и загрузить внешнюю библиотеку онлайн в компонентах vue.js? - PullRequest
Новая
       47

Как написать обычный javascript и загрузить внешнюю библиотеку онлайн в компонентах vue.js?

0 голосов
/ 03 апреля 2019

Я создаю веб-сайт с vue.Js (vue.cli), чтобы показать некоторые из моих работ.

На самом деле все взаимодействия и эксперименты выполняются в iframe, потому что я не понимаю, какзагрузить и использовать внешний javascript

Например, в одном из моих компонентов я хотел бы использовать gio.js.Чтобы использовать его, вам нужно вызвать 4 библиотеки:

Так что на самом деле я пишу это в моем компоненте, но ничего не работает:

Итак, я хотел бы правильнозагружайте внешние 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>

1 Ответ

0 голосов
/ 03 апреля 2019

У вас распространенная ошибка, свойства 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>

Также имейте в виду, что вы можете получить доступ к этим скриптам, только когда они полностью загружены, поэтому я использую setTimeout с задержкой в ​​2 секунды.

...