Vue是一个前端网页js文件。里面提供了很多好用的功能，如果你的前端HTML页面包含了这个文件，你就可以非常方便的写很多非常灵活的Web页面。

Vue既然是一个js文件，当然可以直接在HTML文件里包含，包含就可以用。而且包含的vue.js可是一个在线文件。浏览器会自动下载这个文件加载使用。就像下面这样:

工程化现在是前端的主流开发方法，一行控制台命令，就可以创建一个完整的初始工程；一行命令就可以生成发布的包；一行命令就可以安装一个新的第三方包；

本文主要讲入门，也就是能不用工程的工具就不用工程的工具，我们就从一个HTML文件开始吧。

建议先安装Visual Studio Code来编写代码，会自动补全，很方便。

新建一个文本文件，重命名为 Vue Hello World.html（文件名随便取）。

右键用浏览器打开上面的Vue Hello World.html文件，就会看到Vue运行的效果啦！

1 上面代码的第6行包含的在线的vue.js文件，这让我们可以在第11行，第15~20行写Vue的代码。

3 第15行创建了一个Vue对象，这样Vue就可以工作了。但是还是需要一些初始化的工作来指定Vue的具体特性。

上述代码的意思是将Vue对象绑定到HTML元素app身上。这样Vue就可以操作这个元素。

Vue只操作这一个元素能搞出啥动静吗？可以的。因为Vue假设我们的页面就这一个元素。所有的页面内容都是用这个元素的孩子，孙子节点创造出来的。所以Vue也是一个单元素单页面的程序。

有点不可思议吧！这也很容易理解，因为只有这样，我们写的后面的代码才可以都交给Vue去处理。让Vue接管所有前端页面的内容。

不然的话，哪里有独立于Vue的HTML代码，哪里就无法享受Vue的便捷性。

5 第17行的代码data是固定的，Vue必须要有这个成员。这个成员里的值如果被改变，界面上的内容会自动改变。这个是Vue的核心工作。也就是说，你改了内存数据，页面就会发现你改了（实际上是Vue在不定期扫描，或者说回调函数在执行），从而你就只需要操心内存数据就行了。

上面的message是单向绑定，也就是说，message在内存里被JavaScript代码修改了以后，界面上可以直接看到修改后的值。Vue还支持双向绑定。

比如你有一个文本输入框，这个文本框，这个文本框的内容可以绑定到一个Vue data的成员，这样你输入文本框，Vue的data里的数据就会变。更有意思的是，如果这个data成员又被绑定到页面其他控件，就会发现联动效果。这就更方便了。