如何使用具有 ES6 标准的 vuejs 转换以下 JavaScript 逻辑

Posted 2023-02-22

【中文标题】如何使用具有 ES6 标准的 vuejs 转换以下 JavaScript 逻辑

【英文标题】：How to convert the following JavaScript logic using vuejs with ES6 standards

【发布时间】：2021-03-20 10:38:49

【问题描述】：

我有一个 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 组件中使用。

【问题讨论】：

这段代码看起来是一个获取 http 请求和处理响应的函数。这与 vue 没有任何关系。您可能想询问如何在 vanilla Javascript（无 jQuery）中处理 ajax 或如何使用响应来使用 vue 制作 UI 组件？

当然它是一个函数，但是如果我在 vue 中粘贴完全相同的代码，我会得到太多错误，所以我想知道如何使用 vuejs 编写相同的逻辑，因为在vue js，我不太了解，因为我是 vuejs 的新手。

你看过官方 vue-wrapper 的 highcharts 吗？另外，你用的是vue2还是3？由于您是 Vue 新手，我会亲自尝试做一些更简单的任务，然后再深入研究图表和可重用组件

您得到的错误与 vue 无关。您提供的代码是纯 javascript，除了 jquery 和 highcharts 似乎。看起来像是一个准备 API 响应以显示图表的函数。与作为 UI 框架的 vue.js 完全无关。如果这不是很明显，我同意 @discolor 的观点，即你可能有点深水，并且会从首先了解 vue 实际做什么和不做什么中受益。

【参考方案1】：

https://codesandbox.io/s/dry-cache-ilesg

这是与您的问题相关的 VueJS 应用程序的一个小演示。请检查一下，您会了解它的工作原理。

【讨论】：

谢谢，这真的很有帮助。现在我知道在 vue 应用程序中放置此类文件的位置，但我想知道的最后一件事是使用 chartjs 如何使用我的 JavaScript 文件显示图表，请通过演示帮助我。

codesandbox.io/s/93m1lpjrvr 这里是 vue chartjs 演示 medium.com/risan/vue-chart-component-with-chart-js-db85a2d21288 这里你会得到所有的解释。

非常感谢，现在我如何使用我的 javascript 文件使用图表 js 显示 LineChart，请以一些 API 为例，将它的演示发送给我，因为你的演示真的很有帮助我理解代码的流程。