付費限定

[4] Vue 頁面結構

更新於 發佈於 閱讀時間約 1 分鐘

在寫頁面之前,先來介紹 Vue 頁面結構。

首先先在 src/components 底下建立一個 home.vue

raw-image

跟寫一個 html 頁面很像,一樣是分成 寫網頁內容、script、style,三個部分,只是 html 標籤換成了 template。

template

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

script

要使用 typescript,所以設定 lang="ts"

你看 script 標籤內有一個 setup,這個是 setup 語法糖,是 Vue 3.2 版開始推出的新功能,這玩意兒出現之後,Vue 瞬間變得超級好寫,更加直覺。

raw-image
以行動支持創作者!付費即可解鎖
本篇內容共 550 字、0 則留言,僅發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你你目前無法檢視以下內容,可能因為尚未登入,或沒有該房間的查看權限。
留言
avatar-img
留言分享你的想法!
avatar-img
張哲嘉的沙龍
9會員
49內容數
比起詳細教學單一技能,網路上或者市面上整合多項技能的教學相對少很多,但要真的完成一項專案往往不是只靠一項技能便能做到。 而且教科書式的完整教學也比較枯燥乏味,因此我想以自身的經驗為例,以全端開發各項技能中最常用到的部分進行講解,讓讀者能夠快速上手掌握全端技能。
張哲嘉的沙龍的其他內容
2022/10/10
Obtain certificate 我們用之前提到的 Let’s Encript 來獲得憑證 在 nginx/sites-available 再增加一個網站設定,然後再做個連結到 nginx/sites-enabled,設定的內容就隨便寫個 server_name 和 listen 就好了 然後
Thumbnail
2022/10/10
Obtain certificate 我們用之前提到的 Let’s Encript 來獲得憑證 在 nginx/sites-available 再增加一個網站設定,然後再做個連結到 nginx/sites-enabled,設定的內容就隨便寫個 server_name 和 listen 就好了 然後
Thumbnail
2022/10/10
Block direct access by ip 一旦將網站對外,就要開始面對這個險惡的世界每天遭受一堆攻擊,雖然大部分都無關痛癢,幾乎都是機器人在 scan ip 然後在發一些無意義的請求,或者亂試 api,看能不能試出來...,最好是哪麼好試啦,而且加上我們之前在 JWT 篇章講到的 prot
Thumbnail
2022/10/10
Block direct access by ip 一旦將網站對外,就要開始面對這個險惡的世界每天遭受一堆攻擊,雖然大部分都無關痛癢,幾乎都是機器人在 scan ip 然後在發一些無意義的請求,或者亂試 api,看能不能試出來...,最好是哪麼好試啦,而且加上我們之前在 JWT 篇章講到的 prot
Thumbnail
2022/10/10
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內,包含了 SECRET_KEY 等機密資訊,通常專案都會做版本控制上 git,但把這些機密資訊也上 git 是很不好的一件事,畢竟 github 也是曾經被駭過的,所以最好是把這些不想讓別人知道的資訊寫在另外一個
Thumbnail
2022/10/10
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內,包含了 SECRET_KEY 等機密資訊,通常專案都會做版本控制上 git,但把這些機密資訊也上 git 是很不好的一件事,畢竟 github 也是曾經被駭過的,所以最好是把這些不想讓別人知道的資訊寫在另外一個
Thumbnail
看更多
你可能也想看
Thumbnail
Vue3 學習筆記,專案建立與基礎響應式篇
Thumbnail
Vue3 學習筆記,專案建立與基礎響應式篇
Thumbnail
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西,按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
Thumbnail
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西,按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
Thumbnail
今天來介紹 vue 的生命週期,什麼是生命週期呢?講簡單一點就是從你用瀏覽器打開網頁開始,到網頁內的元件一個一個生成,到整個完整的網頁建立的過程就叫生命週期,完整過程如下圖 是不是眼花撩亂啊?讓我簡化一下,其實主要順序就是如下圖 在加上 setup 語法糖的 script 標籤內做的事相當於在 be
Thumbnail
今天來介紹 vue 的生命週期,什麼是生命週期呢?講簡單一點就是從你用瀏覽器打開網頁開始,到網頁內的元件一個一個生成,到整個完整的網頁建立的過程就叫生命週期,完整過程如下圖 是不是眼花撩亂啊?讓我簡化一下,其實主要順序就是如下圖 在加上 setup 語法糖的 script 標籤內做的事相當於在 be
Thumbnail
在寫頁面之前,先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像,一樣是分成 寫網頁內容、script、style,三個部分,只是 html 標籤換成了 template。 template 就是相當於原生 html 檔
Thumbnail
在寫頁面之前,先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像,一樣是分成 寫網頁內容、script、style,三個部分,只是 html 標籤換成了 template。 template 就是相當於原生 html 檔
Thumbnail
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
Thumbnail
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
Thumbnail
Create project 裝好 vue CLI 之後,只要在終端輸入 vue create 想取的專案名稱 就可以開始創建 vue 專案囉 1. Pick a preset 2. Select the features 3. Choose the version of vue 選擇 vue3
Thumbnail
Create project 裝好 vue CLI 之後,只要在終端輸入 vue create 想取的專案名稱 就可以開始創建 vue 專案囉 1. Pick a preset 2. Select the features 3. Choose the version of vue 選擇 vue3
Thumbnail
SCSS與SASS都是CSS預處理器,可以幫助開發者更方便管理CSS程式碼,而SASS寫法上不須加上「{} ;」,而是用縮排來簡化,SCSS寫法上則類似CSS,可以兼容CSS語法,SASS則無法兼容CSS語法,以下將以SCSS為主來說明。 CSS/SCSS/SASS寫法差別 安裝scss編譯器
Thumbnail
SCSS與SASS都是CSS預處理器,可以幫助開發者更方便管理CSS程式碼,而SASS寫法上不須加上「{} ;」,而是用縮排來簡化,SCSS寫法上則類似CSS,可以兼容CSS語法,SASS則無法兼容CSS語法,以下將以SCSS為主來說明。 CSS/SCSS/SASS寫法差別 安裝scss編譯器
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News