web-dev-qa-db-ja.com

Vueは定義されていません

Vue.jsでデモアプリを構築しようとしています。私が得ているのは、Vueが定義されていないという奇妙なエラーです。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue JS Intro</title>
</head>
<body>
    <div id="demo">
        <p>{{message}}</p>
        <input v-model="message">
    </div>

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

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

ここで何が恋しかったですか？これは公式ウェブサイトからライブラリをダウンロードし、使用して同じ結果を得たため、CDNの問題ではありません。

index.html：15 Uncaught ReferenceError：Vueは定義されていません

javascripthtmlvue.js
11
Vladimir Hraban

jsBinデモ

  1. あなたは注文を逃しました、最初に行きます：
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>

その後：

<script>
    var demo = new Vue({
        el: '#demo',
        data: {
            message: 'Hello Vue.js!'
        }
    });
</script>
  1. そして、type="JavaScript"はtype="text/javascript"（または、まったく何もありません）
20
Roko C. Buljan

vue.jsスクリプトタグのtype="JavaScript"をtype="text/javascript"に修正するか、単に削除してください。最新のブラウザは、デフォルトとしてjavascriptとしてscriptタグを使用します。

3
Sparkmorry

私はこのエラーを受け取りましたが、jsファイルを含める方法のために未定義として

イニタリー

<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>

.cshtmlページの最後にGOTエラーVue not Definedが、後で変更しました

<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>

そして魔法のように働いた。だから、vue jsを.vueの上にロードする必要があると思います

1
Adi_Pithwa

次のようなimportの場合に問題が発生する場合があります。

const Vue = window.vue;

これにより、元のVue参照が上書きされる場合があります。

1
T.Todua

HEADタグ内のindex.htmlに以下のスクリプトを追加する必要がありました。

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

ただし、あなたの場合、index.htmlがないため、代わりにHEADタグに追加してください。

それは次のようなものです：

<!doctype html>
<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
...
</body>
</html>
0
Vince Banzon

その実装には2つの主な問題が見つかりました。まず、_vue.js_スクリプトをインポートするとき、_type="JavaScript"_を_content-type_として使用しますが、これは間違っています。デフォルトではtypeタグにはデフォルトの_text/javascript_として_content-type_があるため、このscriptパラメーターを削除する必要があります。または、typeパラメーターを_content-type_である正しい_type="text/javascript"_に置き換えるだけです。

2番目の問題は、スクリプトが同じHTMLファイルに埋め込まれているため、最初にトリガーされる可能性があり、おそらく_vue.js_ファイルがまだロードされていないことです。これを修正するには、jQuery snippet $(function(){ /* ... */ });を使用するか、この例に示すようにjavascript関数を追加します。

_// 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
Teocci