【Web】Vue.jsでHello Worldと表示させてみる(Web勉強記Vue.js編 4日目)

投稿日：2020年4月25日

最終更新日：2020年7月22日

Vue.jsでHello World

前回はVue.jsのプロジェクトをつくってローカルサーバーで動かしてみたが、デフォルトのプロジェクトをそのまま表示させただけ。今回は一歩進んで、Hello Worldという文字を表示させてみる。

Windows 10

vue.js　version 2.6.11

この前表示させたページのソースコードは、作成したproject内のsrcディレクトリ以下のApp.vueに記述されている。

App.vueから元をたどっていくと結構複雑なのだが、今回は単純にApp.vueだけを以下のように書き換えて「Hello World」と表示させてみる。

	<template>
	<div id="app">
	<p>
	{{msg}}
	</p>
	</div>
	</template>

	<script>
	export default {
	name: 'App',
	data () {
	return {
	msg: "Hello World, I'm Wakky."
	}
	}
	}
	</script>

	<style>
	#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	margin-top: 60px;
	}
	</style>

view raw App.vue hosted with ❤ by GitHub

<template>の中で変数msgを記述し、<script>内からmsgをexportして表示させている。実際にローカルサーバーで動かしてみたのが以下の画像。

これで今回の目的は達成。次回はもう少しアプリっぽく、動的にページの表示が変えてみたいと思う。

App.vueをいじるにあたって、以下の記事を参考にさせて頂きました。vue.jsの構造がわかりやすく解説されています。

この勉強記は以下のページにまとまっています。Vue.js以外の勉強記もあるので興味があればぜひ。

【Web】Vue.jsでHello Worldをやってみよう日記

映画と旅行が大好きなエンジニア。お酒、ゲーム、読書も好き。