vue把数据和DOM绑定
vue的一大特性就是它能够把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。
Vue.js通过MVVM的模式拆分为视图和数据两部分，并将其分离。因此，你只需要关心你的数据即可， DOM的事情Vue会帮你自动搞定。
我们需要做的就是： 把数据和DOM建立关联。
看下下面这段代码：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入最新的vue稳定版本-->
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="book in books">{{book.name}}</li> <!--把数据渲染进DOM-->
</ul>
</div>
<!--script脚本-->
<script>
var app = new Vue({
el: '#app',
data: {
books:[
{name: 'Vue.js实战1'},
{name: 'Vue.js实战2'},
{name: 'Vue.js实战3'}
]
}
})
</script>
</body>
</html>
说明：
image.png
当你把一个vue实例挂载到一个DOM元素上之后，vue会自动帮你把数据渲染进DOM。
关于el:
el是Vue实例的一个必不可少的选项，el用于指定一个页面中已存在的DOM元素来挂载Vue实例，它可以是HTMLElement，也可以是css选择器。
