付費限定

[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 從網頁全端開發到架站一次教給你你目前無法檢視以下內容,可能因為尚未登入,或沒有該房間的查看權限。
9會員
49內容數
比起詳細教學單一技能,網路上或者市面上整合多項技能的教學相對少很多,但要真的完成一項專案往往不是只靠一項技能便能做到。 而且教科書式的完整教學也比較枯燥乏味,因此我想以自身的經驗為例,以全端開發各項技能中最常用到的部分進行講解,讓讀者能夠快速上手掌握全端技能。
留言0
查看全部
發表第一個留言支持創作者!
張哲嘉的沙龍 的其他內容
定義路由 首先先來定義路由,先把上一篇寫的 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
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
  亦宸和夥伴們漫無目的的走了一陣子,一點目標也沒有,不知道要去哪裡找其他夥伴,只靠勇者跟魔法狗,絕對無法到達芋頭山。
Thumbnail
磁吸軌道燈是一種現代化的照明燈具與系統,廣泛應用於住宅空間和商業空間。憑藉其靈活的設計、便捷的安裝方式以及多功能性,成為室內設計師的熱門選擇。在這篇文章中,我們將深入探討磁吸軌道燈的特點、種類,以及其在不同空間中的應用方式,並且介紹一些創意運用,幫助你更好地理解和利用這種照明燈具。
Thumbnail
在豪宅室內設計中,書房不僅是工作和學習的地方,更是展現生活品味的重要區域。書房燈光設計在這個空間中扮演了關鍵角色,它能提升空間氛圍、提供舒適視覺體驗,並促進專注力與創造力。那麼,豪宅書房的燈光該如何設計呢?以下三大照明手法是必須了解的基礎。 豪宅的書房燈光該如何設計?必知三大照明手法! 1.
Thumbnail
這裡會告訴你,不只是從 "人資部門人員" 的角度去看,公司如何發出面試通知。 還有 從 "需求單位主管" 的角度去看,他為什麼想要面試你。 以及...從一位"銷售主管"的角度去看,你要如何成功的行銷自己。 透過位置、包裝、品牌、內容、價格及履歷的撰寫方式這六點,帶你提升你被面試邀請的機會...
Thumbnail
《大智度論》中記載:末法眾生福薄貧,而龍王頭飾如意寶珠,若眾生以清淨妙供令其歡喜,龍王將以如意寶珠濟其所願,其願出一切寶物隨人所需,盡皆備有。為現世親友、公司行號、閤家、個人登記「祛病除障祿位」,免災病、除障礙、增祿壽。
Thumbnail
雖說週休二日收假厭世感沒長假後濃,但無論如何星期二心情還是比Blue Monday好多了,出門前忙著梳妝忘了量體重。
大盤熱錢資金目前流往半導體 重電 航運 塑化 光電
Thumbnail
!!!快加入免費通知群組!!!即時線上教學通知都在禁言群!! Line 社群搜尋「哈老濕期貨大全(絕對禁言)」 昨天一夜的洗盤 由於早早看出大三角收斂了,昨天這一盤就懶得進去跟他洗盤 以後可以記得 這種哥吉拉 急漲就是配整理型態 要不就大跌,要就打到支撐做整理 可以參考22470那天
Thumbnail
#小倉鼠 #社畜逃脫筆記 #自我成長 #財務自由 #PODCASTS #說書 #思考 #筆記#從未來寫回來的逆算手帳#小堀純子#采實文化#目標#計劃 #習慣#願景#計畫#行動#失焦 #煩燥 #拖延##目標#計劃 #習慣#逆算#人生導航#旅行 通往夢想的道路#人生路徑#自我實現#彈性#完美 #方向 #
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
  亦宸和夥伴們漫無目的的走了一陣子,一點目標也沒有,不知道要去哪裡找其他夥伴,只靠勇者跟魔法狗,絕對無法到達芋頭山。
Thumbnail
磁吸軌道燈是一種現代化的照明燈具與系統,廣泛應用於住宅空間和商業空間。憑藉其靈活的設計、便捷的安裝方式以及多功能性,成為室內設計師的熱門選擇。在這篇文章中,我們將深入探討磁吸軌道燈的特點、種類,以及其在不同空間中的應用方式,並且介紹一些創意運用,幫助你更好地理解和利用這種照明燈具。
Thumbnail
在豪宅室內設計中,書房不僅是工作和學習的地方,更是展現生活品味的重要區域。書房燈光設計在這個空間中扮演了關鍵角色,它能提升空間氛圍、提供舒適視覺體驗,並促進專注力與創造力。那麼,豪宅書房的燈光該如何設計呢?以下三大照明手法是必須了解的基礎。 豪宅的書房燈光該如何設計?必知三大照明手法! 1.
Thumbnail
這裡會告訴你,不只是從 "人資部門人員" 的角度去看,公司如何發出面試通知。 還有 從 "需求單位主管" 的角度去看,他為什麼想要面試你。 以及...從一位"銷售主管"的角度去看,你要如何成功的行銷自己。 透過位置、包裝、品牌、內容、價格及履歷的撰寫方式這六點,帶你提升你被面試邀請的機會...
Thumbnail
《大智度論》中記載:末法眾生福薄貧,而龍王頭飾如意寶珠,若眾生以清淨妙供令其歡喜,龍王將以如意寶珠濟其所願,其願出一切寶物隨人所需,盡皆備有。為現世親友、公司行號、閤家、個人登記「祛病除障祿位」,免災病、除障礙、增祿壽。
Thumbnail
雖說週休二日收假厭世感沒長假後濃,但無論如何星期二心情還是比Blue Monday好多了,出門前忙著梳妝忘了量體重。
大盤熱錢資金目前流往半導體 重電 航運 塑化 光電
Thumbnail
!!!快加入免費通知群組!!!即時線上教學通知都在禁言群!! Line 社群搜尋「哈老濕期貨大全(絕對禁言)」 昨天一夜的洗盤 由於早早看出大三角收斂了,昨天這一盤就懶得進去跟他洗盤 以後可以記得 這種哥吉拉 急漲就是配整理型態 要不就大跌,要就打到支撐做整理 可以參考22470那天
Thumbnail
#小倉鼠 #社畜逃脫筆記 #自我成長 #財務自由 #PODCASTS #說書 #思考 #筆記#從未來寫回來的逆算手帳#小堀純子#采實文化#目標#計劃 #習慣#願景#計畫#行動#失焦 #煩燥 #拖延##目標#計劃 #習慣#逆算#人生導航#旅行 通往夢想的道路#人生路徑#自我實現#彈性#完美 #方向 #