最近Vue.jsを勉強しているので、備忘録として。
Vue.jsを勉強しようと思った理由
- JavaScriptの基礎的な勉強を一通り終えた（TODOアプリを作れるレベル）ので、新しくJSのフレームワークに触れてみたかった。
- JSには様々なフレームワーク（Angular,Reactとか）と比べて、人気が高く、初学者でもとっつきやすい印象を受けたから。
- 独自のHTMLタグを作ることができ、データバインディングが非常に簡単という特徴があるから、開発の可能性が広がる。
といった点から、Vue.jsを学びました。
ちなみに、学習している教材は、udemyのVue JS入門決定版！jQuery を使わない Web 開発 - 導入からアプリケーション開発まで体系的に動画で学ぶを使って勉強しています。
Vue.jsの導入
以下のURLからVue.jsのインストールができます。
Vue.jsのインストール
導入する方法は、直接ダウンロードする方法と、CDNによる読み込み、NPMを利用したダウンロード、CLIを利用したダウンロードの4つの方法があります。
学習を目的としている方は、直接ダウンロードする方法か、CDNによる読み込みの方法が比較的すぐ導入できるのでオススメです。
初めに
HTMLの記述
<body>
<div id="app">
<!-- ここにVue.jsの内容を記述 -->
</div>
</body>
divタグを作って、idを"app"とします。
JavaScriptにVueのインスタンスを作成
var app = new Vue({
el: '#app'
})
JavaScriptにVueインスタンスを作成しました。elプロパティを使って、先ほどHTMLに記述したid"app"をマウント（id"app"が含まれている要素を結びつける）しています。
ここまでが、Vue.jsを書く初めの準備。
Hello, Vue.js!と表示させたい
Vue.jsを使って、HTML上でHello, Vue.js!と表示させます。
<body>
<div id="app">
<p>{{ message }}</p>
</div>
</body>
new Vue({
el: '#app',
data: {
message: 'Hwllo, Vue.js!'
}
})
HTMLで、まずmustache構文{{}}を使ってオブジェクトを呼び出します。
JSで、dataプロパティにmessageオブジェクトを定義し、Hello, Vue.js!と記述します。
以上がHTML上にHello, Vue.js!と表示させる方法です。
ディレクティブについて
ディレクティブとは、Vue独自の属性のことです。(v-bind、v-modelとか)
勉強してきたディレクティブを紹介します。
v-bind
v-bindはclassやvalue、styleなど、v-bind:valueのようなかたちで属性を呼び出すことが可能です。
一部紹介
<div id="#app">
<!-- input欄の中にhogeの値を表示 -->
<input type="text" v-bind:value="hoge">
<!-- urlプロパティに記入した値のリンク先に飛ぶ -->
<a v-bind:href="url">Googleに飛びます</a>
</div>
new Vue({
el: '#app',
data: {
hoge: 'hoge',
url: 'https://www.google.com'
}
})
こんな記述になります。
v-model
pタグでの出力hogeとのデータバインディングができます。
以下のような記述です。
<div id="app">
<!-- pタグとinputタグ共に'ホゲー'の文字列が出力される -->
<p>{{hoge}}</p>
<input type="text" v-model="hoge">
</div>
new Vue({
el: '"app',
data: {
hoge: 'ホゲー'
}
})
inputタグの中で文字を変更した時、リアルタイムにpタグの文字列も影響します。
v-if
Vue.jsで書く、if文ですね。
<div id="app">
<p v-if="hoge"> "hoge"がtrueなら表示されます！！ </p>
</div>
new Vue({
el: '#app',
data: {
hoge: true
}
})
dataプロパティにfalseと記述すると、pタグが消えます。
v-for
Vue.jsで書く、おなじみfor文ですね。
<div id="app">
<ul>
<li v-for="friut in fruits">
<!-- 配列'fruits'の中身が全て表示される -->
{{ fruit }}
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
fruits: [
'apple',
'banana',
'grape'
]
}
})
v-on
v-on:イベントの種類=関数()のようなかたちで、イベントを起こすことができます。
関数の呼び出しにはmethodsプロパティを使用します。
<div id="app">
<input type="text" v-model="message">
<button v-on:click="alert">click</button>
</div>
new Vue({
el: '#app',
data: {
message: ''
},
methods: {
alert(this.message)
}
})
inputタグに文字を入力し、clickボタンを押すと、inputの文字列をmessageオブジェクトに格納し、alertでmessageの文字列が出力されます。