iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 18
1
自我挑戰組

前端史萊姆與Vue的三十天時光冒險系列 第 18

Day18 閒不下來的史萊姆(一):將房間列表改用x-template 建立元件

本文同步發表於斜槓女紙部落格:Day18 閒不下來的史萊姆(一):將房間列表改用x-template 建立元件

Day18 閒不下來的史萊姆(一):將房間列表改用x-template 建立元件

鐵人賽進展到今天,默默地也快突破20天。前幾天寫完元件的基礎概念和範例以後,我的心一直有個小惡魔催促我打開VsCode專案把之前亂八糟的程式碼稍微整理一下。

然後我就打開VsCode惹!!!

湯姆梗圖


首頁的房間列表頁面原始Code如下

<div class="col-xs-12 col-md-6 col-xl-4" v-for="item in rooms" :key="item.id">
    <div class="room-list p-3 my-3" :class="'d-flex'">
        <h3 class="room-title">{{item.name}}</h3>
        <div class="card rounded-0">
            <div class="card-body">
                <figure class="room-thumb-img" :style="{ background: 'url('+ item.imageUrl +')' }">
                    <figcaption></figcaption>
                </figure>
                <div class=" d-flex room-info">
                    <div class="col-4">
                        <small>人數</small>
                        <p>1</p>
                    </div>
                    <div class="col-4">
                        <small>人數</small>
                        <p>1</p>
                    </div>
                    <div class="col-4">
                        <small>人數</small>
                        <p>18</p>
                    </div>
                </div>
                <div class="room-amenities">wifi , 早餐 , 電話 , 空調 , 冰箱 , 禁止吸煙 , 可帶寵物</div>
                <div class="room-price">
                    <div><span>假日</span><span class="h-price pr-0">${{item.holidayPrice}}</span></div>
                    <div><span>平日</span><span class="n-price pr-0">${{item.normalDayPrice}}</span></div>
                </div>
            </div>
        </div>
    </div>
</div>

這邊根據Day15 萬丈高樓平地起(3):元件 Components 簡介所介紹的x-template元件方法改寫後如下:

//HTML
<card-rooms :room-lists="item" v-for="item in rooms" :key="item.id" v-if="item.imageUrl"></card-rooms>
//x-template
<script type="text/x-template" id="cardElement">
    <div class="col-xs-12 col-md-6 col-xl-4">
        <div class="room-list p-3 my-3" :class="'d-flex'">
            <h3 class="room-title">{{roomLists.name}}</h3>
            <div class="card rounded-0">
                <div class="card-body">
                    <figure class="room-thumb-img" :style="{ background: 'url('+ roomLists.imageUrl +')' }">
                        <figcaption></figcaption>
                    </figure>
                    <div class=" d-flex room-info">
                        <div class="col-4">
                            <small>人數</small>
                            <p>1</p>
                        </div>
                        <div class="col-4">
                            <small>人數</small>
                            <p>1</p>
                        </div>
                        <div class="col-4">
                            <small>人數</small>
                            <p>18</p>
                        </div>
                    </div>
                    <div class="room-amenities">wifi , 早餐 , 電話 , 空調 , 冰箱 , 禁止吸煙 , 可帶寵物</div>
                    <div class="room-price">
                        <div><span>假日</span><span class="h-price pr-0">${{roomLists.holidayPrice}}</span></div>
                        <div><span>平日</span><span class="n-price pr-0">${{roomLists.normalDayPrice}}</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>
//JS
Vue.component('card-rooms', {
    props: ['roomLists'],
    template: '#cardElement',
});
  • 將整個元件以<card-rooms>標籤包裹,利用v-if排除因為ajax延遲而導致的報錯問題。
  • 將原本的HTML程式碼以#cardElement包裹在x-template元件中
  • 最後使用Vue.componentprops完成元件和畫面的資料串連

今天就先到這囉,明天我們繼續看下去~

讓我們繼續看下去


上一篇
Day17 萬丈高樓平地起(5):元件間的溝通橋樑Props(2)
下一篇
Day19 閒不下來的史萊姆(二):網站基本資料統整與footer元件實作
系列文
前端史萊姆與Vue的三十天時光冒險30

尚未有邦友留言

立即登入留言