一、目錄 結構分析

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