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

プログラミング界隈で盛り上がっているVue.jsを勉強していくコーナー 今回は、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/vue@2.5.16/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/vue@2.5.16/dist/vue.js"></script>
</body>
{{message}}

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

スクリプト部分

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

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