哎……万万没想到，我居然学会了使用 Vue.js，还用它开发了好几个项目。
Vue.js 是一套用于构建用户界面的渐进式框架，最喜欢它的一点是，它是面向数据开发的，习惯后端开发的人，瞬间就能喜欢上了。
反正还有好多优点，比如 Vue 的作者「尤雨溪」是个中国帅哥，中国靓仔的开源项目现在成长为颇受欢迎的国际化社区。
Vue.js 不适合 0 基础的小白，如果你也想使用它的话，那你赶紧先去学学 HTML、CSS、JavaScript 的知识，否则只能是「鸭同鸡讲，眼碌碌」。
快速体验 —— 如何将数据呈现至页面？
需要两个东西：
- 开发工具 —— Visual Studio Code
- HTML 文件 —— index.html
先去 Visual Studio Code 官网（https://code.visualstudio.com），下载一个开发工具，就想你要喝水了，总需要有个杯子（工具）一样。
然后，我们再创建一个 index.html 文件，并用 VSCode 打开。
我们现在想要使用 Vue.js，那就需要「安装」它，有 4 种方式可以实现，具体如下：
- 在页面上以 CDN 包的形式导入（等下我们先用这种方式，既简单又快）；
- 下载 JavaScript 文件并自行托管；
- 使用 nmp 方式；
- 使用官方的 CLI 脚手架来构建一个项目，啥都有了。
我们来看，如何以 CDN 包的形式导入？其实，非常的简单：
<script src="https://unpkg.com/vue@next"></script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello Vue</title> <!-- 其实，就一句即实现引入 Vue.js --> <script src="https://unpkg.com/vue@next"></script> </head> <body> </body> </html>
怎么用呢？那就有讲究了，有两种方式：
- 运行时 + 编译器
- 如果你想在客户端编译模板，则需要编译器；
- 可以将你的数据传递给 template 选项
- 也可以使用元素的 DOM 内 HTML 作为模板挂载到元素
- 仅运行时（后面再讲）
- 当使用
vue-loader时，*.vue文件中的模板会在构建时预编译为 JavaScript，在最终的捆绑包中并不需要编译器，因此可以只使用运行时构建版本。
案例 1
先来看「运行时 + 编译器」的方式，这也是 Vue.js 的核心，它是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，详细构建步骤如下：
- 创建一个 Vue 的实例；
- 使用
Vue.createApp()即可创建一个 Vue 实例
- 提供一个 template 模版，放点儿数据；
- 使用
template:''即可配置模版
- 挂载 Vue 实例到对应位置；
- 使用
.mount('#xxx')即可挂载 Vue 实例
- 最后，展示数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello Vue</title> <!-- 其实，就一句即实现引入 Vue.js --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <!-- 第四步，展示数据 --> <div id="root"></div> </body> <script> // 第一步，创建一个 Vue 的实例 Vue.createApp({ // 第二步，提供一个 template 模版，放点儿数据 template:'<div>I Love You</div>' }).mount('#root'); // 第三步，挂载 Vue 实例到 id 为 root 的位置 </script> </html>
代码中，我们通过使用 Vue.createApp() 的方式，创建了一个 Vue 实例。接着，我们在实例里面，通过使用 template 选项为它提供了一个字符串“I Love You”，作为展示到页面的数据。
怎样才能在页面中展示数据呢？我们使用 mount(“#id”) 来挂在数据到对应的位置上，所以，数据被挂载到 body 中 id 为 root 的 div 标签上。
案例 2
另外，我们还可以把数据提出来，专门放在 data 选项中去返回，在 template 中通过变量来获取数据，详细步骤如下：
- 创建一个 Vue 的实例；
- 使用
Vue.createApp()即可创建一个 Vue 实例
- 提供一个 data 选项，返回数据；
data(){return xxx}
- 提供一个 template 模版；
- 使用
template:''即可配置模版
- 挂载 Vue 实例到对应位置；
- 使用
.mount('#xxx')即可挂载 Vue 实例
- 最后，展示数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello Vue</title> <!-- 其实，就一句即实现引入 Vue.js --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <!-- 第五步，展示数据 --> <div id="root"></div> </body> <script> // 第一步，创建一个 Vue 的实例 Vue.createApp({ // 第二步，提供一个 data 选项，返回数据 data() { return { content: 'I Love You' } }, // 第三步，通过表达式获取变量的数据，放到模板中 template:'<div>{{ content }}</div>' }).mount('#root'); // 第四步，挂载 Vue 实例到 id 为 root 的位置 </script> </html>
通过两种方式给大家演示了一个 Vue 应用，非常的简单。你看，咱们现在的数据和 DOM 已经被建立了关联，所有东西都是响应式的。
案例 3
比如说，我们可以实现一个「定时器」来验证一下，此时需要用到一个 mounted() 函数，当你页面加载完成后，会被调用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello Vue</title> <!-- 其实，就一句即实现引入 Vue.js --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <!-- 第六步，展示数据 --> <div id="root"></div> </body> <script> // 第一步，创建一个 Vue 的实例 Vue.createApp({ // 第二步，提供一个 data 选项，返回数据 data() { return { content: 0 } }, // 第三步，页面加载完成后，会调用 mounted() 函数 // 并执行定时器 mounted() { setInterval( () => { this.content++ }, 1000) }, // 第四步，通过表达式获取变量的数据，放到模板中 template:'<div>{{ content }}</div>' }).mount('#root'); // 第五步，挂载 Vue 实例到 id 为 root 的位置 </script> </html>
先聊这么多，我们后面会围绕以下三大块去分享：
- Vue.js 的知识体系
- 基础语法
- 组件
- 动画
- Composition API
- Vue 生态全家桶
- ……
- 企业级工程化开发标准和流程
- 企业级开发标准
- 工程化开发流程
- ……
- 系统设计模式和思考框架
- 数据驱动
- MVVM 设计模式
- ……
