一、基本介绍
1、Vue.js目前最火的的一个前端框架，三大主流前端框架之一。
2、Vue.js是一套构建用户界面的框架（一套完整的解决方案，对项目侵入性大，中途需要跟换框架则需要重构整个项目），只关注视图层，易上手，有配套的第三方类库。
3、提高开发效率，帮助减少不必要的dom操作；双向数据绑定，通过框架提供的指令，前端只需要关注业务逻辑，不再关心dom如何渲染。
二、前端的MVVM
1、前端视图层的概念，主要把每个页面分成了M（Model）、V（View）、VM（VM ViewModel）。VM是其中核心，M和V间的调度者。
2、M，保存的是每个页面中单独的数据（比如要渲染页面表格，ajax请求到后台的你个数组，此数据即为M）。
3、V，每个页面的html结构。
4、VM，一个调度者，分割了M和V，M和V不直接关联，通过中间的VM。V想要保存数据到M，都要有VM做中间处理；V想要渲染页面，需要调用VM，VM从M中取数据。
5、前端中使用MVVM思想，主要让开发更方便，MVVM提供了数据的双向绑定（由VM提供）。
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导入vue的包 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 将来的Vue实例会控制这个元素中所有内容 -->
<!-- V（View），Vue实例所控制的这个元素区域 -->
<div id="app">
<!-- 通过Vue提供的指令，很方便就能把data里的数据渲染到页面，不用手动操作dom了
（前端Vue之类的框架，不提倡去手动操作dom） -->
<p>{{ msg }}</p>
</div>
<script>
//导入包,就有Vue的构造函数
//VM,这个new出来的vm对象,就是调度者
var vm = new Vue({ //{}配置对象
el:'#app', //element,这个Vue实例要控制页面上的哪个区域
data:{ //M,data就是用来保存当前页面数据的
msg:'欢迎学习Vue'
}
})
</script>
</body>
</html>
