【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

 

App.vueを書き換える

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

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

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

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

 

参考文献

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

Vue.js を vue-cli を使ってシンプルにはじめてみる

 

Web勉強記Vue.js編まとめ

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

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

 

2+

投稿者: wakky

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

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください