Vue.jsでWebアプリケーションを作る〜Vue.jsの基礎〜

1 はじめに
2 データを表示する
- 2.1 文字列を表示する
- 2.2 HTMLで表示する
3 属性を指定する
- 3.1 インラインスタイルを指定する
- 3.2 クラスを指定する
4 入力に応じて表示を変える
5 イベントに応じて表示を変える
6 条件分岐
7 繰り返し
8 さいごに
9 おすすめ書籍

はじめに

この記事は、初めてVue.jsをさわる方を対象に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>

1	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Vueアプリケーションを作る

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>

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

</div>

varapp=newVue({

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>

<body>

<pv-text="text2"></p>

</div>

varapp=newVue({

el:'#app',

data:{

text1:'Sample Text1',

text2:'Sample Text2',

}

})

</script>

</body>

HTMLで表示する

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>

<body>

<pv-html="textHtml"></p>

</div>

varapp=newVue({

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>

<body>

<imgv-bind:src="filename"></img>

</div>

varapp=newVue({

el:'#app',

data:{

filename:'hoge.png'

}

})

</script>

</body>

v-bind は以下のように省略が可能です。

 <img :src="filename"></img>

1	<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>

<body>

<p:style="{fontSize:size}">Sampletext</p>

</div>

varapp=newVue({

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>

<body>

<p:class="myClass">Sampletext</p>

</div>

varapp=newVue({

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>

<p:class="[myClass1, myClass2: isActive">Sampletext</p>

</div>

varapp=newVue({

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>

<body>

<inputv-model="name">

<p>こんにちは、{{name}}です。</p>

</div>

varapp=newVue({

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>

<body>

<buttonv-on:click="countUp">

<p>{{count}}回</p>

</div>

varapp=newVue({

el:'#app',

data:{

count:0,

methods:{

countUp:function(){

this.count++;

}

})

</script>

</body>

v-on は以下のように省略が可能です。

 <button @click="countUp">

1	<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>

<body>

<pv-if="isShow">表示する</p>

<pv-else>表示しない</p>

</div>

varapp=newVue({

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>

<body>

<ul>

<liv-for="name in names">{{name}}</li>

</ul>

</div>

varapp=newVue({

el:'#app',

data:{

names:['山田','田中','鈴木','佐藤'],

}

})

</script>

</body>

さいごに

Vue.jsでWebアプリケーションを作るにあたり、基本的な使い方を紹介しました。

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Vue.jsでWebアプリケーションを作る〜Vue.jsの基礎〜

はじめに

Vue.jsとは

インストール

Vueアプリケーションを作る

データを表示する

文字列を表示する

HTMLで表示する

属性を指定する

インラインスタイルを指定する

クラスを指定する

入力に応じて表示を変える

イベントに応じて表示を変える

条件分岐

繰り返し

さいごに

おすすめ書籍

フォロー

アプリ情報