Vue 简单入门 —— 原生写法 VS Vue 写法

在 div 标签上写上 'hello world'，设置定时器2秒后将内容改为 'bye world'。

原生写法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app"></div>
        <script>
            var dom = document.getElementById('app')
            dom.innerHTML = 'hello world'
            
            setTimeout(function() {
                dom.innerHTML = 'bye world'
            }, 2000)
        </script>
    </body>
</html>

Vue 写法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./vue.v2.6.10.dev.js"></script>
    </head>
    <body>
        <div id="app">{{content}}</div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    content: 'hello world'
                }
            })
            setTimeout(function() {
                app.$data.content = 'bye world'
            }, 2000)
        </script>
    </body>
</html>