Как использовать библиотеку trading-vue с ванильным html и Vue cdn


Как использовать библиотеку trading-vue с ванильным html и Vue cdn

01.12.2020 02:49:55 Просмотров 70 Источник
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src =  './libs/trading-vue-js-master/dist/trading-vue.js' ></script>

</head>
<body>
    <div id = "app"></div>

    <test>
    </test>
<script>
    var app2 = new Vue({
        name: 'app',
    })
   
    app2.use(xxxMAYBESOMETHINGLIKETHIS?xxxxx)
</script>
</body>
</html>

Я хотел использовать библиотеку trading-vue с Vue, которую я импортировал из Vue cdn. Как мне это сделать? Спасибо.

У вопроса есть решение - Посмотреть?

Ответы - Как использовать библиотеку trading-vue с ванильным html и Vue cdn / How to use trading-vue library with vanilla html and vue cdn

Является ответом!
Dan

01.12.2020 05:09:41

Сначала убедитесь, что у вас есть рабочий CDN (так как вы хотите CDN) для trading-vue, например:

<script src="https://cdn.jsdelivr.net/npm/trading-vue-js@0.9.0/dist/trading-vue.min.js"></script>

Где бы вы ни хотели его использовать, зарегистрируйте определение компонента в Родительском параметре components:

components: {
  trading: TradingVueJs.TradingVue  // Naming it 'trading'
}

Предоставить родителям данные:

data() {
  return {
    mydata: {
      ohlcv: [  // Taken from their docs, this name seems to be important
        [ 1551128400000, 33,  37.1, 14,  14,  196 ],
        [ 1551132000000, 13.7, 30, 6.6,  30,  206 ],
        [ 1551135600000, 29.9, 33, 21.3, 21.8, 74 ],
        [ 1551139200000, 21.7, 25.9, 18, 24,  140 ],
        [ 1551142800000, 24.1, 24.1, 24, 24.1, 29 ],
      ]
    }
  }
},

Передайте эти данные в качестве реквизита:

<div id="app">
  <trading :data="mydata"></trading>
</div>

Вот демо-версия:

/***** APP *****/
new Vue({
  el: "#app",
  data() {
    return {
      mydata: {
        ohlcv: [
          [ 1551128400000, 33,  37.1, 14,  14,  196 ],
          [ 1551132000000, 13.7, 30, 6.6,  30,  206 ],
          [ 1551135600000, 29.9, 33, 21.3, 21.8, 74 ],
          [ 1551139200000, 21.7, 25.9, 18, 24,  140 ],
          [ 1551142800000, 24.1, 24.1, 24, 24.1, 29 ],
        ]
      }
    }
  },
  components: {
    trading: TradingVueJs.TradingVue
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <trading :data="mydata"></trading>
</div>

<script src="https://cdn.jsdelivr.net/npm/trading-vue-js@0.9.0/dist/trading-vue.min.js"></script>

Помочь в развитии проекта:
Закрыть X