如何在 Vue 组件中使用 JavaScript

Question

我需要在我的 Vue 组件中放置一些图表和统计表，但它们都是使用纯 JavaScript 函数创建的，并且它们的上下文是使用 jQuery 方法获取的。 我正在为我的图表使用 ChartJS。 我将 html 部分放在组件 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>

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

Answer 1

在您的Chart.vue文件中，如果您还没有<script>块，请将其添加到您的<template>下方：

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