Vue.jsでMustacheの中に、値が入ってこない。

Question

Vue.jsでMustacheの中で、うまく値が入ってこなくて困っています

Vue.jsの基本について教えてください。
Vue.jsのある入門本をやっていて、さっそく詰まってしまいました。

js

new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    // ボタンをクリックしたときのハンドラ
    increment: function () {
      this.count += 1
    }
  }
})

html

  <div id="app">
    <p>{{ count }}回クリックしたよ！ </p>
    <button v-on:click="increment">カウントを増やす</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

期待値としては、下記のとおりになるかと思います。
1回クリックしたよ！
2回クリックしたよ！
3回クリックしたよ！

このカウントが上記のように増えていってほしいのに、
{{ count }}のままなのです。
countという文字列として入ってきてしまいます。

何が問題なのでしょうか？

とても基本的で恥ずかしい質問なので、
何卒宜しく御願いいたします。

Answer 1

記述しているコードについて、もしかしたら重要と思われない箇所については記述していないのかな、と思いますが、仮に上記のコードで全てということでしたら、
ご自身で書いたvuejsファイルをhtmlに読み込ませる記述が抜けているかと思われます。
cdnでvue.jsファイルを読み込んだ後に、ご自身で作成したvuejsファイルを読み込ませる必要があるかと。

HTML

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

のような(名前のmyscript.jsというのは適当です。)

Comments

[gksh7]

ありがとうございます。
読み込んでいるjsはあったのですが、
なんか、キャッシュぽいのが残っていました。

でもjs自体の見直すという点で、解決に大変役立ちました。

ありがとうございます。