一，下载vue.js文件，随后在前端文件中引入vue.js路径

<script type="text/javascript" src="/vue/vue.js"></script>

这里的路径是根据自己的vue.js本地路径来设置的

二，创建div代码块，在script双标签中创建Vue对象

1,创建div代码块

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

2，创建Vue对象

<script>
  var app = new Vue({
   
  });
</script>

三，利用Vue对象，给指定的标签赋值

el：将Vue对象挂载到哪个标签上。作用范围是此元素以及此元素的后代元素，el可以使用其他选择器选择挂载元素，但是一般推荐使用id选择器，Vue不能挂载到单标签上

data:{} 定义数据变量供挂载的标签使用，这里的msg，name，等等都属于变量名，变量名可以随意定义

methods:定义vue对象中的方法

<script>
  var app = new Vue({
    //把vue对象挂载到指定标签上，以后该标签内就可以使用vue中的成员
    el:"#app",
    //表示定义数据变量
    data:{
      msg: "我们今天学习vue",
      name:"成俊杰",
        //定义数组
        hobby:["游泳","打游戏","吃饭"],
        //定义json对象
        people:{"name":"cjj","age":21,"sex":"男"},
        //定义json集合
        ps:[
                {"name":"cjj1","age":21,"sex":"男"},
                {"name":"cjj2","age":22,"sex":"男"},
                {"name":"cjj3","age":23,"sex":"男"}
            ]
    }
    methods:{
            这里用来定义vue中的事件方法
    }
  });
</script>

四，在挂载的标签中显示定义的属性成员

{{hobby}}：hobby变量类型为数组类型，想要获取数组中的数据，可以直接使用插值表达式，如果想获取一个元素或者指定元素，则需要使用索引下标

{{people}}:people变量类型为json对象类型，使用插值表达式可以直接显示所有的数据，如果想获取指定的元素数据，则可以直接使用 . 的方式拿到，比如 {{people.name}}就可以直接拿到cjj变量名

{{ps[0].name}}:ps变量类型为json集合类型，使用插值表达式可以直接拿到所有元素，但是如果想要拿到指定元素，则需要使用索引下标及 . 的方式拿到变量，比如{{ps[0].name}}就可以拿到集合中索引下标为0的json对象中的name变量

<div id="app">
  <!--插值表达式，用来调用vue里面的成员-->
  {{msg}}<br>
  {{name}}<br>
    {{hobby}}<br>
    {{people}}<br>
    {{ps[0].name}}<br>
    {{ps[1].age}}<br>
    {{ps[2].sex}}
</div>