Vue簡介
- JavaScript框架
- 簡化DOM操作
- 響應式數據驅動
引入Vue程序需要以下三個步驟：
- 導入從官網下載的Vue.js
- 創建Vue實例對象，設置el屬性和data屬性
- 使用簡潔的模板語法把數據渲染到頁面上
代碼實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
message:"hello world!"
}
})
</script>
</body>
</html>
el（掛載點）:
用來設置Vue實例掛載（管理）的元素；
data（數據對象）：
Vue用到的元素需要寫到data中，data中也可以寫複雜的數據類型；
那麼，Vue的作用範圍是什麼？
答：el命中元素的內部，也就是說在div元素內部嵌套一個別的元素，同時這個元素的內部也有{{message}}也可以，看以下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
<span>{{message}}</span>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
message:"hello world!"
}
})
</script>
</body>
</html>
但是，Vue只支持雙標籤，比如div，p，span等（特例：不支持把Vue掛載到body和html元素上），不支持單標籤，比如 img等，這是因爲在單標籤內部無法寫{{message}}。