目的
vue.jsは公式の日本語ガイドがかなり充実したものになっているが、HTML,CSS,JSの知識の前提を中レベルとしている。
ここではそれよりもさらに低いレベルでも理解できるようにまとめていく。
※翻訳の関係なのか、日本語がやや変な部分も補完していく。
※自己学習かねてのため、回りくどい部分あり
準備
index.htmlを作成し、最低限のコードを書く
サンプルではjsは外部ファイルには書かずにhtmlファイルに記述する。
index.htmlにVue.jsの読込をする。
index.html
<html>
<head>
<meta http-equiv='Content-Style-Type' content='text/javascript'>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
</body>
</html>
宣言的レンダリング
レンダリング…
ここでいうレンダリングとは、htmlなどのコードを”整形して”ブラウザに画面を”表示させる”ことをいう。
サンプル１
index.html
<html>
<head>
<meta http-equiv='Content-Style-Type' content='text/javascript'>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
let app = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
</body>
</html>
細かく解説
①htmlのdivにappというIDを付与
②中括弧2つで囲み{{ message }}と入れる
③new Vue({})の中にターゲットとなるIDとデータを入れる
④変数appに代入
復習
<html>
<head>
<meta http-equiv='Content-Style-Type' content='text/javascript'>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div class="class">
{{ message }}
</div>
<script>
let sampleVue = new Vue({
el: '.class',
data: {message: 'Hello Vue!'}
})
</script>
</body>
</html>
先程divにIDを指定していたが、classに対応させることもできる。
サンプル２
要素の属性を束縛する
<html>
<head>
<meta http-equiv='Content-Style-Type' content='text/javascript'>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app-2">
<span v-bind:title="message">
Hover your mouse over me for a few seconds
to see my dynamically bound title!
</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
</script>
</body>
</html>
細かく解説
①サンプル１と同様にIDを付与したdivを用意し、その中にインライン要素のspanタグを挿入。
②spanタグにはv-bindというvue.js独自の属性を与え、さらにtitle属性にmessageプロパティを付与。
③title属性のmessageでbind(結び付けている)要素に対して変数app2の処理を行う
※Date().toLocaleString()はローカライズした文字列で日時を表示するメソッド
復習
<html>
<head>
<meta http-equiv='Content-Style-Type' content='text/javascript'>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app-2">
<span v-bind:title="message">
文字にカーソルを当てると解説がでます
</span>
</div>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: 'この解説はサンプルです'
}
})
</script>
</body>
</html>
わかりやすく日本語で、より単純化させるとこういう感じ。
条件処理とループ
サンプル３
要素の有無を切り替える
<html>
<head>
<meta http-equiv='Content-Style-Type' content='text/javascript'>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app-3">
<span v-if="seen">
Now you see me
</span>
</div>
<script>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
</script>
</body>
</html>
細かく解説
①サンプル２で出てきたv-vindと同様に、vue.js独自の属性であるv-ifを定義
②v-idのseenプロパティがtrueのときのみデータを表示させている。
サンプル４
アイテムのリストを配列内のデータを使って表示する
<html>
<head>
<meta http-equiv='Content-Style-Type' content='text/javascript'>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
</script>
</body>
</html>
細かく解説
①v-for属性を使ってtodosの中にある配列のテキストを取得している。
ユーザー入力の制御
v-on属性を使う
<html>
<head>
<meta http-equiv='Content-Style-Type' content='text/javascript'>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
