付費限定

[7] Vue: Life cycle

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

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

raw-image

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

raw-image

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

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

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

raw-image

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


以行動支持創作者！付費即可解鎖
本篇內容共 388 字、0 則留言，僅發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你你目前無法檢視以下內容，可能因為尚未登入，或沒有該房間的查看權限。
張哲嘉的沙龍Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你
留言
avatar-img
留言分享你的想法！
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
方格子 vocus 官方沙龍
沙龍介面新登場！自訂你的創作空間，讓好內容被看見
沙龍一直是創作與交流的重要空間，這次 vocus 全面改版了沙龍介面，就是為了讓好內容被好好看見！ 你可以自由編排你的沙龍首頁版位，新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面，並標記 @vocus.official⁠ ♥️ ⁠
#vocus#方格子#方格子沙龍
Thumbnail
avatar-avatar
方格子 vocus 官方沙龍
沙龍介面新登場！自訂你的創作空間，讓好內容被看見
沙龍一直是創作與交流的重要空間，這次 vocus 全面改版了沙龍介面，就是為了讓好內容被好好看見！ 你可以自由編排你的沙龍首頁版位，新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面，並標記 @vocus.official⁠ ♥️ ⁠
#vocus#方格子#方格子沙龍
Thumbnail
avatar-avatar
阿千看世界
2025年綜合所得稅繳稅教學：線上申報、信用卡回饋、拆單攻略！
每年4月、5月都是最多稅要繳的月份，當然大部份的人都是有機會繳到「綜合所得稅」，只是相當相當多人還不知道，原來繳給政府的稅！可以透過一些有活動的銀行信用卡或電子支付來繳，從繳費中賺一點點小確幸！就是賺個１%~2%大家也是很開心的，因為你們把沒回饋變成有回饋，就是用卡的最高境界 所得稅線上申報
#2025所得稅#綜合所得稅#繳稅有回饋
Thumbnail
avatar-avatar
阿千看世界
2025年綜合所得稅繳稅教學：線上申報、信用卡回饋、拆單攻略！
每年4月、5月都是最多稅要繳的月份，當然大部份的人都是有機會繳到「綜合所得稅」，只是相當相當多人還不知道，原來繳給政府的稅！可以透過一些有活動的銀行信用卡或電子支付來繳，從繳費中賺一點點小確幸！就是賺個１%~2%大家也是很開心的，因為你們把沒回饋變成有回饋，就是用卡的最高境界 所得稅線上申報
#2025所得稅#綜合所得稅#繳稅有回饋
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
Jeremy Ho的沙龍
Vue3 筆記 | 專案建立與響應式
Vue3 學習筆記，專案建立與基礎響應式篇
#WebDev#Vue
Thumbnail
avatar-avatar
Jeremy Ho的沙龍
Vue3 筆記 | 專案建立與響應式
Vue3 學習筆記，專案建立與基礎響應式篇
#WebDev#Vue
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
張哲嘉的沙龍
[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
張哲嘉的沙龍
[7] Vue: Life cycle
今天來介紹 vue 的生命週期，什麼是生命週期呢？講簡單一點就是從你用瀏覽器打開網頁開始，到網頁內的元件一個一個生成，到整個完整的網頁建立的過程就叫生命週期，完整過程如下圖 是不是眼花撩亂啊？讓我簡化一下，其實主要順序就是如下圖 在加上 setup 語法糖的 script 標籤內做的事相當於在 be
#網頁
Thumbnail
avatar-avatar
張哲嘉的沙龍
[7] Vue: Life cycle
今天來介紹 vue 的生命週期，什麼是生命週期呢？講簡單一點就是從你用瀏覽器打開網頁開始，到網頁內的元件一個一個生成，到整個完整的網頁建立的過程就叫生命週期，完整過程如下圖 是不是眼花撩亂啊？讓我簡化一下，其實主要順序就是如下圖 在加上 setup 語法糖的 script 標籤內做的事相當於在 be
#網頁
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 檔
#網頁開發
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
張哲嘉的沙龍
[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的沙龍
Vue.js 環境建置 - Vue CLI
Vue CLI與React的create-react-app是類似的工具，目的都是為了讓開發者快速建置環境，節省複雜的安裝相關環境的時間，簡單的一個建立專案指令與設定，即建立一個內建了Hot-Reload, webpack, ESLint等功能的專案。 安裝Vue CLI: 選擇檢查程式碼的時機
#Vuejs
Thumbnail
avatar-avatar
Vic Lin的沙龍
Vue.js 環境建置 - Vue CLI
Vue CLI與React的create-react-app是類似的工具，目的都是為了讓開發者快速建置環境，節省複雜的安裝相關環境的時間，簡單的一個建立專案指令與設定，即建立一個內建了Hot-Reload, webpack, ESLint等功能的專案。 安裝Vue CLI: 選擇檢查程式碼的時機
#Vuejs
Thumbnail
avatar-avatar
Vic Lin的沙龍
Vue.js 入門
Vue.js 入門
#Vuejs#JavaScript
Thumbnail
avatar-avatar
Vic Lin的沙龍
Vue.js 入門
Vue.js 入門
#Vuejs#JavaScript
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News