vue项目结构

其中node_modules是我们项目所需的各种依赖，src是我们开发时候所需的一些资源，package.json是我们的配置文件管理项目的各种配置以及版本号和名称，readme是项目的说明文件。
我们主要编写的是src里面的文件，assets是存放静态的资源文件，App.vue是存放的根组件，

组件

vue中所有的内容要被一个根节点包含起来，我写了示例代码包含了对数据、数组、对象以及对象数组等等我还添加了注释。

<template>
  <div id="app">
    <h2>{{msg}}</h2><!--绑定js里面的数据中的msg，使用的语法是两个花括号-->
    <br>
    这是一个根组件
    <h2>{{obj.name}}</h2><!--与绑定数据一样，不同的是获取对象里面的数据也是使用花括号-->
    <br>

      <ul>
        <li v-for="item in list"><!--定义item为list中的循环，循环语法v-for-->
          {{item}}
        </li>
      </ul>
      <br>
    <ul>
      <li v-for="item1 in list1"><!--循环对象数组的方法一样-->
        {{item1.title}}
      </li>
    </ul>
    <br>
    <ul>
      <li v-for="item2 in list2"><!--嵌套列表前面与普通列表一样-->
        {{item2.title}}
        <ol>
          <li v-for="item3 in item2.item"><!--嵌套部分用的是循环里面的对象-->
            {{item3.title}}
          </li>
        </ol>

      </li>
    </ul>

  </div>
</template>

<script>
export default {//固定语法export default表示把组件暴露出去
  name: 'App',// 表示给组件名字
  data(){//业务逻辑里面的数据
    return{
      msg:'你好vue',
      obj:{
        name:"张三"
      },
      list:["1","2","3"],
      list1:[
        {"title":"11"},
        {"title":"22"},
        {"title":"33"},
        {"title":"44"}
      ],
      list2:[
        {
          "title":"一级标题",
          "item":[
            {"title":"二级标题"},
            {"title":"二级标题"},
            {"title":"二级标题"},
            ]
        },
        {
          "title":"一级标题",
          "item":[
            {"title":"二级标题"},
            {"title":"二级标题"},
            {"title":"二级标题"},

          ]
        }
      ]
    }
  }
}
</script>

其中重要的是引用数据是使用的{{}}（双重花括号），以及对象的数据是通过 对象名.数据名 获取。以及循环是用v-for来完成。

运行结果