二、创建一个Vue实例

创建和使用Vue实例，分为4部：

第1步 创建语法

<script>
      let vm = new Vue({});
</script>

释：给Vue( )传了一个参数选项，是一个空对象；

第2步 设置数据

 let vm = new Vue({
     //实例vm的数据
   data:{
     name: "hiddensmile",
     sex : "女"
     }
  });

释：参数对象不再是一个空对象，它包含一个属性：data，而data的值也是一个对象，这个对象就是我们给实例vm设置的数据了。比如：name为hiddensmile，sex为女等等。

第3步 挂载元素(怎么把数据展示在视图上呢? 通过挂载元素)

视图view部分：

<div id="app"></div>

视图（html部分）上我们有一个id为“app”的div元素。

let vm=new Vue({
   //挂载元素
   el:'#app',
   //实例vm的数据
   data:{
      name:"hiddensmile",
      sex:"女"
    }
 })

释：不但有属性“data”，还多了个属性：“el”，el参数提供一个在页面上已经存在的DOM元素，作为vm的挂载目标。表示vm和id为“app”的DOM节点就关联起来了；

第4步 渲染（把vm的数据绑定到指定的视图上）

<div id="app">
   我是{{ name }},
   是{{sex}}性
</div>

释：需要用一个双大括号：{{ }} 即可，{{ name }} 和 {{ sex}} 就是我们给实例vm设置的数据name和sex，我们用{{ }}可以直接读取到它们的值；

数据渲染成功

总结一下：创建并使用一个Vue实例并不难，仅需4步走：

创建Vue实例步骤