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}}。