vue 目录结构分析 数据绑定 绑定属性 循环渲染数据 数据渲染

vue的目录大致如下：

目录解析

目录文件	项目说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目所依赖的模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 静态资源文件，放置一些图片，如logo等。      components: 目录里面放了一个组件文件，可以不用。      App.vue: 根组件，我们也可以直接将组件写这里，而不使用 components 目录。（这个目录里又分为三层：HTML代码显示；script业务逻辑层；css） main.js: 项目的核心文件。实例化vue，import组件
static	静态资源目录，如图片、字体等。
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件
package.json	项目配置文件（项目名称、项目描述、作者等等）
README.md	项目的说明文档，markdown 格式

接下来我用代码解释vue如何数据绑定、绑定属性和数据渲染

这是在App.vue 中编写的代码

<template>

<!-- vue 的模板里面，所有的内容要被一个根节点包含起来-->
  <div id="app">
    <h3>{{msg}}</h3> <!-- 绑定业务逻辑里的数据  语法格式很简单就是一对花括号{{}}-->
    <br>
    <h3>{{zwk.name}}</h3>   <!--获取对象的属性-->
    <br>
    <hr>
    <ul>
      <!-- 下面代码为循环渲染属性 -->
      <li v-for="a in list"><!-- 循环访问数组-->
        {{a}}
      </li>
    </ul>
    <br>
    <hr>
    <ul>
      <li v-for="a in list1"><!-- 循环访问数组里对象的属性-->
        {{a.title}}
      </li>
    </ul>
    <br>
    <hr>
    <ul>
      <li v-for="a in list2"><!-- 数组里放对象，对象里又有数组-->
        {{a.cate}}
        <ol>
          <li v-for="news in a.list">
            {{news.title}}
          </li>
        </ol>
      </li>
    </ul>

  </div>
</template>
 
<script>
export default { // 表示将组件暴露出去
  // name: 'App',  给组件起个名字，可以删除
  data () {   //业务逻辑里定义的数据 
    return {
      msg: '今天很好', //数据
      zwk:{			
        name:'嘿嘿'	//对象属性
      },
      list:['123','456','789'],//数组
      list1:[			//数组放对象
        {'title':'123'},
        {'title':'123'},
        {'title':'123'},
      ],
      list2:[			//数组里既有对象又有属性
        {
          "cate":"国内新闻",
          "list":[
              {'title':'国内新闻11111'},
              {'title':'国内新闻2222'}
          ]
        },
        {
          "cate":"国际新闻",
          "list":[

              {'title':'国际新闻11111'},
              {'title':'国际新闻2222'}
          ]
        }

      ]
    }
  }
}
</script>

<style>

</style>

最后在页面中呈现的效果应该是这样的
若有任何疑问或是不解，请在下方评论，谢谢。