javascript - 为什么我的 javascript 测验无法正确加载？

Question

我正在尝试做一个简单的测验。不知怎的，我总是有一个错误

"Vue is not defined"

然而，它实际上是在那里定义的。我不太明白是什么原因。网站链接为here 。 该脚本位于页面的头部。我尝试使用 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

如果您检查源代码of your site您将看到 Vue 的脚本未加载。因此给出错误 Vue 未定义。在页面头部添加以下脚本。

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

您可以阅读here ，如何在项目中使用Vue。