【Vue.js】Vue.jsでリアクティブにHTMLを書き換えたい

Vue.js 
<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Vue.jsの練習</title>
  </head>
  <body>
    <div id="app">
        <p>{{message1}}</p>
        <p>{{message2}}</p>
        <p>{{message3}}</p>
    </div>
    
//以下はVue.jsの書き方ルール。
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
//　まずは new Vueで定義を。
        var vm = new Vue({
// 対象となるel(=element）を指定。
            el:'#app',
            data:{
                message1:"おはよう",
                message2:"こんにちは",
                message3:"こんばんは"
            }
        })
    </script>
  </body>
</html>

参考

ログイン｜STARTOUT