vue2.* 目录结构分析 数据绑定 循环渲染数据 数据渲染02

Posted zsczsc

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue2.* 目录结构分析 数据绑定 循环渲染数据 数据渲染02相关的知识,希望对你有一定的参考价值。

一、目录 结构分析

node_modules:项目依赖文件(也可以说是模块)

src:开发时所用的资源

  assets:静态资源文件

  App.vue:根组件(最基础的公共页面)

  main.js:实例化vue,引入基础组件

package.json:项目配置文件(管理项目的名称,版本号,需要的模块等)

vue.config.js:vue配置文件

二、 数据绑定  循环渲染数据 数据渲染

<template>
<div id="app">
  <!-- 绑定数据 -->
<h2>{{msg}}</h2>
  <br>
  <!-- 绑定对象数据 -->
  <h3>{{obj.name}}</h3>
  <br>
  <!-- 循环数组数据 -->
  <ul>
    <li v-for="item in list">
      {{item}}
    </li>
  </ul>
  <br>
  <!-- 循环数组中的对象数据 -->
  <ul>
    <li v-for="item in list1">
      {{item.title}}
    </li>
  </ul>
  <!-- 循环嵌套数据 -->
  <ul>
    <li v-for="item in list2">
      {{item.cate}}
      <ol>
        <li v-for="news in item.list">
          {{news.title}}
        </li>
      </ol>
    </li>
  </ul>
  <br>
</div>
</template>
<script>
export default {
  data () {/*业务逻辑里面定义的数据*/
   return {
     msg:‘你好,世界‘,
     obj:{
       name:"张三"
     },
     list:[1,2,3],
     list1:[
       {‘title‘:1},
       {‘title‘:2},
       {‘title‘:3},
       {‘title‘:4}
     ],
     list2:[
       {
         "cate":"国内新闻",
         list:[
           {"title":国内新闻1},  
           {"title":国内新闻2}, 
           {"title":国内新闻3}
         ]
       },
       {
         "cate":"国际新闻",
         list:[
           {"title":国际新闻1}, 
           {"title":国际新闻2},
           {"title":国际新闻3}
         ]
        }
     ]
   }
 }
} </script>

 
































































以上是关于vue2.* 目录结构分析 数据绑定 循环渲染数据 数据渲染02的主要内容,如果未能解决你的问题,请参考以下文章

数据结构——双向链表循环链表

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

数据结构——带头双向循环链表

数据结构之链表(JAVA)

Vue2从入门到精通详解Vue数据双向绑定原理及手动实现双向绑定

数据结构开发:循环链表与双向链表