ファイルの準備
- 準備されているコードをダウンロードしてデスクトップに配置した
- 最初の状態は下記
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js 3</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/vue@3.1.5"></script>
<script src="js/main.js"></script>
</body>
</html>
main.css
なにも記述なし
main.js
const app = Vue.createApp({
data: () => ({
})
})
app.mount('#app')
index.html
- 空のテンプレートあり
- vue.jsの読み込みあり
- main.cssとmain.jsの読み込みあり
main.js
- 空のVueインスタンスを作成
-
#appにマウントまでを行っている
主要な要素を配置する
- 見出し、テキスト入力欄、追加ボタンを配置する
- formタグを追加、中にinputとbuttonを配置
<div id="app">
<h2>TODO List</h2>
<form>
<input type="text">
<button>Add</button>
</form>
</div>
追加ボタンのイベントハンドリング
- Addボタンを押したらイベントハンドラのメソッドを呼ぶ処理を記述
<div id="app">
<h2>TODO List</h2>
<form>
<input type="text">
<button v-on:click="addItem">Add</button>
</form>
</div>
const app = Vue.createApp({
data: () => ({
}),
methods: {
addItem: function(event){
console.log('Clicked!')
}
}
})
app.mount('#app')
- htmlのbutton要素に
v-on:click="addItem"を追加 - jsにmethodsを追記し、イベントを記述
- ※addItemの引数に
eventを記述。必要な時に利用できるために記述してるだけで今は意味がない！
- Addボタンを押すとコンソールに一瞬「Clicked!」が表示されるがすぐ消える
→すぐにページがリロードされてしまっている
→form要素のsubmitイベントによってページがリロードされてしまっている
submitイベントを無効にしたい
<div id="app">
<h2>TODO List</h2>
<form v-on:submit.prevent>
<input type="text">
<button v-on:click="addItem">Add</button>
</form>
</div>
- formタグに追記→
v-on:submit.prevent -
preventは防ぐ・止めるという意味 - これでsubmitイベントが無効になる
- こちらでちゃんと「Clicked!」がコンソール表示される
データバインディングを行う
- inputのvalueをデータバインディングする実装を行う
const app = Vue.createApp({
data: () => ({
newItem: ''
}),
methods: {
addItem: function(event){
console.log('Clicked!')
}
}
})
app.mount('#app')
<div id="app">
<h2>TODO List</h2>
<form v-on:submit.prevent>
<input type="text" v-model="newItem">
<button v-on:click="addItem">Add</button>
</form>
<pre>{{ $data }}</pre>
</div>
- js側でdataオプションに追記
-
newItemを初期空で配置する - html側でinputタグにv-model追記→
v-model="newItem" - デバック用に
{{ $data }}も記入した
- 初期値は空の状態
- input内に入力するとdata側の値も変更されていることが確認できる
タスクの追加
- TODOのタスクを格納する配列を用意して、Addボタンがクリックされたら配列にタスクを格納していく処理を追記する
const app = Vue.createApp({
data: () => ({
newItem: '',
todos: []
}),
methods: {
addItem: function(event){
console.log('Clicked!')
let todo = {
item: this.newItem
}
this.todos.push(todo)
}
}
})
app.mount('#app')
- data内に空の配列
todosを配置する
→todos: []
- ボタンを押すと発生する「addItem」メソッドで、input要素に入力されている値と、データバインディングされているnewitemの値を配列に追加する処理を追記した
→オブジェクトとして配列に追加する
※タスク名、後ほどタスクの完了・未完了も管理していきたいため - 下記を追記している。ボタンを押すごとに下記が実行される↓↓↓
let todo = {
item: this.newItem
}
this.todos.push(todo)
変数todoに格納されているもの
→ キーが"item"、valueがnewItemつまりinput内に入力された値
-
<input type="text" v-model="newItem">このindexの記述により、inputに入力された値はリアルタイムでdataオプションの中のnewItemにも反映される - つまり、「Add」ボタンを押した瞬間に入力されている値が
item: this.newItemのnewItemの箇所に当てはまった状態で、変数todoに入る
↑↑↑※ここかなりむずかしい
this.todos.push(todo)の意味
→this（data内）のtodos配列にtodoを格納する
- 入力欄に「task1」と入力してAddボタンを押すと、
todos配列にオブジェクトで"item": "task1"が入る - 「task2」を入力、ボタンを押すと
"item": "task2"が入る
タスク追加後の文字列をクリアする
- タスク名を追加した後に入力欄に文字（task2）が残ってしまっている状態をクリアにする
const app = Vue.createApp({
data: () => ({
newItem: '',
todos: []
}),
methods: {
addItem: function(event){
console.log('Clicked!')
let todo = {
item: this.newItem
}
this.todos.push(todo)
this.newItem = ''
}
}
})
app.mount('#app')
- 末尾に
this.newItem = ''を追記 - これでタスク入力後、Addボタンを押すと入力欄の文字はクリアできるようになった