為什么我的 javascript 測驗無法正確加載？

Question

我正在嘗試做一個簡單的測驗。 不知何故我總是有一個錯誤

“未定義 Vue”

但是，它實際上是在那里定義的。 我不完全了解是什么原因。 網站鏈接在這里。 腳本就在頁面的開頭。 我曾嘗試將 javascript 代碼用作單獨的文件，但錯誤是相同的。 我是 javascript 的新手，所以任何幫助將不勝感激。

"use strict";

window.onload = function() {

  var quiz = {
    title: 'What superhero are you?',

    questions: [{
        text: "How would you describe your personality?",
        responses: [{
            text: 'Im serious and dark',
            value: 'Batman'
          },
          {
            text: 'Arrogant, but charming',
            value: 'Superman'
          },
          {
            text: 'Fun and easy going',
            value: 'The Flash'
          }
        ]
      },
      {
        text: "Why did you want to become a superhero?",
        responses: [{
            text: 'For the thrills',
            value: 'The Flash'
          },
          {
            text: 'For justice',
            value: 'Batman'
          },
          {
            text: 'For popularity',
            value: 'Superman'
          }
        ]
      },
      {
        text: "Who would you most hang around with?",
        responses: [{
            text: 'Wonder Woman',
            value: 'Superman'
          },
          {
            text: 'Green Arrow',
            value: 'The Flash'
          },
          {
            text: 'Robin',
            value: 'Batman'
          }
        ]
      },
      {
        text: "What's your favourite colour?",
        responses: [{
            text: 'Black',
            value: 'Batman'
          },
          {
            text: 'Red',
            value: 'The Flash'
          },
          {
            text: 'Blue',
            value: 'Superman'
          }
        ]
      },
      {
        text: "When do you help people?",
        responses: [{
            text: 'Every chance I can',
            value: 'The Flash'
          },
          {
            text: 'At night',
            value: 'Batman'
          },
          {
            text: 'When they need me to',
            value: 'Superman'
          }
        ]
      },
    ]
  };


  var app = new Vue({
    el: '#app',
    data: {
      quiz: quiz,
      questionIndex: 0,
      userResponses: Array()
    },
    methods: {
      // Go to next question
      next: function() {
        this.questionIndex++;
        console.log(this.userResponses);
      },
      // Go to previous question
      prev: function() {
        this.questionIndex--;
      },
      score: function() {
        //find the highest occurence in responses
        var modeMap = {};
        var maxEl = this.userResponses[0],
          maxCount = 1;
        for (var i = 0; i < this.userResponses.length; i++) {
          var el = this.userResponses[i];
          if (modeMap[el] == null)
            modeMap[el] = 1;
          else
            modeMap[el]++;
          if (modeMap[el] > maxCount) {
            maxEl = el;
            maxCount = modeMap[el];
          }
        }
        return maxEl;
      }
    }
  });
}

Answer 1

如果您檢查站點的源代碼，您將看到未加載 Vue 的腳本。 所以給出錯誤Vue沒有定義。 在頁面頂部添加以下腳本。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>

你可以在這里閱讀如何在你的項目中使用 Vue。

Answer 2

你實際上並沒有加載 Vue。 確保在實例化它的實例之前加載 Vue。

您可以使用 CDN 加載腳本，如 Ashish 所示，或者將腳本保存到本地計算機，並將其包含在您的頁面中。

<script src="/js/vue-2.5.22.min.js" type="text/javascript"/>

其中/js/vue-2.5.22.min.js是 Vue 所在位置的相對路徑。