付費限定

[6] Vue 指令

閱讀時間約 1 分鐘

v-bind

v-bind 可以讓 template 內的標籤去綁定 script 內定義的變數,舉個例子
可以改寫成這樣
最後效果是一樣的,在標籤內 v-bind 可以簡寫成 :

v-model

上一篇已經提到了,就是可以透過網頁上的操作去改變資料的值,比方說表單、輸入欄等等。

v-for

迴圈,比方說你想重複什麼元件在網頁上,就可以用這個。馬上來示範一下
v-for 語法是 v-for="(陣列元素,陣列 index) in 陣列",然後元件標籤內要用 v-bind 綁定 key="index"

v-on

這個是綁定事件的指令,比方說想要按下按鈕有什麼行為,滑鼠移到某個元件上有什麼行為,語法是 v-on:事件="行為",舉例一下
v-on: 可以簡寫成 @

v-if

判斷指令,當符合什麼條件時,這個標籤才顯示,語法是 v-if="條件"
v-forv-if 不要在同一個標籤內一起使用,這樣每次迭代都會判斷一次,比較浪費效能
以行動支持創作者!付費即可解鎖
本篇內容共 469 字、0 則留言,僅發佈於Vue+Django+MongoDB+Nginx 從網頁全端開發到架站一次教給你你目前無法檢視以下內容,可能因為尚未登入,或沒有該房間的查看權限。
avatar-img
9會員
49內容數
比起詳細教學單一技能,網路上或者市面上整合多項技能的教學相對少很多,但要真的完成一項專案往往不是只靠一項技能便能做到。 而且教科書式的完整教學也比較枯燥乏味,因此我想以自身的經驗為例,以全端開發各項技能中最常用到的部分進行講解,讓讀者能夠快速上手掌握全端技能。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
張哲嘉的沙龍 的其他內容
定義路由 首先先來定義路由,先把上一篇寫的 home.vue 定義在根路由。 打開 src/router/index.ts,在 routes 內定義 path 定義 url,component 定義要指向哪個 vue 頁面,component:()=>import('@/components/hom
在寫頁面之前,先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像,一樣是分成 寫網頁內容、script、style,三個部分,只是 html 標籤換成了 template。 template 就是相當於原生 html 檔
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
要完整的了解整個網頁的開發需要掌握相當多的知識,就算目標只是學習網頁開發中的其中一個部分,比方說只是想成為前端工程師,或是只是想成為後端工程師,最好還是對整個網頁專案整體有一定程度的了解,才不會和其他工程師合作的時候,各開發各的,然後兜不起來 這個系列的教學,希望就算你的目標不是成為全端工程師,也能
定義路由 首先先來定義路由,先把上一篇寫的 home.vue 定義在根路由。 打開 src/router/index.ts,在 routes 內定義 path 定義 url,component 定義要指向哪個 vue 頁面,component:()=>import('@/components/hom
在寫頁面之前,先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像,一樣是分成 寫網頁內容、script、style,三個部分,只是 html 標籤換成了 template。 template 就是相當於原生 html 檔
專案建好了,那先來講 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
磁吸軌道燈是一種現代化的照明燈具與系統,廣泛應用於住宅空間和商業空間。憑藉其靈活的設計、便捷的安裝方式以及多功能性,成為室內設計師的熱門選擇。在這篇文章中,我們將深入探討磁吸軌道燈的特點、種類,以及其在不同空間中的應用方式,並且介紹一些創意運用,幫助你更好地理解和利用這種照明燈具。
Thumbnail
在豪宅室內設計中,書房不僅是工作和學習的地方,更是展現生活品味的重要區域。書房燈光設計在這個空間中扮演了關鍵角色,它能提升空間氛圍、提供舒適視覺體驗,並促進專注力與創造力。那麼,豪宅書房的燈光該如何設計呢?以下三大照明手法是必須了解的基礎。 豪宅的書房燈光該如何設計?必知三大照明手法! 1.
Thumbnail
這裡會告訴你,不只是從 "人資部門人員" 的角度去看,公司如何發出面試通知。 還有 從 "需求單位主管" 的角度去看,他為什麼想要面試你。 以及...從一位"銷售主管"的角度去看,你要如何成功的行銷自己。 透過位置、包裝、品牌、內容、價格及履歷的撰寫方式這六點,帶你提升你被面試邀請的機會...
Thumbnail
《大智度論》中記載:末法眾生福薄貧,而龍王頭飾如意寶珠,若眾生以清淨妙供令其歡喜,龍王將以如意寶珠濟其所願,其願出一切寶物隨人所需,盡皆備有。為現世親友、公司行號、閤家、個人登記「祛病除障祿位」,免災病、除障礙、增祿壽。
Thumbnail
雖說週休二日收假厭世感沒長假後濃,但無論如何星期二心情還是比Blue Monday好多了,出門前忙著梳妝忘了量體重。
大盤熱錢資金目前流往半導體 重電 航運 塑化 光電
Thumbnail
!!!快加入免費通知群組!!!即時線上教學通知都在禁言群!! Line 社群搜尋「哈老濕期貨大全(絕對禁言)」 昨天一夜的洗盤 由於早早看出大三角收斂了,昨天這一盤就懶得進去跟他洗盤 以後可以記得 這種哥吉拉 急漲就是配整理型態 要不就大跌,要就打到支撐做整理 可以參考22470那天
Thumbnail
#小倉鼠 #社畜逃脫筆記 #自我成長 #財務自由 #PODCASTS #說書 #思考 #筆記#從未來寫回來的逆算手帳#小堀純子#采實文化#目標#計劃 #習慣#願景#計畫#行動#失焦 #煩燥 #拖延##目標#計劃 #習慣#逆算#人生導航#旅行 通往夢想的道路#人生路徑#自我實現#彈性#完美 #方向 #
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
  亦宸和夥伴們漫無目的的走了一陣子,一點目標也沒有,不知道要去哪裡找其他夥伴,只靠勇者跟魔法狗,絕對無法到達芋頭山。
Thumbnail
磁吸軌道燈是一種現代化的照明燈具與系統,廣泛應用於住宅空間和商業空間。憑藉其靈活的設計、便捷的安裝方式以及多功能性,成為室內設計師的熱門選擇。在這篇文章中,我們將深入探討磁吸軌道燈的特點、種類,以及其在不同空間中的應用方式,並且介紹一些創意運用,幫助你更好地理解和利用這種照明燈具。
Thumbnail
在豪宅室內設計中,書房不僅是工作和學習的地方,更是展現生活品味的重要區域。書房燈光設計在這個空間中扮演了關鍵角色,它能提升空間氛圍、提供舒適視覺體驗,並促進專注力與創造力。那麼,豪宅書房的燈光該如何設計呢?以下三大照明手法是必須了解的基礎。 豪宅的書房燈光該如何設計?必知三大照明手法! 1.
Thumbnail
這裡會告訴你,不只是從 "人資部門人員" 的角度去看,公司如何發出面試通知。 還有 從 "需求單位主管" 的角度去看,他為什麼想要面試你。 以及...從一位"銷售主管"的角度去看,你要如何成功的行銷自己。 透過位置、包裝、品牌、內容、價格及履歷的撰寫方式這六點,帶你提升你被面試邀請的機會...
Thumbnail
《大智度論》中記載:末法眾生福薄貧,而龍王頭飾如意寶珠,若眾生以清淨妙供令其歡喜,龍王將以如意寶珠濟其所願,其願出一切寶物隨人所需,盡皆備有。為現世親友、公司行號、閤家、個人登記「祛病除障祿位」,免災病、除障礙、增祿壽。
Thumbnail
雖說週休二日收假厭世感沒長假後濃,但無論如何星期二心情還是比Blue Monday好多了,出門前忙著梳妝忘了量體重。
大盤熱錢資金目前流往半導體 重電 航運 塑化 光電
Thumbnail
!!!快加入免費通知群組!!!即時線上教學通知都在禁言群!! Line 社群搜尋「哈老濕期貨大全(絕對禁言)」 昨天一夜的洗盤 由於早早看出大三角收斂了,昨天這一盤就懶得進去跟他洗盤 以後可以記得 這種哥吉拉 急漲就是配整理型態 要不就大跌,要就打到支撐做整理 可以參考22470那天
Thumbnail
#小倉鼠 #社畜逃脫筆記 #自我成長 #財務自由 #PODCASTS #說書 #思考 #筆記#從未來寫回來的逆算手帳#小堀純子#采實文化#目標#計劃 #習慣#願景#計畫#行動#失焦 #煩燥 #拖延##目標#計劃 #習慣#逆算#人生導航#旅行 通往夢想的道路#人生路徑#自我實現#彈性#完美 #方向 #