<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<!--1:导入vue-->
<script src="js/vue-2.4.0.js"></script>
</head>
<body>
<!--将来new的vue实例，会控制这个元素中所有的内容-->
<!--Vue 实例所控制的这个元素区域，就是我们的V-->
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
//创建一个vue的实例
//当我们导入包之后，在浏览器内存中，就多了个vue构造函数
//注意：我们 new 出来的这个 vm ，就是我们 MVVM 中的 vm 调度者
const vm = new Vue({
el: '#app', //表示，当前我们new的这个vue实例，要控制页面上的哪个区域
//这里的data就是MVVM中的M，专门用了保存每个页面的数据的
data: { //date属性中，存放的是el中要用到的数据
msg: '欢迎学习Vue' //通过vue提供的指令，很方便就能把数据渲染在页面上，
// 程序员不再动手操作DOM元素了[前端的Vue之类的框架，不提倡我们去动手操作DOM元素]
}
});
</script>
</body>
</html>