004_重学Vue_HelloWorldVue 构造函数的参数是一个配置项，配置项包括 el、data 等等。一个简单的

Vue 构造函数的参数是一个配置项，配置项包括 el、data 等等。一个简单的 HelloWold 如下。

<!DOCTYPE html>
<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>初始Vue</title>
    <script src="../js/vue.js"></script>
  </head>

  <body>
    <div id="app">hi，{{name}}</div>
  </body>
  <script type="text/javascript">
    const vm = new Vue({
        el: '#app',
        data: { name: 'allen' }
    })
  </script>
</html>

开发的时候引入 vue.js 可以获得更多的提示信息，生成环境引入 vue.min.js，可以减少体积。

一、配置项说明

el：el 有3种方式指定，分别是 id、类名、元素。el 也可以省略，如果省略 el 就要将 vue 实例通过 $mount 函数挂载，参数是要挂载的元素，和 el 一样，可以通过 id、类名、元素 指定。

通过 id 指定根元素

<body>
  <div id="app">hi，{{name}}</div>
</body>
<script type="text/javascript">
  const vm = new Vue({el: '#app', data: { name: 'allen' }})
</script>

通过类名指定根元素

<body>
  <div class="app">hi，{{name}}</div>
</body>
<script type="text/javascript">
  const vm = new Vue({el: '.app', data: { name: 'allen' }})
</script>

通过 html 元素指定根元素

<body>
  <div id="app">hi，{{name}}</div>
</body>
<script type="text/javascript">
  const vm = new Vue({
      el: document.getElementById('app'), 
      data: { name: 'allen' }
  })
</script>

通过 $mount 函数挂载

new Vue({data:{name: "allen"}}).$mount("#app")

data：要展示的数据，根实例可以是一个对象，因为是全局唯一的，组件中需要使用方法返回一个对象，这样组件间是隔离的。

data写成对象
```
data: { name: 'allen' }
```
data写成函数
```
data: function() {
    return  { name: 'allen' }
}
```
函数的简写形式
```
// 对象中的函数可以去掉 function 和 冒号
data() {
    return  { name: 'allen' }
}
```

二、root 容器

root 容器中使用 html 语法，其中混入了 Vue 语法，root 容器中的内容称为模板。

模板解析流程：

graph TD
解析模板 --> 将模板中的变量用data中对应的属性替换 --> 将替换后的模板替换原来的元素

容器和Vue实例一一对应，一个页面中可以有多个容器和多个实例。实际开发中只有一个Vue实例，配合多个组件使用。

<body>
  <div id="app">hi，{{name}}</div>
  <div id="app2">hi，{{name}}</div>
</body>

<script type="text/javascript">
  const vm = new Vue({el: '#app', data: { name: 'allen' }})
  const vm2 = new Vue({el: '#app2', data: { name: 'alice' }})
</script>

三、展示数据

在模板中可以使用表达式展示数据，表达式可以是：

变量：{{ a }}
运算表达式：{{ a + b }}
函数调用： {{ foo(1) }}
三目表达式：{{ a === b ? "是" : "否" }}

表达式和Vue实例data中的值形成双向绑定，值发生改变时界面自动更新。