为什么我的 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 所在位置的相对路径。