JQ 與 Vue 結合

JQ 與 Vue 結合

範例結果

 

一、【Vue】準備

S0:CDN link

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

S1:Script 資料data準備

var travels = [
      {
        title: "北歐丹麥│哥本哈根",
        title_en: "Kobenhavn",
        desc: "現代化建築與歷史文物的結合"
      },
      {
        title: "義大利│威尼斯",
        title_en: "Venice",
        desc: "滄桑又有活力的浪漫水都 愈夜愈美麗"
      },
      {
        title: "英國倫敦│泰晤士河畔",
        title_en: "River Thames",
        desc: "泰晤士河沿岸的美麗景致與觀光景點,白晝明亮壯麗,夜晚增添幾許浪漫情愫"
      },
      {
        title: "阿聯酋│阿布扎比大清真寺",
        title_en: "Sheikh Zayed BinSultan Nahyan Mosque",
        desc: "這座極到奢華、富麗堂皇的清真寺就在阿布達比,與世人見面"
      },
      {
        title: "德國│阿爾斯特拱廊",
        title_en: "Alsterarkaden",
        desc: "優雅的白色阿爾斯特拱廊沿著湖畔延伸,令人想起威尼斯的典雅風格。"
      }
    ];

S2:Vue 資料 data 載入

S2-1:html結構

  <div id="app">
    
  </div>

S2-2:Vue建立

    new Vue({
      el: '#app',
      data: { lists: travels }
    });
    console.log(travels);