如何在 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 -->

我创建了一个带有 4 个不同图表的 html 结构的组件。该组件的外观是正确的，但同样，它们内部都是空的，因为我不能使用上面的 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>