vueのがまだ全然ですが、部品を使ってみたいので、ソースコードを張り付けておく
掲示板アプリ作るなら使えそうな部品
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My Vue App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app" class="container">
<h1>My Todos</h1>
<ul v-if="todos.length">
<li v-for="(todo, index) in todos">
<input type="checkbox" v-model="todo.isDone">
<span :class="{done:todo.isDone}">{{ todo.title }}</span>
<span @click="deleteItem(index)" class="command">[x]</span>
</li>
</ul>
<ul v-else>
<li>Nothing to do yay!</li>
</ul>
<form @submit.prevent="addItem">
<input type="text" v-model="newItem">
<input type="submit" value="Add">
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js
(function() {
'use strict';
var vm = new Vue({
el: '#app',
data: {
newItem: '',
todos:[]
},
methods: {
addItem: function() {
var item = {
title: this.newItem,
isDone: false
};
this.todos.push(item);
this.newItem = '';
},
deleteItem: function(index) {
if (confirm('are you sure?')) {
this.todos.splice(index, 1);
}
}
}
});
})();