業務でVue.jsを使えないとメンテ出来ない事があるので、とりあえず使って概要を抑える
ことにしました。
とりあえず使えるようにする設定
インストール
Vue.js公式のインストールの項目に書いてある、CDNでのインストールを試します。
CDNでのインストールであれば、htmlのhead内に以下を書くだけで使用出来ました。
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>
vueインスタンスの生成
以下を追加する事でVue.jsインスタンスを作成する事が出来、実際に使用していく事が出来ます。
</body>
<script>
var app = new Vue({
// newしてvueインスタンスというものを作る。vueの処理はここに書いていく。
})
</script>
今回はとりあえず使ってみる事が目的なので、Vue.jsの構文を</body>の下あたりに直接<script></script>で書いてしまいます。
データバインディング
データバインディングとは、データを同期させて表示に反映させる事。
まず、vueインスタンス内にel: '#id名'と書き、html内のidと紐づけてみます。
<body>
<div id="app">
</div>
</body>
<script>
var app = new Vue({
el: '#app' // id="app"を指定して、その配下のhtmlにVue.jsを反映させる
})
</script>
</html>
データオプション作成とhtml内での展開
Vue.jsではvueインスタンス内にdataオプションでデータを定義した後、html内で{{ 展開したいdataのキー }}のように書く事でデータを展開して表示出来ます。
{{}}で囲って書く事をマスタッシュ構文と言います。
<body>
<div id="app">
{{ greet }} // 3. 作ったデータをマスタッシュ構文で展開
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: { // 1. データオプションでデータを用意する
greet: 'Hello Vue.js' // 2. greetというキーで'Hello Vue.js'というデータを作る
}
})
</script>
</html>
完成
最終的に以下のようになります。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>
<body>
<div id="app">
{{ greet }}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
greet: 'Hello Vue.js'
}
})
</script>
</html>
Vue.jsの基本構文
先ほどの完成形を以下のようにテンプレートとして使い、Vue.jsの基本構文を使ってみました。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>
<body>
<!--ここにhtmlとVue.jsの構文を書く-->
</body>
<script>
// ここにVue.jsのデータを設定する
</script>
</html>
v-bind
vueオブジェクト内に定義したdataオプションのキーをv-bind:valueに設定する事でデータを表示します。
- html
<div id="app">
<input type="text" v-bind:value="message">
</div>
- Vue.js
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
v-if
dataオプションで設定した真偽値によって表示、非表示を切り替えます。
下記の例だとon_offが偽の場合、pタグごと表示を消します。
- html
<div id="app">
<p v-if="on_off">
Hello
</p>
</div>
- Vue.js
var app = new Vue({
el: '#app',
data: {
on_off: true
}
})
v-show
v-showはv-ifの例のように表示、非表示を制御出来ますが、タグ毎非表示にするのではなく、
display: none;にします。
- html
<div id="app">
<p v-show="on_off">
Hello
</p>
</div>
- Vue.js
var app = new Vue({
el: '#app',
data: {
on_off: true
}
})
v-for 繰り返し
要素の個数分繰り返して表示出来ます。
dataオプションで設定した配列colorsを１つずつcolorに入れて表示します。
- html
<div id="app">
<ol>
<li v-for="color in colors">{{ color }}</li>
</ol>
</div>
- Vue.js
var app = new Vue({
el: '#app',
data: {
colors: ['Red', 'Greeen', 'Blue']
}
})
v-on イベント処理
クリックされた時の動作など、イベント処理を設定出来ます。
- html
<div id="app">
<button v-on:click="on_click">
クリックボタン
</button>
</div>
- Vue.js
var app = new Vue({
el: '#app',
methods: {
on_click: function() {
alert('クリックされました');
}
}
})
v-model 双方向バインディング
データを共有してリアルタイムで変更を反映します。
1つ目のテキストボックスに入力すると、dataオプションのtextが更新され、2つ目のテキストボックスにもすぐに反映されます。
- html
<div id="app">
<p>
<input type="text" v-model="text"> // 1つ目のテキストボックス
</p>
<p>
<input type="text" v-model="text"> // 2つ目のテキストボックス
</p>
</div>
- Vue.js
var app = new Vue({
el: '#app',
data: {
text: 'Hello'
}
})
まとめ、感想
とりあえず使ってみて、なんとなくこんな感じか？というところはわかりました。
でもQiitaにあるVue.jsでゲーム作る記事とか見てると、まだ全体の1%くらいしか理解してない感じがする^^;
とりあえず何かアプリを作りたいところです。