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

心已赠人 2022-03-25 07:57 277阅读 0赞

### vue的目录大致如下： ###

![在这里插入图片描述][20190119152036695.png]  
目录解析

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

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

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

<template>
    
    
      <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>

最后在页面中呈现的效果应该是这样的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]若有任何疑问或是不解，请在下方评论，谢谢。

[20190119152036695.png]: /images/20220325/23ee356dd3be456eb12157841e2f1308.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]: /images/20220325/4268aa4eaa314b768cbb737de838f3a3.png