一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。
Vue是当前非常流行的渐进式框架，社区也是特别的活跃，最近有项目就需要用到这个框架，所以前来学习，作为小白，和大家一起分享我所理解的Vue基础知识。
虽然说Vue很好上手，但是官网提示，是需要有HTML、CSS 和 JavaScript达到一个中级水平的，没有基础的只能一并学习了。
一、学习方式
一开始官网推荐的学习方式：在Html文件中引入js，而不是直接使用vue-cli脚手架，这比较复杂，我们一步步从简单的来。
Html文件中引入js有两种方法：
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script type="text/javascript" src="../js//vue.js"></script>[这个需要在官网上把开发版本下载下来，放入项目的js文件夹中，生产版本是实际生产中用的，体积小且没有警告信息]
二、万物开头 Hello World~
好啦，那么我们开始创建一个Hello World的Demo，这里用的是Visual Studio Code这个软件。
黄色框框里是一个容器，红色框框里新建了一个Vue实例，可以看到，id和el后面的内容是一样的，el就是elment元素的缩写，也就是css里的id选择器概念，Vue实例和容器通过选择器才能建立起关联，把成果放进容器里面展示在Web界面，所以el的作用是指定Vue实例放在哪个容器里面。
我们需要下载open in browser这个插件，才能在Web界面展示我们的Hello World，操作步骤如下：
- 点击链接，会自动跳转到VS Code中自动安装
- 在代码界面处，右键鼠标，选中
Open with Live Server即可
优点： 当你在VS Code中改完代码以后，直接Ctrl+S保存，网页端就可以自动修改，而不用手动刷新，是不是超级奈斯！
三、改写Demo
虽说我们把容器和Vue实例给绑定了，实际上实例并没有起到什么作用，删掉这段代码，Html界面依旧是可以正常显示Hello World文字的，所以我们来改写一下！
继续给el添加data配置项，在容器中的{{}}插值表达式内放入name，就可以显示我们赋值的何同学变量。这样容器和Vue实例就关联起来工作了。
四、深入了解这个过程
- 代码顺序可以看出先有了容器，后有了Vue实例
- Vue实例开始工作，发现
el配置 - 容器拿过来解析，扫描有没有Vue语法,举例:这里扫描到了
{{name}} - 把
何同学替换掉容器里的name 容器为Vue提供了模板，经过Vue实例的解析就变成了一段正常的Html片段，就包含了womf 想要的数据了。
