vue把數(shù)據(jù)和DOM綁定
vue的一大特性就是它能夠把數(shù)據(jù)綁定到 DOM 文本或特性宪睹，還可以綁定到 DOM 結(jié)構(gòu)亭病。
Vue.js通過MVVM的模式拆分為視圖和數(shù)據(jù)兩部分冠桃，并將其分離食听。因此，你只需要關(guān)心你的數(shù)據(jù)即可樱报， DOM的事情Vue會(huì)幫你自動(dòng)搞定葬项。
我們需要做的就是： 把數(shù)據(jù)和DOM建立關(guān)聯(lián)。
看下下面這段代碼：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入最新的vue穩(wěn)定版本-->
<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> <!--把數(shù)據(jù)渲染進(jìn)DOM-->
</ul>
</div>
<!--script腳本-->
<script>
var app = new Vue({
el: '#app',
data: {
books:[
{name: 'Vue.js實(shí)戰(zhàn)1'},
{name: 'Vue.js實(shí)戰(zhàn)2'},
{name: 'Vue.js實(shí)戰(zhàn)3'}
]
}
})
</script>
</body>
</html>
說明：
image.png
當(dāng)你把一個(gè)vue實(shí)例掛載到一個(gè)DOM元素上之后迹蛤，vue會(huì)自動(dòng)幫你把數(shù)據(jù)渲染進(jìn)DOM民珍。
關(guān)于el:
el是Vue實(shí)例的一個(gè)必不可少的選項(xiàng)，el用于指定一個(gè)頁(yè)面中已存在的DOM元素來掛載Vue實(shí)例盗飒，它可以是HTMLElement嚷量，也可以是css選擇器。
