vueの最初の方をやった
vueの最初の数ページを読んだ後に、小さいシングルページアプリケーションを書いてみた。ミラクルキラッツなので。
なるほど〜って言いながら、書いてた。appにだけコンポーネントを追加しようと思ってたんだけど、それは無理だった。残念。 JSの辞書のキーが文字列限定なのがpythonと違って気をつけなきゃいけない点かなぁと。
フロントはまだまだ覚えることが多くて大変だなぁと思った。
やる気はまだまだあるからできるところまでやろう!!!と思っている。
昨日と違った自分に。1 歩ずつでも前に進もう。
<html> <head> <meta charset="UTF-8"> <title>todo</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>{{ title }}</h1> <ol> <todo-item v-for="item in todoList" v-bind:todo="item"></todo-item> </ol> <input v-model="newTodo"> <button v-on:click="addNewTodo">Add</button> </div> <script> Vue.component('todo-item',{ props:['todo'], template:'<li>{{ todo.text }}</li>' }) var app = new Vue({ el:"#app", data:{ newTodo:'', title:'Todo App', todoList:[ {'text':"todo1"}, {'text':"todo2"}, {'text':"todo3"}, ] }, methods:{ 'addNewTodo':function(){ this.todoList.push({text:this.newTodo}) this.newTodo = '' } } }) </script> </body> </html>