BETA

Vue.jsでHello Worldを表示しよう

投稿日:2018-11-05
最終更新:2018-11-05
※この記事は外部サイト(https://www.corylog.com/vue/helloworld.html)からのクロス投稿です

Vue.jsでHello Worldを表示しよう

今回は、Vue.jsでHelloWorldと表示させたいと思います。

今回したい事

  • Vue.jsでHelloWorldと表示させる

    完成したコード

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>SampleTitle</title>
</head>

<body>
  <div id="app">
    <p>{{ message }}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</body>

</html>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>

動くサンプル

動くサンプルはこちら

コード解説

HTML部分

<body>
  <div id="app">
    <p>{{ message }}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</body>
{{message}}

でメッセージを表示しています。

スクリプト部分

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})
</script>

dataのmessageに今回表示させたいHello Worldが記載されているのがわかります。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@aocoryの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!