master

分支 (2)

管理

管理

master

gh-pages

vue-example
/
index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Vue Simple Example</title>
    </head>
    <style>
        body {
            font : 100% Helvetica, sans-serif;
            color: #ecf0f1;
            text-align: center;
            background-color: #34495e;
        }
        .container {
            margin: 0 auto;
            padding-top: 70px;
        }
        .clock {
            color: #C03763;
            font-size: 48px;
            line-height: 1.1em;
            margin: 40px 0 60px;
        }
    </style>
    <body>
        <div class="container">
            <app></app>

            <template id="app-template">
                <div>
                    <h1>{{msg}}</h1>
                    <clock></clock>
                </div>
            </template>

            <template id="clock-template">
                <div class="clock">
                    <h1>{{time}}</h1>
                </div>
            </template>
        </div>

        <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.15/vue.min.js"></script>
        <script>
            // App component
            Vue.component('app', {
                template: '#app-template',
                data () {
                    return {
                        msg: 'Welcome to VueJs World!'
                    }
                }
            });

            // Clock component
            Vue.component('clock', {
                template: '#clock-template',
                data () {
                    return { time: "00:00:00" }
                },
                ready () {
                    this.startTime()
                },
                methods: {
                    startTime: function () {
                        var today = new Date();
                        var h = today.getHours();
                        var m = today.getMinutes();
                        var s = today.getSeconds();
                        m = this.checkTime(m);
                        s = this.checkTime(s);

                        this.time = h + ":" + m + ":" + s;
                        var t = setTimeout(this.startTime, 500);
                    },
                    checkTime: function (i) {
                        if (i < 10) {i = "0" + i};
                        return i;
                    }
                }
            });

            // create a root instance
            new Vue({
                el: 'body'
            })
        </script>
    </body>
</html>