Vue 数据绑定 2

Vue实例本身代理了 data 选项里的所有属性，可以通过下面方式访问：
显式地声明数据

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            a: 2
        }
    })
    console.log(app.a)
</script>
</body>
</html>

隐式声明数据
可以指向一个已有的变量，它们之间会默认建立了双向绑定。当修改其中任意一个时，另一个也会一起变化：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
</div>

<script>
    var myData = {
        a: 1
    }
    var app = new Vue({
        el: '#app',
        data: myData
    })
    console.log(app.a)
    app.a = 2
    console.log(myData.a)
    myData.a = 3
    console.log(app.a)
</script>
</body>
</html>