概要
はじめまして、るねすと申します。
Railsチュートリアルを終えたばかりの駆け出しエンジニアです。最近Vue.jsの学習をはじめたので基本的な内容をまとめてみました。
初心者でもある程度分かりやすい内容になっていると思いますので、参考にしてみてください。
もし、誤った内容がありましたらご指摘いただけると嬉しいです！！
Vueの基本
Vueコンポーネンントの例を以下に示す。
var app = new Vue ({
el: '#app',
data: {
message: "Hello Vue.js!"
}
})
「var app = new Vue ・・・」の部分で「app」という変数（変数名は任意に決められる）に、Vueインスタンスを新規に作成し代入している。「el:」の部分はhtmlでVue.jsを使う範囲を指定している。この場合、「id=“app”」というタグが使用されている範囲でVueを使用することを宣言している。
<div id="app">
{{ message }}
</div>
bodyタグの任意の箇所に、Vueのテンプレートを挿入できる。Vueテンプレート内がVueの世界として扱われる。
「{{}}」の二重括弧（Mustache構文）内にプロパティ名を記述することで、data内のメッセージをバインディングすることができる。バインディングとはdataオプションで用意したデータをテンプレート側が参照して表示する仕組みのこと。
この場合は、data内のmessageをバインディングしているため、”Hello Vue.js!”がブラウザに出力される。messageの内容を変更すると自動的に変更内容が描画される。
ディレクティブ
ディレクティブとは
- v-ではじまる特別な属性のこと
- directive(指令)という名前のとおり、Vue.jsに何らかの支持を行う仕組み。
ディレクティブの例
- v-bind
- v-if
- v-show
- v-for
- v-on
- v-model
使用イメージ
<input type="text" v-bind:value="message">
v-bindの部分はDOMに反映される前にVue.jsによって解釈・変換され、そのあとは内部的にのみ利用される。
主なディレクティブ
v-bind
Mustache構文による記法はテキストエリアで使用する記法のため、属性へは使用できない。属性へのバインディングには「v-bind」を使用する
<div id="app">
<input type="text" v-bind:value="message"/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
var app = new Vue ({
el: '#app',
data: {
message: "Hello Vue.js!"
}
})
入力欄に”Hello Vue.js!”と表示される
v-if
要素の表示・非表示を切り替えることができる
<div id="app">
<p v-if="toggle">
Hello
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
var app = new Vue({
el: '#app',
data: {
toggle: true
}
})
- toggleプロパティがtrueの場合、「Hello」と表示される。falseの場合、何も表示されない
- falseの場合、要素がDOMレベルで削除される。頻繁に表示・非表示を切り替えると描画コストが高くなる可能性がある
v-show
要素の表示・非表示を切り替える（CSSのdisplayプロパティのON／OFFを切り換えることによって実現する）
<div id="app">
<p v-show="toggle">
Hello
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
var app = new Vue({
el: '#app',
data: {
toggle: true
}
})
DOMツリーを確認すると以下のようになっている。
- CSSのdisplayプロパティを操作し、表示・非表示を切り替える。
- v-ifよりも描画コストが低い点で有利
v-for
オブジェクトの繰り返しを行う 。基本的な構文は以下のとおり。
<要素名 v-for="バリュー in オブジェクト">
{{ 表示したいバリュー }}
</要素名>
または
<要素名 v-for="(バリュー,キー) in オブジェクト">
{{ 表示したいキー or バリュー }}
</要素名>
以下がv-forを用いたコードの例
<div id="app">
<ol>
<li v-for="color in colors">{{ color }}</li>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> >
var app = new Vue({
el: '#app',
data: {
colors: ['Red', 'Blue', 'Green']
}
})
以下のように表示される
オブジェクトの場合
<div id="app">
<ul>
<li v-for="value in user">{{ value }}</li>
</ul>
<hr>
<ul>
<li v-for="(value, key) in user">
{{ key }} : {{ value }}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
var app = new Vue({
el: '#app',
data: {
user: {
firstName: 'Taro',
lastName: 'Yamada',
age: 28
}
}
})
以下のように表示される
v-on
構文
v-on:イベント名＝”メソッド名”
<div id="app">
<button v-on:click="onclick">
Click!
</button>
<p>
{{ now }}
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
var app = new Vue({
el: '#app',
data: {
now: ''
},
methods: {
onclick: function() {
this.now = new
Date().toLocaleString()
}
}
})
クリックすると
onclickメソッドが呼び出され、日付と時間が表示される
v-model
双方向データバインディング（dataオブジェクトとテンプレートの値を同期させる）を行う。
<div id="app">
<p>
<input type="text" v-model="message">
</p>
<p>
<input type="text" v-model="message">
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
初期画面
一方のinputタグのテキストを変更するとオブジェクトの値が変更され、もう一方のinputタグのテキストの値も変わる
コンポーネント
- ページを構成するUI部品
- テンプレートとそのロジックから構成
- よく使う機能をコンポーネント化することで再利用性が高くなり、コードの見通しがよくなる
構文
Vue.component(コンポーネントの名前,コンポーネントの定義情報)
<div id="app">
<hello-component></hello-component>
<hello-component></hello-component>
<hello-component></hello-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
Vue.component('hello-component' , {
template: '<p>Hello</p>'
})
var app = new Vue({
el: '#app'
})
以下のように表示される
終わりに
最後まで読んでいただきありがとうございました。
よろしければTwitterのフォローをお願いします！
