BS4(4)-首頁(Vue結合)

 

S0:JSON資料內容

{
  "class":[
    {
      "title": "1.視覺設計",
      "count": "01",
      "items":["跨界創意視覺設計","響應式跨平台網頁設計","Painter原畫美術設計","行動裝置UI設計"],
      "desc": "<p>【來巨匠學視覺設計 實現你的創業理想!】從跨界創意視覺設計開始,打穩美學基礎。除了獲得軟體操作的基本概念,還能獲得核心工作能力及絕佳的應用技能。</p>\r\n<p>美工平面套課課程的設計,將以設計的角度出發,運用Illustrator插畫工具的功能,深入說明點線面應用技巧,帶領您將虛擬想像,化為現實影像。結合Photoshop 中的強大影像處理技巧功能,您不但能將插畫作品,搭配相片作品進行影像創作,設計出更精緻的視覺影像。</p>\r\n<p>最後,要將影像和插畫成品,應用在手冊、廣告文宣等刋物,透過Indesign 的強大編排功能,讓文字成為影像設計的一部份,為設計作品加分。</p>"
    },
    {
      "title": "2.手機APP設計",
      "count": "02",
      "items":["iOS APP企業實務應用開發","Android穿戴式雲端應用開發","行動裝置UI視覺設計","iOS APP程式實務應用"],
      "desc": "<p>【化手機為商機 成為首屈一指的APP開發者!】由淺入深逐步教你元件應用、畫面處理、檔案與資料庫建構。包含智慧手錶、智慧眼鏡等等穿戴式雲端APP都教你開發,征服IPHONE及Android系統市場成為人生勝利組!</p>\r\n<p>隨著智慧型手機的普及,APP已經變成我們生活中不可缺的一部份。但當你還在當低頭族的時候,已經有許多人已經抬起頭,把「手機」轉換成「商機」,開發出許多APP供人下載。究竟行動APP還發展出哪些商機和可能性呢,請看看我們的影片。</p>\r\n <p>獨立開發設計IOS應用程式與遊戲,能夠結合定位和導航等Google地圖運用,處理相機、聲音、影像等多媒體程式,以及操控感應器、閃光燈、陀螺儀等硬體設備,並熟練操作XML和JSON等常用網路檔案格式。</p>"
    },
    ...
    ...
  ],
  "exams":[
    {
      "title": "1.JQ12_Photoshop ACA國際認證",
      "count": "01",
      "hr":20,
      "items":["ACA認證考試介紹","影像之取得、影像檔案管理","基礎工具介紹","圖層操作與應用","繪圖工具與文字工具應用","進階影像處理、合成應用","ACA認證模擬試題練習與解說"]
    },
    {
      "title": "2.JQ11_Illustrator ACA國際認證",
      "count": "02",
      "hr":18,
      "items":["設定專案要求","瞭解準備圖形時使用的設計元素","瞭解Illustrator介面","使用Illustrator建立圖形","進行圖形封存、匯出及出版"]
    },
    ...
    ...
  ]
}

 

利用vue 及 axios.js

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>

安裝擴充外掛工具 【Vue.js devtools】