参考书籍《Vue.js快跑：构建触手可及的高性能Web应用》第1章 Vue.js基础-----1-7响应式

除了在一开始创建HTML, Vue还监控data对象的变化，并在数据变化时更新DOM。

让我们创建一个用于显示当前时间的页面，每隔一秒获取一下当前时间：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>响应式</title>
</head>

<body>
    <div id="app">
        <p>当前时间{{time}}</p>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                time: new Date()
            },
            created() {
                setInterval(()=>{
                    this.time = new Date();
                }, 1000)
            }
        })
    </script>
</body>

</html>

created函数方法会在应用初始化完成后执行。Vue的生命周期钩子会介绍。

Vue的响应式能力除了在使用插值将数据输出到页面上时有效，在将data对象的属性作为指令值时也同样有效。

posted @ 2021-06-17 15:06  {颜逸}  阅读(37)  评论(0)  编辑  收藏  举报