如何将 Trading-vue 库与 vanilla html 和 vue cdn 结合使用
<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>
我想将交易 vue库与 Vue 一起使用，该库是我从 Vue cdn 导入的。我该怎么办？谢谢。
慕田峪4524236浏览 99回答 1
1回答
-
Smart猫小萌
首先确保您有一个可用的 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 ], ] } }},将该数据作为 prop 传递：<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>
随时随地看视频慕课网APP
相关分类
JavaScript