Vue.js/データバインディング

Vue が管理しているデータに対して変化があった場合に関連付けされた DOM に自動反映されるやつ。 Vue の目玉機能の一つ。

HelloDataBinding

超簡単な例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloDataBinding</title>
    <script src="https://unpkg.com/vue@2.5.17"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        var d = { msg: 'HelloWorld'};
        new Vue({
            template: '<p>{{ msg }}</p>',
            data: d
        }).$mount('#app');
        setTimeout(() => { d.msg = 'HelloDataBinding' }, 5000);
    </script>
</body>
</html>

div 要素位置に Vue オブジェクトで管理される p 要素が埋め込まれる。その p 内に関連付けしたオブジェクト(d)内のデータ(msg)が挿入される。

その5秒後に関連付けしたオブジェクト(d)内のデータを書き換える。

書き換えたのは p の DOM ではなく関連付けしたオブジェクト(d)である。なのに、その内容が p の内部に自動的に反映されて画面の表示が変わる。

これがデータバインディングである。

javascript/vuejs/data_binding/start.txt · 最終更新: 2018-11-17 21:09 by ore

文書の先頭へ

Vue.js/データバインディング

menu

書いてる野郎

Vue.js/データバインディング

HelloDataBinding