第一个Vue程序
Vue简洁
Vue是一套用于构建用户界面的渐进式框架，与其他框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，易于上手。
MVVM模式
Model：模型层，在这里表示JavaScript对象View：视图层，在这里表示DOM(HTML操作的元素)ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者。
ViewModel能够观察到数据的变化，并对视图对应的内容进行更新ViewMidek能够监听到视图的变化，并能够通知数据发生改变。至此，我们就明白了，Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听 与 数据绑定。
第一个Vue程序
我们直接导入Vue的CDN
<!-- 1.导入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>Vue.js的核心是实现了MVVM模式，它扮演的角色就是ViewModel层，那么所谓的第一个程序就是展示她的数据绑定功能
demo1.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!-- 1.导入vue.js--><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><!--view层 模版--><div id="app"> {{message}}</div><script> var vm=new Vue({ el:"#app", //model：数据 data:{ message:"hello,vue!" } });</script></body></html>说明：
el:‘#app’：绑定元素的IDdata:{message:‘hello,vue!’}：数据对象中有一个名为message的属性，设置其初始值为hello，vue。将数据绑定到页面元素(视图层)
<div id="app"> {{message}}</div>只需要在绑定的元素中使用 双花括号 将 Vue 创建的名为 message 属性包裹起来，即可实现数据绑定功能，也就实现了 ViewModel 层所需的效果，类似EL表达式
测试
在控制台Console 输入vm.message=‘hello world’ 然后回车，观察会发现浏览器中的值直接跟着改变，不用刷新页面。
在这个操作中，我并没有主动操作 DOM，就让页面的内容发生了变化，这就是借助了 Vue 的 数据绑定 功能实现的；MVVM模式中要求 ViewModel 层就是使用 观察者模式 来实现数据的监听与绑定，以做到数据与视图的快速响应。
如果对您有帮助，免费的赞点一个～～～感谢?
