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对象的属性作为指令值时也同样有效。

  • 相关阅读:
    Linux命令(一)
    数据库SQL学习(一)
    Eclipse
    VsCode支持的markdown语法参考(一)
    常用算法Tricks(一)
    dispose方法的使用
    收藏一个链接
    我还不知道取什么名字
    NioSocket的用法
    随便乱塞塞2~
  • 原文地址:https://www.cnblogs.com/cuilichao/p/14893523.html
Copyright © 2011-2022 走看看