この記事は、初めてVue.jsをさわる方を対象にVue.jsの特徴や基礎知識について紹介します。
Vue.jsはWebアプリケーションのUIを構築するためのJavaScriptフレームワークです。Vue.jsを使うことでWebページ内に動的なUIを追加したり、SPAを簡単に作ることができます。
Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。
出典：Vue.js Vue.jsとは？
Vue.jsのインストール方法はいくつかありますが、一番簡単なCDNを使う方法を紹介します。HTMLファイル内に以下の記述を追加します。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Vueで文字を表示する簡単なサンプルコードは以下のとおりです。
el オプションで指定した要素と繋がります。下の例では {{text}} の部分に data オプションで指定した Sample Text が表示されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{text}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
text: 'Sample Text'
}
})
</script>
</body>
</html> 文字列を表示するには {{}} （マスタッシュ）で囲う方法と v-text で指定する方法があります。使い方は以下のとおりです。
<body>
<div id="app">
<p>{{text1}}</p>
<p v-text="text2"></p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
text1: 'Sample Text1',
text2: 'Sample Text2',
}
})
</script>
</body> data をHTMLとして表示するには v-html を使います。使い方は以下のとおりです。
<body>
<div id="app">
<p v-html="textHtml"></p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
textHtml: '<span>Sample HTML</span>',
}
})
</script>
</body> 要素の属性を data で指定するには v-bind を使います。使い方は以下のとおりです。
<body>
<div id="app">
<img v-bind:src="filename"></img>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
filename: 'hoge.png'
}
})
</script>
</body> v-bind は以下のように省略が可能です。
<img :src="filename"></img>
インラインスタイルを data で指定するには以下のようにします。属性名はキャメルケースで記述する点に注意が必要です。
<body>
<div id="app">
<p :style="{fontSize:size}">Sample text</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
size: '12px',
}
})
</script>
</body> クラスを data で指定するには以下のようにします。
<body>
<div id="app">
<p :class="myClass">Sample text</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
myClass: 'my-class',
}
})
</script>
</body> 複数のクラスを指定したり、条件に応じて指定することもできます。
<div id="app">
<p :class="[myClass1, myClass2: isActive">Sample text</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
myClass1: 'my-class',
myClass2: 'my-class',
isActive: true,
}
})
</script>
</body> ユーザの入力に応じて表示を変更するには v-model を使います。使い方は以下のとおりです。
<body>
<div id="app">
<input v-model="name">
<p>こんにちは、{{name}}です。</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
name: '',
}
})
</script>
</body> ユーザのイベントに応じて表示を変えるには v-on を使います。使い方は以下のとおりです。
<body>
<div id="app">
<button v-on:click="countUp">
<p>{{count}}回</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
count: 0,
},
methods: {
countUp: function () {
this.count++;
}
}
})
</script>
</body> v-on は以下のように省略が可能です。
<button @click="countUp">
条件に応じて表示を切り替えるには v-if と v-else を使います。使い方は以下のとおりです。
<body>
<div id="app">
<p v-if="isShow">表示する</p>
<p v-else>表示しない</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isShow: true,
}
})
</script>
</body> 繰り返して表示する場合は v-for を使います。使い方は以下のとおりです。
<body>
<div id="app">
<ul>
<li v-for="name in names">{{name}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
names: ['山田', '田中', '鈴木', '佐藤'],
}
})
</script>
</body> Vue.jsでWebアプリケーションを作るにあたり、基本的な使い方を紹介しました。