Vue 数据绑定 1

<!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">
    <input type="text" v-model="name" placeholder="你的名字"/>
    <h1>你好，{{ name }}</h1>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: ''
        }
    })
</script>
</body>
</html>

A3A3477C-5E8E-47AE-ACE3-7A8F3048E0EB

C046374D-AFF0-4E1D-9902-93A394055

在输入数据的时候，下面的“你好，”后接的数据也跟随着变化。

创建 Vue.js 应用

通过构造函数 Vue 创建 Vue实例：

var app = new Vue({
    //选项
})

el 选项

el，用来指定一个页面中已存在的DOM 元素来挂载 Vue 实例。

如：

<div id="app"></div>

指定挂载：HTMLElement

var app = new Vue({
    el: document.getElementById('app')
})

或者 CSS 选择器方式

var app = new Vue({
    el: '#app'
})

挂载后，可以通过 app.$el 来访问该元素。

绑定

上面的代码，input 标签中，v-model 属性的值，对应于 Vue 实例中 data 选项中的 name 字段，这就是 Vue的数据绑定。