Vue で ToDo アプリケーションを実装する例

背景

まず最初に、私はフロントエンド開発の専門家ではないことを述べておきたいと思います。私の以前のコンテンツを読んだことがあるなら、私がバックエンド開発が得意であることはご存知でしょう。フロントエンド開発の経験は多少ありますが、熟練しているとは言えず、ほとんど精通していません。このシリーズを書く目的は、単純に好奇心からです。数年前は JQuery が主流だったフロントエンドの状況が、なぜ今こんなにも混沌としているのか、なぜ js が、その母体さえも認識できないほどひどく弄ばれているのか、興味があります。エントリーポイントとして vue を選んだ理由は、vue がシンプルで、基本的にデモを見るだけで始められるからです。vue は 3 大人気のフロントエンドフレームワークの 1 つなので、vue の実装方法さえ理解していれば、フロントエンドについて少しは理解できます。このアイデアに駆り立てられて、このシリーズが作成されました。

ここでの Vue の真似は、Vue のソースコードを読んで理解した上で、Vue を真似て書くということではありません。構文は Vue の構文のままですが、自分で実装する方法を見つけます。もちろん、Vue を参考にすることもできますが、フロントエンドレベルの私にとって、Vue を完全に理解するのは少し難しいです。したがって、Vue ソースコードの実装を理解したい場合、このシリーズは適していません。ただし、私のように、JS を少し知っていて、Vue ソースコードのどこから始めればよいかわからないが、Vue と同じ機能を実装する方法を知りたい場合は、私に従ってください。ソースコードを見るのではなく、自分で簡単な Vue を実装する方法を見つけます。

Vue ToDo アプリケーション

このシリーズのアイディアは、Vue を使用して簡単なアプリケーションを実装し、アプリケーション内で Vue 関連のコア機能を使用し、コードは変更せずに vue.js ファイルを独自の実装に置き換え、最終的に Vue と同じ効果を実現することです。ここでは、vue を使用して非常にシンプルな ToDo アプリケーションを実装します。コードは次のとおりです。

<html>
  <ヘッド>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <本文>
      <div id="アプリ">
          <input v-model="newTodo"></input>
          <button v-on:click="addTodo()">追加</button>
          <div>入力テキスト:{{newTodo}}</div>
          <ul>
              <div v-for="(todo,index) in todos" style="margin-bottom: 20px;">
                  <li style="float: left;margin-right: 20px;">
                      {{todo.text}}
                  </li>
                  <button v-on:click="deleteTodo(index)">削除</button>
              </div>
          </ul>
      </div>
      <スクリプト>
          var appx = 新しいVue({
              el: '#app',
              データ： {
                  新しいToDo: ''、
                  すべて: []
              },
              メソッド: {
                  追加Todo: 関数() {
                      this.todos.push({ テキスト: this.newTodo });
                      this.newTodo = '';
                  },
                  deleteTodo: 関数 (インデックス) {
                      this.todos.splice(インデックス、1);
                  }
              }
          })
      </スクリプト>
  </本文>
  </html>

効果は以下のとおりです。