【Vue学习总结】4.绑定数据和对象、循环数组渲染数据

接上篇《3. Vue目录结构分析》

上一篇我们主要讲解了Vue的目录分析，本篇我们主要来介绍Vue的基础语法，绑定数据、对象，以及如何循环数组和渲染数据。

前几篇我使用的代码编辑器是HBuilder：

HBuilder主要用来开发手机APP端的前端页面比较方便，但由于我们主要目的是开发Web端，暂时不以Web app为主。所以目前比较好用的还是Visual Studio Code：

Visual Studio Code它里面有终端窗口，可以启动项目或者使用其它的npm指令，不用额外打开cmd控制台，然后还有很多其它前端的便捷工具，所以后面的教程不再使用HBuilder，改用VS。

这里我用vs打开之前的项目后，vs就很智能的告诉我，需要下载vue的解析插件，因为不下载插件的话，标签什么的编译器无法识别，也不能给提示：

安装完之后，再看代码，所有的标签和样式就有颜色了，而且可以给提示：

废话不多说，开始本篇的学习。

一、vue代码结构整体介绍

对于前一篇介绍的我们自行搭建的vue-demo1工程， 我们最终要开发的部分，其实也就是组件部分（子组件可扩展开发）：

我们先不去关心其它的文件到底什么意思，怎么来用起来，我们先从主组件App.vue入手，去了解vue的一些基本语法，它会让我们后面更好理解整个Vue的结构。我们打开App.vue，可以看到其中的代码结构：

我们简化一下内容：

可以看到整个文档包含了三大内容，分别是