Error al mostrar vue.js Uncaught ReferenceError: Vue is not defined

publicado por: Anonymous

Estoy empezando con Vue.js. Tengo mi archivo index.html y mi archivo index.js.

Me da un error al mostrar el archivo index.html en el navegador.

Archivo index.html

_x000D_

_x000D_

<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
    <head>_x000D_
        <meta charset="UTF-8">_x000D_
        <title>LearnVue.js</title>_x000D_
    </head>_x000D_
<body>_x000D_
_x000D_
<div id="app">_x000D_
    {{ message }}_x000D_
</div>_x000D_
<div id="app-2">_x000D_
    <span v-bind:tittle="message">_x000D_
    Hover your mouse over me for a few seconds_x000D_
    to see my dynamically bound title!_x000D_
    </span>_x000D_
</div>_x000D_
<div id="app-3">_x000D_
    <span v-if="seen">Now you see me</span>_x000D_
</div>_x000D_
_x000D_
<div id="app-4">_x000D_
    <ol>_x000D_
        <li v-for="all in all">_x000D_
            {{all.text}}_x000D_
        </li>_x000D_
    </ol>_x000D_
</div>_x000D_
<div id="app-5">_x000D_
    <p>{{message}}</p>_x000D_
    <button v-on:click="reverseMessage">Reverse Message</button>_x000D_
</div>_x000D_
_x000D_
<script type="text/javascript" src="index.js"></script>_x000D_
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>_x000D_
</body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

Archivo index.js

_x000D_

_x000D_

var app = new Vue({_x000D_
    el: '#app',_x000D_
    data: {_x000D_
        message: 'Hello Vue!'_x000D_
    }_x000D_
_x000D_
});_x000D_
_x000D_
var app2 = new Vue({_x000D_
    el: '#app-2',_x000D_
    data: {_x000D_
        message: 'You loaded this page on ' + new Date().toLocaleString()_x000D_
    }_x000D_
});_x000D_
_x000D_
var app3 = new Vue({_x000D_
   el: '#app-3',_x000D_
    data: {_x000D_
       seen: true_x000D_
    }_x000D_
});_x000D_
_x000D_
var app4 = new Vue({_x000D_
    el: '#app-4',_x000D_
    data: {_x000D_
        all: [_x000D_
            {text: 'Learn JavaScript'},_x000D_
            {text: 'Learn Ruby on Rails'}_x000D_
        ]_x000D_
    }_x000D_
});_x000D_
_x000D_
var app5 = new Vue({_x000D_
    el: 'app-5',_x000D_
    data: {_x000D_
        message: 'Hello Vue!'_x000D_
    },_x000D_
    methods: {_x000D_
        reserveMessage: function () {_x000D_
            this.message = this.message.split('').reverse().join('')_x000D_
        }_x000D_
    }_x000D_
});

_x000D_

_x000D_

_x000D_

solución

1- Este error sale por no hacer referencia al archivo js de Vue.

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

Luego puedes hacer uso:

<script>
      var demo = new Vue({
          el: '#demo',
          data: {
              message: 'Hello Vue.js!'
          }
      })
</script>

Para el error que tienes intenta cambiar de posición las referencias js de esta manera

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="index.js"></script>
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *