vueの最初の方をやった

vueの最初の数ページを読んだ後に、小さいシングルページアプリケーションを書いてみた。ミラクルキラッツなので。

f:id:b1u3:20181028165459p:plain

f:id:b1u3:20181028165515p:plain

なるほど〜って言いながら、書いてた。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>