vue入门教程 简单实现一个hello world
此篇适合没学习过vue的小白观看，有一定基础可观看笔者vue笔记相关文章，本文主要介绍，和讲解vue。
1.vue运行模式
简单如下图
view:表示视图层，就是显示的ui界面
model：表示数据层，用于定义数据修改和操作业务逻辑
viewModel：用于同步view和model的对象
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM， 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理
2.实战简单创建一个hello World！
这里简单示例，
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello world!'
}
})
</script>
</body>
</html>
在vue中在data中定义的属性，可以再视图层，中通过双花括号的方式渲染到页面，此时，页面上会渲染出hello world！
此时打开控制台，输入vm，可以再控制台中打印出vue的实例
打开实例，可以再原型链上找到$data,通过原型链的原理，我们可以通过vm.message直接访问到数据
上图中的get，和set便是vue数据双向绑定的原理，后续会讲解，下面来见证下数据双向绑定
在控制台中执行下列操作，你会发现页面显示内容发生了改变。
