ブラウザでの動作確認について


#1

下記3ファイル(index.html、main.css、main.js)を作成し、ブラウザで動作確認を行ったところ、
Vue.jsが動作していない結果が得られてしまいました。
jsFiddleでは所望の動作が得られていることを確認しています。
不勉強で申し訳ありませんが、ブラウザで動作確認を行うために必要な手順をご教授くださると幸いです。

<!-- index.html -->
<!DOCTYPE html>
<html>
   <head>
       <meta charset=“utf-8”>
       <title>To Do list</title>
       <script src=“https://www.gstatic.com/firebasejs/5.7.0/firebase.js“></script>
       <script>
           // Initialize Firebase
           var config = {
               apiKey: “AIzaSyDo5Ip0KXjLk3_y88gXpE4zp_KLlViu0zU”,
               authDomain: “vue-firebase-aa4a9.firebaseapp.com”,
               databaseURL: “https://vue-firebase-aa4a9.firebaseio.com”,
               projectId: “vue-firebase-aa4a9",
               storageBucket: “vue-firebase-aa4a9.appspot.com”,
               messagingSenderId: “1019607646909"
           };
           firebase.initializeApp(config);
       </script>
   </head>
   <body>
       <div id=“app”> 
           <h2>ToDo List</h2> 
           <form v-on:submit.prevent>
               <input type=“text” v-model=“newItem”> 
               <button v-on:click=“addItem”> 
               Add 
               </button>
           </form>
           <ul>
               <li v-for=“(todo, index) in todos”> 
                   <input type=“checkbox” v-model=“todo.isDone”> 
                   <span v-bind:class=“{ done: todo.isDone }“>{{ todo.item }}</span>
                   <button v-on:click=“deleteItem(index)“>Delete</button> 
               </li>
           </ul>
       </div>
       <script src=“https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js”></script>
   </body>
</html>

/* main.css */
#app ul { 
   list-style: none;
}

#app li > span.done { 
   text-decoration: line-through;
}

// main.js
var app = new Vue({
   //options
   el: ‘#app’, 
   data: {
       newItem: “”,
       todos: []
   },
   methods: {
       addItem: function(event) { 
           if(this.newItem==“”) return; 

           var todo = { 
               item: this.newItem,
               isDone: false 
           };
           this.todos.push(todo); 
           this.newItem = “” 
       },
       deleteItem: function(index) { 
           // alert(index);
           this.todos.splice(index, 1) 
       }
   }
})

#2

こんにちは。はじめまして。

HTMLのコード内に、main.js/main.cssを読み込む記述がないのですが、
質問する際の記載漏れでしょうか?

そうでなければ、main.jsを以下のようにvue.jsの後に読み込まれてみてはどうでしょうか?

<script src=“https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js”></script>
の後に、
<script src=“https://example.com/main.js”></script>


#3

idani 様

ご回答ありがとうございます。
参考にさせていただきます。