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>

原文地址：https://www.cnblogs.com/zsczsc/p/9552466.html