iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
1
自我挑戰組

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

Day7 切版任務(三):首頁畫面搭配ScrollReveal,網頁畫面動次動(2)

  • 分享至 

  • xImage
  •  

本文同步發表於斜槓女紙部落格:切版任務(三):首頁畫面搭配ScrollReveal,網頁畫面動次動(2)

Day7 切版任務(三):首頁畫面搭配ScrollReveal,網頁畫面動次動(2)

嗨!又見面了,今天會持續將HTML標籤轉換成Vue.js的指令唷,讓我們繼續切版任務吧!

圖片路徑問題

昨天試著用v-bind解決了一些小問題,接著就想把section-1裡面的兩個圖片:背景、Logo也轉換成可以動態指定的路徑,所以跟著官方的說明將HTML結構調整如下:

//調整前
<img src="images/bg_01.png">

//調整後
<img :src="images/bg_01.png">

然後console就報錯了....

圖片路徑錯誤提示

然後又試了幾次都一樣,我得內心那個崩潰啊~~

https://ithelp.ithome.com.tw/upload/images/20190922/20120426VOsXHOa4rl.jpg

找了一下才發現是圖片路徑的問題,於是乎將圖片放到static/images/並經路徑存到data中,因為任何放在 static 的檔案,都是可以直接在網址上被讀取的。調整了以後果然成功惹!!!

//HTML
<img :src="headerImg.bannerBg" alt="" srcset="">
<img :src="headerImg.siteLogo" alt="" srcset="">

//JS
headerImg: {
    bannerBg: '/static/images/bg_01.png',
    siteLogo: '/static/images/logo.svg',
}

第四關 整合所有資料

處理完圖片的資料後,接著要來處理文字的部分,先跳出切版來說一下小觀念。

雖然Vue.js的官方文件有說他不是MVVM框架,但其實MVVM的觀念深深影響著Vue.js的運作,這裡稍稍介紹一下MVVM的觀念。

https://ithelp.ithome.com.tw/upload/images/20190922/20120426QJZvl9uRLK.jpg

coding時不會去寫到VM的部分,只需寫model的部分,當畫面改變時改變資料狀態,而當資料狀態改變時也會改變畫面。

先前有提過先前有提過Vue.js是以資料狀態操作畫面,所以盡可能的預先定義資料很重要!將資料統一全部放到data之中,方便我們維護。

data可用來儲存元件內部狀態或資料,其資料型態可以是objectfunction


那麼我是怎麼將首頁的資料統整到data中呢?直接先來看看整理過後的程式碼

data: {
    //通用CLASS屬性,可能很多元件都會用到
    flexCenter: ['d-flex', 'justify-content-center', 'align-items-center'],
    sectionMinheight: { minHeight: '100vh' },

    //首頁的所有資料
    headerSetion: {
        headerImg: {
            bannerBg: '/static/images/bg_01.png',
            siteLogo: '/static/images/logo.svg',
        },
        siteTitle: "I don't want to work",
        logoTxt: '<span>不 想</span> <span>上 班</span>',
    }
}

我將首頁的所有資料以headerSetion命名,以物件的方式區分成:headerImg(圖片資料)siteTitle(Banner 標語) logoTxt(網站Title)

  • siteTitle: "I don't want to work":以字串的方式,利用雙大括號{{ 資料參數 }}的方式將字串放到畫面上。
<div class="logo" :class="'position-absolute'"><img :src="headerSetion.headerImg.siteLogo" alt=""
                            srcset="">
                        {{headerSetion.siteTitle}}</div>
  • logoTxt: '<span>不 想</span> <span>上 班</span>':使用v-html指令將內容呈現在畫面上,這邊要注意不要使用此指令任意接受其他不可信任的HTML,很容易會導致有XSS攻擊的風險
<div class="title" :class="'position-absolute'" v-html="headerSetion.logoTxt"></div>

PS.也許以後我又會改其他方式,誰叫我是個三心二意的女紙XD

小宇宙燃燒到這邊先喘口氣,最後的動畫特效ScrollReveal明天再來跟大家分享窩!


參考資料


上一篇
Day6 切版任務(二):首頁畫面搭配ScrollReveal,網頁畫面動次動(1)
下一篇
Day8 切版任務(四):首頁畫面搭配ScrollReveal,網頁畫面動次動(3)
系列文
前端史萊姆與Vue的三十天時光冒險30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言