zoukankan      html  css  js  c++  java
  • 参考书籍《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对象的属性作为指令值时也同样有效。

  • 相关阅读:
    第二章——链表
    第一章:基本概念
    第八章
    画图
    关于写代码时的心态问题
    checked用id选择器找不到怎么办
    this指向问题
    es6箭头函数
    微信小程序——获取步数
    小程序——数据缓存
  • 原文地址:https://www.cnblogs.com/cuilichao/p/14893523.html
Copyright © 2011-2022 走看看