发表新帖
发表新帖

Vue is not defined

后端 未结
关注
6 585
一向
一向 2021-02-07 04:48

I am trying to build a demo app with Vue.js. What I am getting is an odd error that Vue is not defined.
相关标签:
6条回答
  • 青春惊慌失措
    2021-02-07 05:27

    I found two main problems with that implementation. First, when you import the vue.js script you use type="JavaScript" as content-type which is wrong. You should remove this type parameter because by default script tags have text/javascript as default content-type. Or, just replace the type parameter with the correct content-type which is type="text/javascript".

    The second problem is that your script is embedded in the same HTML file means that it may be triggered first and probably the vue.js file was not loaded yet. You can fix this using a jQuery snippet $(function(){ /* ... */ }); or adding a javascript function as shown in this example: 

    // Verifies if the document is ready
function ready(f) {
  /in/.test(document.readyState) ? setTimeout('ready(' + f + ')', 9) : f();
}

ready(function() {
  var demo = new Vue({
    el: '#demo',
    data: {
      message: 'Hello Vue.js!'
    }
  })
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <p>{{message}}</p>
  <input v-model="message">
</div>

    0 讨论(0)
  • 半阙折子戏
    2021-02-07 05:33

    I got this error but as undefined due to the way I included js files

    Initailly i had 

    <script src="~/vue/blade-account-update-credit-card-vue.js" asp-append-version="true"></script>
<script src="~/lib/vue/vue_v2.5.16.js"></script>

    in the end of my .cshtml page GOT Error Vue not Defined but later I changed it to

    <script src="~/lib/vue/vue_v2.5.16.js"></script> 
<script src="~/vue/blade-account-update-credit-card-vue.js" asp-append-version="true"></script>

    and magically it worked. So i assume that vue js needs to be loaded on top of the .vue

    0 讨论(0)
  • 别跟我提以往
    2021-02-07 05:36

    jsBin demo

    1. You missed the order, first goes: 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>

    and then: 

    <script>
    var demo = new Vue({
        el: '#demo',
        data: {
            message: 'Hello Vue.js!'
        }
    });
</script>
    1. And type="JavaScript" should be type="text/javascript" (or rather nothing at all)
    0 讨论(0)
  • 遇见更好的自我
    2021-02-07 05:41

    Sometimes the problem may be if you import that like this:

    const Vue = window.vue;

    this may overwrite the original Vue reference.

    0 讨论(0)
  • 暖寄归人
    2021-02-07 05:42

    I needed to add the script below to index.html inside the HEAD tag. 

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

    But in your case, since you don't have index.html, just add it to your HEAD tag instead.

    So it's like:

    <!doctype html>
<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
...
</body>
</html>
    0 讨论(0)
  • 无人及你
    2021-02-07 05:48

    try to fix type="JavaScript" to type="text/javascript" in you vue.js srcipt tag, or just remove it. Modern browsers will take script tag as javascript as default.

    0 讨论(0)
 看不清?
提交回复
热议问题