分かりそうで分かっていないVue.jsワード #JavaScript

DOM（Document Object Model）

「JavaScriptでhtmlの要素を操作するための仕組み」
Webページは文書であり、HTMLを操作することで表示されます。
そのHTMLをJavaScriptを用いて操作することができる仕組みのこと。

データバインディング

「データと描画を同期する仕組み」
JavaScriptのデータを変えるだけで描画内容も一緒に変わる仕組みのこと。

こんなかんじ

①Vue.jsでデータを表示

<!DOCTYPE html>
<html>
<body>
<div id="app">
    <h1>{{ message }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Mt.everest!'
        }
    })
</script>
</body>
</html>

②コンソールからデータを変更

③データを変更したタイミングで画面が変更される