javascript - 如何在 vanilla html 和 vue cdn 中使用 trading-vue 库
问题描述
<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 cdn 导入的trading-vue库。我该怎么做?谢谢。
解决方案
首先确保您有一个可用的 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>
推荐阅读
- visual-studio - VS2017 nuget一直在错误位置搜索包
- java - 如何在 Java 中设计以下数据结构
- sequelize.js - Sequelize - 如何选择 COUNT(*) 并进行 GROUP BY?
- python - 如何使用 tkinter 正确显示 numpy int16 数组?
- netsuite - NetSuite SuiteScript 2.0 如何从 UserEvent 按钮创建银行存款单(suitelet 功能)
- excel - vArray 值未从 VBA 中的上一个循环中清除
- python - 如何防止 Keras 顺序模型中的过度拟合?
- angular - Nativescript gradle 构建失败并显示“找不到资源 xml/network_security_config”
- spring - 为什么 Spring Boot 4“自定义错误页面”失败 404?
- reporting-services - SSRS 报告垂直合并单元格