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