开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情
前言
学习一项技术是为解决一类问题。传统的前端开发基本都是 javascript + css +html。
- html 是网站页面的基本结构，然后通过 css 和 js 等其他技术进行修饰和增强
- css 像是化妆品一样，对页面样式、格式和布局的修饰
- js 像是魔法师一样，控制各个元素的行为。让其能够有动态的效果。
传统实现 Hello world
看下下面简单的一个页面 hello.html 展示结果：
<!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>Document</title>
<style>
body {
font-size: large;
}
</style>
</head>
<body>
hi, <span style="color: red">world</span>
</body>
<script></script>
</html>
在浏览器打开 hello.html 文件，就可以看到页面的展示效果。页面能够呈现出效果，主要是通过浏览器的渲染。浏览器能够对 HTML 格式进行正确的解析然后渲染出效果。
浏览器对 HTML 文件进行解析，生成 DOM 树 。CSS 也会进行解析生成CSSOM树。两个数据树内容结合生成渲染树。再根据渲染树进行回流、重绘到最后的展示。
整个开发下来就会发现很多问题：
- 没有响应式更新，局部更新的话就会需要重新 innerHtml
- 部分相同功能的就会写更多重复的代码
Vue 实现 hello world
Vue 是一套构建用户界面的渐进式框架。不仅轻量，还有数据双向绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。
- 组件化，便于理解，且代码量少
- 双向数据绑定，实时数据变化
- 响应式设计，适配各种设备
- Vue 路由可以实现局部更新
简单实现 hello 页面
引用 CDN
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
新建页面并加入 vue 代码
<body>
<div id="hello">hi , <span>{{message}}</span></div>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#hello",
data: {
message: "world",
},
});
</script>
</body>
从上面源代码可以看到，返回不同 Vue 实例中 message 值，就可以得到不同的数据内容。这种将数据和 DOM 关联就是响应式设计。这样就可以设计一套模版，返回不同 Vue 实例就能得到不同的页面效果。
