はじめに
こんにちは、kakutekiと申します。初投稿です。
今回は、森 巧尚さんの書かれた「動かして学ぶ！ Vue.js 開発入門」でVue.jsを勉強したのでまとめておきたいと思います。
サンプルプログラムは配布できませんので自分で作成したものを書いていきたいと思います。
vue.jsとは
JavaScriptのライブラリの1つでシンプルで、とても分かりやすく簡単です。
最低構成
vue.jsを動かす為には以下のコードが最小構成になります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>vue.js最小構成</h2>
<div id="app">
</div>
<script>
new Vue({
el: "#app",
data: {
},
methods: {
},
components: {
},
});
</script>
</body>
</html>
部位ごとに解説
vue.jsを動かす為に今回は、CDNという方法でインポートします。
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
vue.jsで、いじるdivタグです。あとからvue.js側からタグを選択してあげます。
<div id="app">
</div>
ここがvue.jsの部分です！ここだけ下の方で細かく解説します。
new Vue({
el: "#app",
data: {
},
methods: {
},
components: {
},
watch: {
},
});
vue.js部分を細かく解説
new Vueで新しいVueインスタンスを作成します。
new Vue({
});
いじる部分のタグを指定して呼び出します。今回はdivタグのappを指定して呼び出します。
el: "#app",
ここには、関数を定義します。
data: {
},
ここには、処理を書きます。
methods: {
},
ここでは、処理をコンポーネントとして関数化してmethodsから呼び出します。
components: {
},
関数のデータの変化を監視します。
watch: {
},
何はともあれ何か作ってみよう
今回はToDoリストアプリを作りました。下のコードをコピーしHTMLファイルにペーストし開いて見てください。
↓こんな感じになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>ToDoリスト</h2>
<div id="app">
<div v-for="todo in todos">
<label>
<input type="checkbox" v-model="todo.done" v-on:click="cleanToDo">
<spen v-bind:class="{donestyle:todo.done}"> {{ todo.text }} </spen>
</label>
</div>
<input type="text" v-model.trim="addtext" v-on:keyup.enter="addToDo" placeholder="ここにタスク入力">
<p>あとタスクが {{ todos.length }} 個</p>
</div>
<script>
new Vue({
el: "#app",
data: {
addtext: "",
todos: [{
done: false,
text: "パソコンを買う"
},
{
done: false,
text: "勉強する"
},
]
},
methods: {
addToDo: function() {
if (this.addtext) {
this.todos.push({
done: false,
text: this.addtext
});
this.addtext = "";
}
},
cleanToDo: function() {
this.todos = this.todos.filter(function(val) {
return val.done == false;
})
}
},
})
</script>
<style>
</style>
</body>
</html>
どんな風に動作する？
↓ 初期画面です。最低構成のToDoリストです
↓ 一番上のタスクを選択している状態です。
↓ 同じタスクもしくは、他のタスクをクリックすると削除されます
↓ テキストボックスにタスクを入力します。
↓ テキストを打ち終えエンターを押すとタスクが追加されます。
どのような仕組み？
head部分です。script srcでDCNという方法でVue.jsを読み込んでいます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
ここからHTMLのbody部分です。todo.textという関数にタスクの文字データが入ります。
inputタグの部分ではエンターキーを押すとaddToDoコンポーネントが呼び出され書き込んだ文字データが関数に入ります。
<body>
<h2>ToDoリスト</h2>
<div id="app">
<div v-for="todo in todos">
<label>
<input type="checkbox" v-model="todo.done" v-on:click="cleanToDo">
<spen v-bind:class="{donestyle:todo.done}"> {{ todo.text }} </spen>
</label>
</div>
<input type="text" v-model.trim="addtext" v-on:keyup.enter="addToDo" placeholder="ここにタスク入力">
<p>あとタスクが {{ todos.length }} 個</p>
</div>
ここからがVue.jsの部分です。Vue.jsはJavaScriptのライブラリですので、scriptタグで囲んであげます。
vue.jsの部分のみ細かく下で解説してます。
<script>
new Vue({
el: "#app",
data: {
addtext: "",
todos: [{
done: false,
text: "パソコンを買う"
},
{
done: false,
text: "勉強する"
},
]
},
methods: {
addToDo: function() {
if (this.addtext) {
this.todos.push({
done: false,
text: this.addtext
});
this.addtext = "";
}
},
cleanToDo: function() {
this.todos = this.todos.filter(function(val) {
return val.done == false;
})
}
},
})
</script>
ここでHTMLの部分で定義した、appと付けたdivタグを呼び出します。
el: "#app",
ここでは関数定義を行いました。addtextはテキストボックスからの文字データを受け付ける関数です。後からtodosの配列にデータを入れます。
todosに表示するタスクを入れます。タスクの文字データとチェックボックスが選択されているかどうかを配列に入れます。
data: {
addtext: "",
todos: [{
done: false,
text: "パソコンを買う"
},
{
done: false,
text: "勉強する"
},
]
},
ここにはメソッドがあります。タスクを追加する「addToDoメソッド」とタスクを削除する「cleanToDoメソッド」の2つがあります。
「addToDoメソッド」ではif文で文字が入っているか確認し、文字が入っていると処理が始まります。if文の中ではaddTextという関数に入っている文字データを配列データに入れる処理を行います。
if文の処理にかかわらず="";で関数をリセットします。
methods: {
addToDo: function() {
if (this.addtext) {
this.todos.push({
done: false,
text: this.addtext
});
this.addtext = "";
}
},
cleanToDo: function() {
this.todos = this.todos.filter(function(val) {
return val.done == false;
})
}
},
})
最後に
今回はVue.jsについて記事を書かせて頂きました。私はC言語が一番慣れているのですが、JavaScriptぽさが消えC言語ぽいなと思いました。