付費限定

[4] Vue 頁面結構

閱讀時間約 1 分鐘
在寫頁面之前,先來介紹 Vue 頁面結構。
首先先在 src/components 底下建立一個 home.vue
跟寫一個 html 頁面很像,一樣是分成 寫網頁內容、script、style,三個部分,只是 html 標籤換成了 template。

template

就是相當於原生 html 檔內 html 標籤的部分,我是習慣下一個最外層的 div 去控制整個頁面的樣式。

script

要使用 typescript,所以設定 lang="ts"
你看 script 標籤內有一個 setup,這個是 setup 語法糖,是 Vue 3.2 版開始推出的新功能,這玩意兒出現之後,Vue 瞬間變得超級好寫,更加直覺。
以行動支持創作者!付費即可解鎖
本篇內容共 550 字、0 則留言,僅發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你你目前無法檢視以下內容,可能因為尚未登入,或沒有該房間的查看權限。
avatar-img
9會員
49內容數
比起詳細教學單一技能,網路上或者市面上整合多項技能的教學相對少很多,但要真的完成一項專案往往不是只靠一項技能便能做到。 而且教科書式的完整教學也比較枯燥乏味,因此我想以自身的經驗為例,以全端開發各項技能中最常用到的部分進行講解,讓讀者能夠快速上手掌握全端技能。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
張哲嘉的沙龍 的其他內容
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
要完整的了解整個網頁的開發需要掌握相當多的知識,就算目標只是學習網頁開發中的其中一個部分,比方說只是想成為前端工程師,或是只是想成為後端工程師,最好還是對整個網頁專案整體有一定程度的了解,才不會和其他工程師合作的時候,各開發各的,然後兜不起來 這個系列的教學,希望就算你的目標不是成為全端工程師,也能
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
要完整的了解整個網頁的開發需要掌握相當多的知識,就算目標只是學習網頁開發中的其中一個部分,比方說只是想成為前端工程師,或是只是想成為後端工程師,最好還是對整個網頁專案整體有一定程度的了解,才不會和其他工程師合作的時候,各開發各的,然後兜不起來 這個系列的教學,希望就算你的目標不是成為全端工程師,也能
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
  此曲分為三個樂章:第一樂章長度為30秒、第二樂章長度為2分23秒、第三樂章則為1分40秒。在實際進行演奏之前,演奏家並不明白地知道它最終會呈現成什麼樣子。即便能預見風聲、咳嗽聲與不耐的竊竊私語,「樂器們」會體現出怎樣的聲音?甚至在發生之後,我們也無法確切定義。
這是一個關於柯振冬的故事,他決定放棄都市生活回到鄉下,卻在留給他的舊房子周圍遭遇了一對神祕又恐怖的母女。隨著時間的推移,他發現這對母女的存在伴隨著不祥的詛咒。 在求助於警察後,面臨著時間的倒數與無法擺脫的命運。 這個故事引人思考,究竟惡意存在於何處,什麼樣的命運將等待著他?
Thumbnail
這篇文章講述了一段懷念同學阿偉的故事,回憶起他活潑開朗的個性及兩人間的默契。面對阿偉的突然離世,作者表達了對青春的無奈與脆弱的感受,以及在同學告別式上重拾許多珍貴回憶的心情。這位曾經的陽光男孩,永在心中留下一個特別的位置,成為無法遺忘的名字。
Thumbnail
白世曜翻來覆去睡不太著,於是起身下床。窗外陰雨綿綿,他始終感到坐臥不安,隔著一面牆便是他朝思暮想的伴侶,觸手可及,不過仔細一想,對方是男人,先別說要讓溫旭華愛上自己,他自己又能接受男人嗎? 輕輕轉開房門手把,白世曜踏著無聲的腳步徑直走入另一間臥室,棉被裡正睡得香甜安穩的人面貌俊美秀雅,五官深邃
Thumbnail
我也開始養成對禱告的敏銳度,包括「說」和「聽」的敏銳度。 如果「敏銳」的反義詞是「遲鈍」甚至是「無感」的話,那麼我最無感的禱告大概是謝飯禱告。
Thumbnail
LED 照明在博物館、藝廊和寺廟中發揮相當重要的作用,不僅可照亮展出的藝術品或文物,更可增強整體訪客體驗。適當的照明可以對公眾體驗、欣賞和了解藝術或文物的方式產生重大影響。本文我們將分享照明對於博物館、畫廊和寺廟的重要性,以及在為這些空間設計照明系統時應考慮的不同注意事項和細節因素。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
  此曲分為三個樂章:第一樂章長度為30秒、第二樂章長度為2分23秒、第三樂章則為1分40秒。在實際進行演奏之前,演奏家並不明白地知道它最終會呈現成什麼樣子。即便能預見風聲、咳嗽聲與不耐的竊竊私語,「樂器們」會體現出怎樣的聲音?甚至在發生之後,我們也無法確切定義。
這是一個關於柯振冬的故事,他決定放棄都市生活回到鄉下,卻在留給他的舊房子周圍遭遇了一對神祕又恐怖的母女。隨著時間的推移,他發現這對母女的存在伴隨著不祥的詛咒。 在求助於警察後,面臨著時間的倒數與無法擺脫的命運。 這個故事引人思考,究竟惡意存在於何處,什麼樣的命運將等待著他?
Thumbnail
這篇文章講述了一段懷念同學阿偉的故事,回憶起他活潑開朗的個性及兩人間的默契。面對阿偉的突然離世,作者表達了對青春的無奈與脆弱的感受,以及在同學告別式上重拾許多珍貴回憶的心情。這位曾經的陽光男孩,永在心中留下一個特別的位置,成為無法遺忘的名字。
Thumbnail
白世曜翻來覆去睡不太著,於是起身下床。窗外陰雨綿綿,他始終感到坐臥不安,隔著一面牆便是他朝思暮想的伴侶,觸手可及,不過仔細一想,對方是男人,先別說要讓溫旭華愛上自己,他自己又能接受男人嗎? 輕輕轉開房門手把,白世曜踏著無聲的腳步徑直走入另一間臥室,棉被裡正睡得香甜安穩的人面貌俊美秀雅,五官深邃
Thumbnail
我也開始養成對禱告的敏銳度,包括「說」和「聽」的敏銳度。 如果「敏銳」的反義詞是「遲鈍」甚至是「無感」的話,那麼我最無感的禱告大概是謝飯禱告。
Thumbnail
LED 照明在博物館、藝廊和寺廟中發揮相當重要的作用,不僅可照亮展出的藝術品或文物,更可增強整體訪客體驗。適當的照明可以對公眾體驗、欣賞和了解藝術或文物的方式產生重大影響。本文我們將分享照明對於博物館、畫廊和寺廟的重要性,以及在為這些空間設計照明系統時應考慮的不同注意事項和細節因素。