張哲嘉的沙龍
付費限定

[7] Vue: Life cycle

張哲嘉-avatar-img
張哲嘉
發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你
更新 發佈閱讀 1 分鐘

今天來介紹 vue 的生命週期，什麼是生命週期呢？講簡單一點就是從你用瀏覽器打開網頁開始，到網頁內的元件一個一個生成，到整個完整的網頁建立的過程就叫生命週期，完整過程如下圖

vocus｜新世代的創作平台

是不是眼花撩亂啊？讓我簡化一下，其實主要順序就是如下圖

vocus｜新世代的創作平台

在加上 setup 語法糖的 script 標籤內做的事相當於在 beforeCreate 和 created 階段完成

而想要設定什麼事情要在其他階段做，要像下面這樣，以下以設定 mounted 階段舉例，先 import onMounted 進來，然後把要做的事情寫在 onMounted function 裡

如果考慮到路由又會加上 beforeRouteEnter, befoRerouteLeave，就是可以設定進入這個頁面之前和離開這個頁面之前做什麼事

vocus｜新世代的創作平台

來舉個例子，我常常會設定在進入這個頁面之前先更改 web title


以行動支持創作者！付費即可解鎖
本篇內容共 388 字、0 則留言，僅發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你你目前無法檢視以下內容，可能因為尚未登入，或沒有該房間的查看權限。
張哲嘉的沙龍Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你
留言
avatar-img
張哲嘉的沙龍
9會員
49內容數
比起詳細教學單一技能，網路上或者市面上整合多項技能的教學相對少很多，但要真的完成一項專案往往不是只靠一項技能便能做到。 而且教科書式的完整教學也比較枯燥乏味，因此我想以自身的經驗為例，以全端開發各項技能中最常用到的部分進行講解，讓讀者能夠快速上手掌握全端技能。
張哲嘉的沙龍的其他內容
2022/10/10
[30] TLS/SSL for MongoDB
Obtain certificate 我們用之前提到的 Let’s Encript 來獲得憑證 在 nginx/sites-available 再增加一個網站設定，然後再做個連結到 nginx/sites-enabled，設定的內容就隨便寫個 server_name 和 listen 就好了 然後
Thumbnail
2022/10/10
[30] TLS/SSL for MongoDB
Obtain certificate 我們用之前提到的 Let’s Encript 來獲得憑證 在 nginx/sites-available 再增加一個網站設定，然後再做個連結到 nginx/sites-enabled，設定的內容就隨便寫個 server_name 和 listen 就好了 然後
Thumbnail
2022/10/10
[29] 讓網站更安全，不准直接連我的網站 IP
Block direct access by ip 一旦將網站對外，就要開始面對這個險惡的世界每天遭受一堆攻擊，雖然大部分都無關痛癢，幾乎都是機器人在 scan ip 然後在發一些無意義的請求，或者亂試 api，看能不能試出來...，最好是哪麼好試啦，而且加上我們之前在 JWT 篇章講到的 prot
Thumbnail
2022/10/10
[29] 讓網站更安全，不准直接連我的網站 IP
Block direct access by ip 一旦將網站對外，就要開始面對這個險惡的世界每天遭受一堆攻擊，雖然大部分都無關痛癢，幾乎都是機器人在 scan ip 然後在發一些無意義的請求，或者亂試 api，看能不能試出來...，最好是哪麼好試啦，而且加上我們之前在 JWT 篇章講到的 prot
Thumbnail
2022/10/10
[28] 用 Nginx 部署 production back-end server
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內，包含了 SECRET_KEY 等機密資訊，通常專案都會做版本控制上 git，但把這些機密資訊也上 git 是很不好的一件事，畢竟 github 也是曾經被駭過的，所以最好是把這些不想讓別人知道的資訊寫在另外一個
Thumbnail
2022/10/10
[28] 用 Nginx 部署 production back-end server
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內，包含了 SECRET_KEY 等機密資訊，通常專案都會做版本控制上 git，但把這些機密資訊也上 git 是很不好的一件事，畢竟 github 也是曾經被駭過的，所以最好是把這些不想讓別人知道的資訊寫在另外一個
Thumbnail
看更多
你可能也想看
Thumbnail
avatar-avatar
張哲嘉的沙龍
[3] Vue 專案架構
專案建好了，那先來講 Vue 的專案架構 詳細內容很多，所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point，進入一個 Vue 頁面會先進 public/index.html，再套用 App.vue，最後才是進入你寫的 .
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[3] Vue 專案架構
專案建好了，那先來講 Vue 的專案架構 詳細內容很多，所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point，進入一個 Vue 頁面會先進 public/index.html，再套用 App.vue，最後才是進入你寫的 .
#網頁開發
Thumbnail
avatar-avatar
釀電影，啜一口電影的美好。
性別之外，存在面前──淺談劇作《遊林驚夢：巧遇 Hagay》
這是一場修復文化與重建精神的儀式，觀眾不需要完全看懂《遊林驚夢：巧遇Hagay》，但你能感受心與土地團聚的渴望，也不急著在此處釐清或定義什麼，但你的在場感受，就是一條線索，關於如何找著自己的路徑、自己的聲音。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
釀電影，啜一口電影的美好。
性別之外，存在面前──淺談劇作《遊林驚夢：巧遇 Hagay》
這是一場修復文化與重建精神的儀式，觀眾不需要完全看懂《遊林驚夢：巧遇Hagay》，但你能感受心與土地團聚的渴望，也不急著在此處釐清或定義什麼，但你的在場感受，就是一條線索，關於如何找著自己的路徑、自己的聲音。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
張哲嘉的沙龍
[2] Vue: getting started
前言 Vue 在過去的一兩年內快速發展，寫法也一直改變，我在過去一年多也更改了兩次寫法，在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點，一個是異步問題，另一個是弱型別。要渲染畫面一定要多線程同時異步處理，不然真的一
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[2] Vue: getting started
前言 Vue 在過去的一兩年內快速發展，寫法也一直改變，我在過去一年多也更改了兩次寫法，在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點，一個是異步問題，另一個是弱型別。要渲染畫面一定要多線程同時異步處理，不然真的一
#網頁開發
Thumbnail
avatar-avatar
Vic Lin的沙龍
Nuxt.js 入門
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西，按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
#Nuxt
Thumbnail
avatar-avatar
Vic Lin的沙龍
Nuxt.js 入門
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西，按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
#Nuxt
Thumbnail
avatar-avatar
詹育杰的沙龍
《轉轉生 Re:INCARNATION》：Qudus Onikeku、約魯巴哲學與 Afrobeat 的去殖民身體政治
《轉轉生》（Re:INCARNATION）為奈及利亞編舞家庫德斯．奧尼奎庫與 Q 舞團創作的當代舞蹈作品，結合拉各斯街頭節奏、Afrobeat／Afrobeats、以及約魯巴宇宙觀的非線性時間，建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發，解析其去殖民的身體政治。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
詹育杰的沙龍
《轉轉生 Re:INCARNATION》：Qudus Onikeku、約魯巴哲學與 Afrobeat 的去殖民身體政治
《轉轉生》（Re:INCARNATION）為奈及利亞編舞家庫德斯．奧尼奎庫與 Q 舞團創作的當代舞蹈作品，結合拉各斯街頭節奏、Afrobeat／Afrobeats、以及約魯巴宇宙觀的非線性時間，建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發，解析其去殖民的身體政治。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
陳沅綦的沙龍
柏林劇團《三便士歌劇》：巴里．柯斯基的經典再造，與布萊希特劇場的當代轉向
本文分析導演巴里・柯斯基（Barrie Kosky）如何運用極簡的舞臺配置，將布萊希特（Bertolt Brecht）的「疏離效果」轉化為視覺奇觀與黑色幽默，探討《三便士歌劇》在當代劇場中的新詮釋，並藉由舞臺、燈光、服裝、音樂等多方面，分析該作如何在保留批判核心的同時，觸及觀眾的觀看位置與人性幽微。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
陳沅綦的沙龍
柏林劇團《三便士歌劇》：巴里．柯斯基的經典再造，與布萊希特劇場的當代轉向
本文分析導演巴里・柯斯基（Barrie Kosky）如何運用極簡的舞臺配置，將布萊希特（Bertolt Brecht）的「疏離效果」轉化為視覺奇觀與黑色幽默，探討《三便士歌劇》在當代劇場中的新詮釋，並藉由舞臺、燈光、服裝、音樂等多方面，分析該作如何在保留批判核心的同時，觸及觀眾的觀看位置與人性幽微。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
Tim Bai的沙龍
Vue2 及 Vue3 生命週期改變
前言 Vue 是一個現代開發框架，擁有完尚的生態系，讓我們可以將須多元件客製化，做出組件，並且可重複利用，高擴充性。在開發組件時，每個組件都擁有自己的生命周期，Vue 組件會偵測每個變數值，是否有變，並且更新內容，今天要一個一個了解 Vue 的生命週期，讓大家有更多認識。 Vue 的生命週期
#Vue3#javascript#科技力
Thumbnail
avatar-avatar
Tim Bai的沙龍
Vue2 及 Vue3 生命週期改變
前言 Vue 是一個現代開發框架，擁有完尚的生態系，讓我們可以將須多元件客製化，做出組件，並且可重複利用，高擴充性。在開發組件時，每個組件都擁有自己的生命周期，Vue 組件會偵測每個變數值，是否有變，並且更新內容，今天要一個一個了解 Vue 的生命週期，讓大家有更多認識。 Vue 的生命週期
#Vue3#javascript#科技力
Thumbnail
avatar-avatar
張哲嘉的沙龍
[7] Vue: Life cycle
今天來介紹 vue 的生命週期，什麼是生命週期呢？講簡單一點就是從你用瀏覽器打開網頁開始，到網頁內的元件一個一個生成，到整個完整的網頁建立的過程就叫生命週期，完整過程如下圖 是不是眼花撩亂啊？讓我簡化一下，其實主要順序就是如下圖 在加上 setup 語法糖的 script 標籤內做的事相當於在 be
#網頁
Thumbnail
avatar-avatar
張哲嘉的沙龍
[7] Vue: Life cycle
今天來介紹 vue 的生命週期，什麼是生命週期呢？講簡單一點就是從你用瀏覽器打開網頁開始，到網頁內的元件一個一個生成，到整個完整的網頁建立的過程就叫生命週期，完整過程如下圖 是不是眼花撩亂啊？讓我簡化一下，其實主要順序就是如下圖 在加上 setup 語法糖的 script 標籤內做的事相當於在 be
#網頁
Thumbnail
avatar-avatar
張哲嘉的沙龍
[8] Vue Router
Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 path 是設定路由，name 如果你沒有要用路由傳參，不寫也沒關係，component 是對應到哪個你寫的 vue 頁面 router-link 跟 <a></a> 很像，用法是像
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[8] Vue Router
Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 path 是設定路由，name 如果你沒有要用路由傳參，不寫也沒關係，component 是對應到哪個你寫的 vue 頁面 router-link 跟 <a></a> 很像，用法是像
#網頁開發
Thumbnail
avatar-avatar
黃郁書的沙龍
《海妲．蓋柏樂》：女性困境與「永恆少年」的毀滅衝動
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》，由臺灣劇團「晃晃跨幅町」製作，本文將以從舞台符號、聲音與表演調度切入，討論海妲・蓋柏樂在父權社會結構下的困境，並結合榮格心理學與馮．法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析，理解女人何以走向精神性的操控、毀滅與死亡。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
黃郁書的沙龍
《海妲．蓋柏樂》：女性困境與「永恆少年」的毀滅衝動
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》，由臺灣劇團「晃晃跨幅町」製作，本文將以從舞台符號、聲音與表演調度切入，討論海妲・蓋柏樂在父權社會結構下的困境，並結合榮格心理學與馮．法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析，理解女人何以走向精神性的操控、毀滅與死亡。
#2026北藝嚴選#北藝嚴選#臺北表演藝術中心
Thumbnail
avatar-avatar
Jeremy Ho的沙龍
Vue3 筆記 | 專案建立與響應式
Vue3 學習筆記，專案建立與基礎響應式篇
#WebDev#Vue
Thumbnail
avatar-avatar
Jeremy Ho的沙龍
Vue3 筆記 | 專案建立與響應式
Vue3 學習筆記，專案建立與基礎響應式篇
#WebDev#Vue
Thumbnail
avatar-avatar
張哲嘉的沙龍
[4] Vue 頁面結構
在寫頁面之前，先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像，一樣是分成 寫網頁內容、script、style，三個部分，只是 html 標籤換成了 template。 template 就是相當於原生 html 檔
#網頁開發
Thumbnail
avatar-avatar
張哲嘉的沙龍
[4] Vue 頁面結構
在寫頁面之前，先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像，一樣是分成 寫網頁內容、script、style，三個部分，只是 html 標籤換成了 template。 template 就是相當於原生 html 檔
#網頁開發
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News