发一篇技术类文章：Vue 入门笔记

今天写一篇技术笔记，关于 Vue 入门的内容。

关于技术类的文章，我一般很少写，因为自己学习技术的时间并不长，水平也菜，工作内容大部分是需求相关，跟技术还是有些距离，学习了解技术都是为了解决工作中实际的需求，也当作自己的业余爱好了。

有这么个奇怪爱好，也是因为难以忍受一些低效的工作方式，总想着能不能通过技术的手段来解决。很多时候，都是自己分析需求，自己实现，最后部署上线。曾经以为自己是个全栈工程师，慢慢了解更多后，才发现自己是「全干工程师」，后来干脆把工程师的名头也去掉了。

正文

前段时间，根据 wechat-format^[1] 这款微信公众号编辑器，做了一些定制开发，其中的前端页面是使用 Vue 编写的，虽然没有系统学习过 Vue，但是觉得挺有意思，于是就把 Vue 的官方文档学习了一遍，分享出来，就当作 Vue 的入门吧。

Vue 引入

Vue 的使用其实非常简单，刚开始学习的时候，我们最好不要引入脚手架。直接在一个 HTML 页面中，引入 Vue 的文件即可。例如下面这样：

hglzs.com

        Hello Vue!      {{ message }}

如上代码所示，连下载 Vue 都不需要，直接使用官方提供的 CDN 文件即可。熟悉模版引擎的应该知道，{{ message }} 表示在页面中引入了一个变量，变量值从哪里来呢？

脚本中有一段 new Vue() 的代码，先不用管它是做什么的，你现在只需要知道 message 变量值是从它里面的 data 参数传过来的即可。el 参数指定了 Vue 的作用范围，data 定义

qs-photo.com

了页面中所有的变量。你大概应该猜到，用浏览器打开这个页面，我们第一个 Hello, World 程序就完成了。