javascript - 如何使用具有 ES6 标准的 vuejs 转换以下 JavaScript 逻辑
问题描述
我有一个 JavaScript 文件,我希望使用具有 ES6 标准的 Vuejs 实现相同的逻辑。我想在“LineChart.vue”中添加这个逻辑,然后我会将它导入到我的 parent.vue 以显示图表。
和 vuejs 一样,有很多生命周期钩子方法,因为我是 vuejs 的新手,我不知道如何在 vuejs 中实现相同的逻辑。请帮我解决一下这个。
代码在这里:
function chart_shot(type, id, interval) {
$.ajax({
type: "GET",
url: getApiUrl("find/" + type + "?interval=" + interval),
headers: {
"api_key": ''
},
cache: true,
timeout: 30,
dataType: "json",
success: function (data) {
var ctx = document.getElementById(id);
var highChart = [];
for(i = 0; i < data["date"].length; i++) {
highChart.push({
t: moment(data["date"][i], "X").toDate(),
y: data["challenges"][i]
})
}
if(my !== undefined) {
my.destroy();
}
my = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: "challenges",
data: highChart,
}]
},
options: {
lineTension: 0,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
yAxes: [{
scaleLabel: {
display: false
},
ticks: {
beginAtZero: true,
callback: function (value, index, values) {
return value + '%';
}
}
}],
xAxes: [{
type: 'time',
time: {
unit: 'month'
},
scaleLabel: {
display: true,
labelString: ''
},
}]
}
}
});
}
});
}
请帮助我,因为我是 vuejs 的新手,我不知道在 vuejs 中编写此代码的有效方法。
请告诉我它可以在哪种文件类型中完成,我的意思是在 js 或 vue 中?
以及如何在其他 vue 组件中使用编写的代码。
解决方案
https://codesandbox.io/s/dry-cache-ilesg
这是与您的问题相关的 VueJS 应用程序的一个小演示。请检查一下,您将对它的工作原理有所了解。
推荐阅读
- android - 错误:无法加载类 'org.gradle.logging.StyledTextOutput$Style'
- php - 在php中的页面加载时自动获取用户区域
- php - 将项目和子项目插入订单
- export - Android Studio 试图导出 APK,给我一个错误
- azure-functions - AzureAdTokenCredentials 对 ActiveDirectory 3.13.1.846 的依赖
- python - 从 pandas.read_csv() 中删除重复的列
- java - 如何使用 crawler4J 从网站获取所有图像
- java - 如何将 PrinterWriter OutputStream 的值存储为变量?
- php - 使用 pin 登录,但显示“Welcome $username”
- angular - 当canActivate返回false时如何重定向另一个组件?