如何在Vue组件中使用JavaScript

我需要在我的Vue组件中放置一些图表和统计表，但它们都是使用纯JavaScript函数创建的，它们的上下文是通过jQuery方法获得的。我正在使用ChartJS制作图表。我将html部分放在component Chart.vue中，但它们现在都是空的，因为我不允许在组件中使用Js

下面是一个示例图表代码

    var areaChartCanvas = $('#areaChart').get(0).getContext('2d')

    var areaChartData = {
      labels  : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label               : 'Digital Goods',
          backgroundColor     : 'rgba(60,141,188,0.9)',
          borderColor         : 'rgba(60,141,188,0.8)',
          pointRadius          : false,
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : [28, 48, 40, 19, 86, 27, 90]
        },
        {
          label               : 'Electronics',
          backgroundColor     : 'rgba(210, 214, 222, 1)',
          borderColor         : 'rgba(210, 214, 222, 1)',
          pointRadius         : false,
          pointColor          : 'rgba(210, 214, 222, 1)',
          pointStrokeColor    : '#c1c7d1',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(220,220,220,1)',
          data                : [65, 59, 80, 81, 56, 55, 40]
        },
      ]
    }

    var areaChartOptions = {
      maintainAspectRatio : false,
      responsive : true,
      legend: {
        display: false
      },
      scales: {
        xAxes: [{
          gridLines : {
            display : false,
          }
        }],
        yAxes: [{
          gridLines : {
            display : false,
          }
        }]
      }
    }

    // This will get the first returned node in the jQuery collection.
    var areaChart       = new Chart(areaChartCanvas, { 
      type: 'line',
      data: areaChartData, 
      options: areaChartOptions
    })

这是上面图表的HTML结构

            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">Area Chart</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                </div>
              </div>
              <div class="card-body">
                <div class="chart">
                  <canvas id="areaChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                </div>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->

面积图

我用这个html结构创建了一个包含4个不同图表的组件。组件的外观是正确的，但是，它们内部都是空的，因为我不能使用上面的Javascript代码。我该怎么办？如何在特定组件中实现相关html结构的javascript代码

我还尝试了一个数据表。在这个表中有一些动态特性，如分页、升序和降序等，但我不允许查看和使用它们，因为它们是基于javascript文件工作的

数据表使用了3个javascript文件和两个css文件。我将它们全部添加到public/index.html文件夹中，并创建了一个组件DataTable.vue

我有这个数据表的静态HTML版本，它功能齐全，所以我可以对它运行一些测试。为了使用数据表的功能，我需要以下脚本

<script>
  $(function () {
    $("#example1").DataTable({
      "responsive": true,
      "autoWidth": false,
    });
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "responsive": true,
    });
  });
</script>

$（函数（）{
$（“#示例1”）.DataTable({
“响应”：正确，
“自动宽度”：false，
});
$（'#示例2'）。数据表({
“分页”：正确，
“长度变化”：错误，
“搜索”：错误，
“排序”：正确，
“信息”：正确，
“自动宽度”：false，
“响应”：正确，
});
});

---

但我不知道如何在Vue组件中实现这些脚本。我该怎么办？

在您的

图表.vue

文件中，如果您还没有

块，请将其添加到

下面：

<script>
    export default {
        mounted() {
            // Your Chart JS code
        }
    }
</script>

导出默认值{
安装的（）{
//您的图表JS代码
}
}

您是否尝试将其添加到某个组件生命周期挂钩中，例如，

beforeMount（）

？不，我实际上不知道如何做现在脚本看起来像导出默认值{name:“Chart”，mounted（）{$（function（）{$（“#example1”）.DataTable（{“responsive”：true，“autoWidth”：false，}）$数据表（{“paging”：true，“lengthChange”：false，“search”：false，“ordering”：true，“info”：true，“autoWidth”：false，“responsive”：true，}）；}它给出了以下错误464:5错误“$”未定义没有定义您是否在全局范围内的某个地方导入/定义了jQuery。