前回のviewからvueの機能を追加して完成させましょう。 リストを表示する Todoリストの表示を行なっていきましょう 前回は <ul> <li> <span>Todo1</span> <button>Return</button> <button>Delete</button> </li> <li> <span>Todo2</span> <button>Return</button> <button>Delete</button> </li> <li> <span>Todo3</span> <button>Return</button> <button>Delete</button> </li></ul>

まずviewから作成します。 => vueの機能をあまり使用せずに見た目を作成します。 ファイル構成 今回はシンプルにします。 components --- Complete.vue // 完了したTodoリスト |- Imcomplete.vue // 未完了のTodoリスト App.vue こちらの2ファイルを使用しま…

.vueファイルの書き方 <template> // ここにHTMLを記述 </template> <script> export default { // ここにVue Scriptを記述 } </script> <style> // ここにCSSを記述 </style> 別の.vueファイルを読み込む <script> import VueFile from "相対パス" export default { components: { VueFile } } </script> ファイルが増える場合はコ…

CodeSandboxでTodoリストを作ってみましょう Vueの基礎 - Vue.js勉強記 ここで学んだことを活かせれば作れるはず 大まかな仕様 ・input tagにTodoを入力する ・Add Todo ボタンをクリックしたらimcomplete領域に表示する ・imcomplete領域にあるTodoのComple…

自分のPCに入れたくない人はここで開発するのが良いかも CodeSandbox: Online IDE for Rapid Web Development Vue CLIのインストール $ npm install -g @vue/cli プロジェクト作成 $ vue create vue-project 色々質問があるけど、今回は適当に $ cd vue-proj…

Hello World https://jsfiddle.net/shogo_t2525/w5m9qLd8/ ・elオプションにDOMを指定 ・dataオプションにリアクティブにするオブジェクト リアクティブ https://jsfiddle.net/shogo_t2525/w5m9qLd8/ オブジェクトの変更を検知してhtmlの表示を更新する data…