想要实现的效果：在页面上展示“Hello，World”字符串
1、准备一个【容器】div
想要把“Hello，World”放置在页面上，首先需要准备一个HTML的块级元素div，来承接内容。所以，我们先在<body>中定义<div>：
2、传统实现方式
直接将想要展现的内容，写在html中，如下：
右键，选择open with Live Server，便可看到想要的效果了。
但是，这种方式的缺点很明显，这段文字是个hardcode，当我想要修改时，必须来这里修改，而且，如果这段文字需要多处使用，后期维护起来就更是不方便了。 我们希望，hello后面的字符串，作为一个变量。
3、Vue实现方式
下面解析一下。
3.1 创建Vue实例
const vm = new Vue()
3.2 传参：配置对象/选项对象
创建Vue实例时，可以根据需要传递所需要的参数，官网称【选项对象】，也有人称【配置对象】，其中都有哪些参数可以传递，参考官网API列表中包含“选项”字样的，如下：
这里仅介绍几个常用的。
3.2.1 el
其中，el是element的简称，表示当前的Vue实例的挂载点。它的值有两种：
1） 通常为CSS 选择器：el: '#root'
“#root”是css选择器语法字符串，表示id=“root”的html元素，也就是我们前面准备的需要展示内容的容器div：
2）也可以是HTMLElement 实例：el: document.getElementById('root')
这种方式使用js的DOM树获取元素，比较笨重，较少使用。
综上，通过el参数，当前Vue实例就和前面定义的div页面元素绑定在一起了。
3.2.2 data
Vue 实例的数据对象。虽然通过el将Vue实例与div元素绑定了，但是div中要展示的数据还没有定义，那么data，便是用来定义需要传递给页面元素div的数据了。
data的值为一组key-value类型的对象（json串），这样可以灵活地传递多组数据。
1）data中通过key-value定义数据并赋值
2）页面元素使用插值方式读取data中的数据并解析
一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新。
模板：这种容器中的代码，被称为【Vue模板】，即常常看到的template。它们遵循HTML规范，只是混入了特殊的Vue语法。
插值：在Vue中，插值通常是指在模板中使用双大括号
{{ }}来绑定表达式的文本内容。这可以是简单的数据属性，也可以是复杂的JavaScript表达式，比如{{date.now()}}。
js表达式和js语句的不同
JavaScript表达式是由操作数、运算符和函数调用等组成的代码片段，用于计算并返回一个值。例如：
- 1 + 2 // 算术表达式
- a * b // 变量相乘
- 10 > 5 // 关系表达式
- true && false // 逻辑表达式
- a() // 函数调用表达式，上例中的date.now()
JavaScript语句则是一组命令，用于执行特定的任务或操作。语句可以通过关键字（如if、for、while等）和分号来表示。语句执行完成后，可能会对变量进行赋值、改变程序的控制流程或执行特定的操作。常见的语句类型包括条件语句、循环语句、赋值语句、函数定义等。
4、注意事项
4.1 data中的数据只能被它所绑定的页面元素使用
如果在div元素外面使用插值，是无法被读取并替换的。如下图，在id='root'的容器外面写了一行html代码并使用插值，想要读取name
效果：无法识别和替换，被当成一个字符串直接展示。
4.2 Vue实例和容器是一一对应的
真实开发中只有一个vue实例，会配合着组件一起使用。
补充
如果我们打开浏览器的开发者模式，并使用shift+F5强制刷新，会在console中看到如下错误：
浏览器打开网页时，会默认发送页签图标请求，在network中可看到该条请求。
但是因为我们的根目录下没有这个图标，所以报404错误。放置一个favicon.ico在根目录下即可。比如我将我的小兔子放置到文件夹的根目录下：
刷新，请求成功。
我的页面标签，就变成了一只小兔子：
