Zenn
🔰

vue: Hello World

2023/01/26に公開
Vue.js
Vue.js
tech

html基本構造で<div>タグを一つ追加し、vueインスタンスをローディングし、Hello Worldを出力。
vueインスタンスを作り、インスタンスに定義されたデータオブジェクトのメッセージプロパティを画面に出力。

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div id="app">
      {{message}}
    </div> 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello World, Vue.js!'
        }
      })
    </script>
  </body>
</html>

Discussion