今天写一篇技术笔记，关于 Vue 入门的内容。
关于技术类的文章，我一般很少写，因为自己学习技术的时间并不长，水平也菜，工作内容大部分是需求相关，跟技术还是有些距离，学习了解技术都是为了解决工作中实际的需求，也当作自己的业余爱好了。
有这么个奇怪爱好，也是因为难以忍受一些低效的工作方式，总想着能不能通过技术的手段来解决。很多时候，都是自己分析需求，自己实现，最后部署上线。曾经以为自己是个全栈工程师，慢慢了解更多后，才发现自己是「全干工程师」，后来干脆把工程师的名头也去掉了。
正文
前段时间，根据 wechat-format[1] 这款微信公众号编辑器，做了一些定制开发，其中的前端页面是使用 Vue 编写的，虽然没有系统学习过 Vue，但是觉得挺有意思，于是就把 Vue 的官方文档学习了一遍，分享出来，就当作 Vue 的入门吧。
Vue 引入
Vue 的使用其实非常简单，刚开始学习的时候，我们最好不要引入脚手架。直接在一个 HTML 页面中，引入 Vue 的文件即可。例如下面这样：
| hglzs.com |
georgicasoftware.com
<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>Hello Vue!</title></head><body> <div id="app"> <p>{{ message }}</p> </div></body><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script> var app = new Vue({ el: '#app', data: { message: 'Hello, World', }, });</script></html>如上代码所示，连下载 Vue 都不需要，直接使用官方提供的 CDN 文件即可。熟悉模版引擎的应该知道，{{ message }} 表示在页面中引入了一个变量，变量值从哪里来呢？
脚本中有一段 new Vue() 的代码，先不用管它是做什么的，你现在只需要知道 message 变量值是从它里面的 data 参数传过来的即可。el 参数指定了 Vue 的作用范围，data 定义
| qs-photo.com |
了页面中所有的变量。你大概应该猜到，用浏览器打开这个页面，我们第一个 Hello, World 程序就完成了。