精通
英语
和
开源
，
擅长
开发
与
培训
，
胸怀四海
第一信赖
精通
英语
和
开源
，
擅长
开发
与
培训
，
胸怀四海
第一信赖
锐英源精品原创，禁止全文或局部转载，禁止任何形式的非法使用，侵权必究
VUE的核心其实就是实现了MVVM（Model-View -ViewModel）模式，View和Mode互相配合，进行结果数据渲染。
MVVM来自于MVC（Model-View-Controller）模式，核心为ViewModel层，负责转换Model中的数据对象使其变得简单易用。ViewModel层是这样来实现数据对象的转换的：向上与View层进行双向数据绑定；向下与Model层通过接口请求进行数据交互。MVVM与MVC模式类似，主要就是能够使View（视图）和Model（模型）分离开来。这样可以降低其耦合度，View和Model只改变其中一个时互不影响，View层也可以重复使用Model层中的一段视图逻辑，开发人员可以专注于ViewModel层数据和逻辑的开发，页面设计的工作就可以交给设计人员。ViewModel观察到数据的变化，并对视图对应的内容进行更新；ViewModel又能够监听到视图的变化，并通知数据发生改变。VUE.js就是ViewModel层的实现者，完成DOM监听和数据绑定。
了解了VUE的核心，在官网下载了插件后，自此，我们就可以尝试编写第一个VUE程序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层，模板，将数据绑定到页面元素-->
<div id="app">
{{message}}
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
<!--绑定元素的id-->
el:"#app",
/*Model：数据*/
<!--数据对象中有一个名为message的属性，并设置了初始值Hello Vue！-->
data:{
message:"hello, vue!"
}
});
</script>
</body>
</html>
我们在浏览器上运行这个程序，在控制台输入vm.message=‘HelloWorld’后回车，浏览器中就会出现“hello, vue!”。在这个操作中，我们并没有主动操作DOM，而是Vue的数据绑定使页面内容进行了变化。注意前端HTML部分和代码部分是分开的，方便设计和开发。