Last active
December 28, 2016 16:20
-
-
Save acro5piano/f1acfad2441de1e6576718a8f63d7b0f to your computer and use it in GitHub Desktop.
Vue.jsでTODOリスト（クライアントサイドのみ） ref: http://qiita.com/acro5piano/items/a7c41824d88cddbe06f3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var app = new Vue({ | |
| el: '#app', | |
| data: { | |
| tasks: [ | |
| { text: 'Learn JavaScript', editable: false}, | |
| { text: 'Learn Vue' , editable: false}, | |
| { text: 'Build todo list', editable: false}, | |
| ], | |
| newTaskName: '', | |
| }, | |
| methods: { | |
| addTask: function () { | |
| this.tasks.push({ text: this.newTaskName, editable: false}) | |
| this.newTaskName = '' | |
| }, | |
| deleteTask: function (index) { | |
| this.tasks.splice(index, 1) | |
| }, | |
| editTask: function (index, text) { | |
| this.tasks[index].text = text | |
| this.tasks[index].editable = false | |
| }, | |
| makeTaskEditable: function (index) { | |
| this.tasks[index].editable = true | |
| }, | |
| } | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| sudo npm install -g gulp | |
| npm install --save-dev gulp browser-sync |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| gulp serve |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var gulp = require('gulp') | |
| var browserSync = require('browser-sync').create() | |
| gulp.task('serve', function() { | |
| browserSync.init({ | |
| server: { | |
| baseDir: "./" | |
| } | |
| }) | |
| gulp.watch("./*").on('change', browserSync.reload) | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head id="head"> | |
| <title>Todo list</title> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <h2>Task list</h2> | |
| <table> | |
| <tr v-for="(task, index) in tasks"> | |
| <td> | |
| <p v-if="!task.editable">{{ task.text }}</p> | |
| <input v-if="task.editable" | |
| v-model="task.text" | |
| v-on:keyup.enter="editTask(index, task.text)"> | |
| </td> | |
| <td> | |
| <button v-on:click="makeTaskEditable(index)"> | |
| edit | |
| </button> | |
| </td> | |
| <td> | |
| <button v-on:click="deleteTask(index)">delete</button> | |
| </td> | |
| </tr> | |
| </table> | |
| <h2>Add new task</h2> | |
| <input v-on:keyup.enter="addTask" v-model="newTaskName"> | |
| </div> | |
| </body> | |
| <script src="https://unpkg.com/vue/dist/vue.js"></script> | |
| <script src="./app.js"></script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment