陳靖武
    • Create new note
    • Create a note from template
      • Sharing URL Link copied
      • /edit
      • View mode
        • Edit mode
        • View mode
        • Book mode
        • Slide mode
        Edit mode View mode Book mode Slide mode
      • Customize slides
      • Note Permission
      • Read
        • Only me
        • Signed-in users
        • Everyone
        Only me Signed-in users Everyone
      • Write
        • Only me
        • Signed-in users
        • Everyone
        Only me Signed-in users Everyone
      • Engagement control Commenting, Suggest edit, Emoji Reply
      • Invitee
    • Publish Note

      Share your work with the world Congratulations! 🎉 Your note is out in the world Publish Note

      Your note will be visible on your profile and discoverable by anyone.
      Your note is now live.
      This note is visible on your profile and discoverable online.
      Everyone on the web can find and read all notes of this public team.
      See published notes
      Unpublish note
      Please check the box to agree to the Community Guidelines.
      View profile
    • Commenting
      Permission
      Disabled Forbidden Owners Signed-in users Everyone
    • Enable
    • Permission
      • Forbidden
      • Owners
      • Signed-in users
      • Everyone
    • Suggest edit
      Permission
      Disabled Forbidden Owners Signed-in users Everyone
    • Enable
    • Permission
      • Forbidden
      • Owners
      • Signed-in users
    • Emoji Reply
    • Enable
    • Versions and GitHub Sync
    • Note settings
    • Engagement control
    • Transfer ownership
    • Delete this note
    • Save as template
    • Insert from template
    • Import from
      • Dropbox
      • Google Drive
      • Gist
      • Clipboard
    • Export to
      • Dropbox
      • Google Drive
      • Gist
    • Download
      • Markdown
      • HTML
      • Raw HTML
Menu Note settings Sharing URL Create Help
Create Create new note Create a note from template
Menu
Options
Versions and GitHub Sync Engagement control Transfer ownership Delete this note
Import from
Dropbox Google Drive Gist Clipboard
Export to
Dropbox Google Drive Gist
Download
Markdown HTML Raw HTML
Back
Sharing URL Link copied
/edit
View mode
  • Edit mode
  • View mode
  • Book mode
  • Slide mode
Edit mode View mode Book mode Slide mode
Customize slides
Note Permission
Read
Only me
  • Only me
  • Signed-in users
  • Everyone
Only me Signed-in users Everyone
Write
Only me
  • Only me
  • Signed-in users
  • Everyone
Only me Signed-in users Everyone
Engagement control Commenting, Suggest edit, Emoji Reply
Invitee
Publish Note

Share your work with the world Congratulations! 🎉 Your note is out in the world Publish Note

Your note will be visible on your profile and discoverable by anyone.
Your note is now live.
This note is visible on your profile and discoverable online.
Everyone on the web can find and read all notes of this public team.
See published notes
Unpublish note
Please check the box to agree to the Community Guidelines.
View profile
Engagement control
Commenting
Permission
Disabled Forbidden Owners Signed-in users Everyone
Enable
Permission
  • Forbidden
  • Owners
  • Signed-in users
  • Everyone
Suggest edit
Permission
Disabled Forbidden Owners Signed-in users Everyone
Enable
Permission
  • Forbidden
  • Owners
  • Signed-in users
Emoji Reply
Enable
Import from Dropbox Google Drive Gist Clipboard
   owned this note    owned this note      
Published Linked with GitHub
Subscribed
  • Any changes
    Be notified of any changes
  • Mention me
    Be notified of mention me
  • Unsubscribe
Subscribe
# Vue指令 ## 基本指令 💡指令是用於HTML結構上的方法,用於渲染、操作DOM物件上面 V-model 就是Vue的指令,大部分指令特點是v-開頭,不過便於撰寫某些指令可以縮寫形式呈現。 渲染於畫面上的方法: * {{}} * v-text * v-html 資料雙向綁定 * v-model(延伸表單技巧) 最常使用的兩大指令(有提供縮寫) * v-on * v-bind 資料條列,元素隱藏 * v-for * v-if,v-else,v-else-if * v-show * key(補充說明) ## 資料呈現於畫面上 如果要將資料呈現於畫面上,有以下方式: * `{{}}`使用雙大括號中間可以插入任何元件資料或表達式內容來呈現 * `v-text`:與`{{}}`相同,同時可用於標籤 * `v-once`:綁定的標籤僅會一次輸出於畫面上,往後的更新將不會變動 * `v-html`:可同時輸出html結構,使用上要注意:僅可以對可信內容做HTML插值,絕對不要對用戶提供的內容使用插值。 🎨範例:(使用codepen的embedd功能:iframe) <iframe height="300" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/samwnkyat/embed/wvrVjYR?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/wvrVjYR"> Untitled</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ## v-model 💡用於表單的資料與元件產生雙向綁定 ❗v-model會忽略所有表單元素`value`、`checked`、`selected`特性的初始值而總是將Vue的實例數據做為數據來源。需透過JS在元件的data選項中宣告初始值。 範例重點: * 將v-model與data中的message綁定 * 此為雙向綁定,當v-model中的mesaage值改變時,畫面上的{{message}}也會一起改變 <iframe height="300" style="width: 100%;" scrolling="no" title="vue資料呈現於畫面上2022/1/23" src="https://codepen.io/samwnkyat/embed/xxXvjMq?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/xxXvjMq"> vue資料呈現於畫面上2022/1/23</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### v-model修飾符 💡此修飾符搭配v-model使用,與v-on的觸發器略有不同,用來延遲觸發、改變型別、修飾字串等。 #### lazy `lazy`:避免持續性觸發,編輯完後才觸發更新資料 範例重點: * v-model後加上.lazy修飾符。 * 當input編輯時,無法直接修改畫面上的值,離開input時才會觸發。 <iframe height="300" style="width: 100%;" scrolling="no" title="v-mode.lazyl2022/1/23" src="https://codepen.io/samwnkyat/embed/QWqerRe?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/QWqerRe"> v-mode.lazyl2022/1/23</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> #### number `number`:限制只有數值型別的資料才能寫入,以下範例中的number資料會以number型別傳入,無法透過input套用其他資料型別。 範例重點: * 無論input type為何,input預設傳入的型別為字串。 * 可以使用number修飾符,確保用戶輸入為純數值 <iframe height="300" style="width: 100%;" scrolling="no" title="v-mode.lazyl2022/1/23" src="https://codepen.io/samwnkyat/embed/zYEgjgN?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/zYEgjgN"> v-mode.lazyl2022/1/23</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> #### trim `trim`:修飾調首尾的空白 範例重點: * 用戶在輸入文字時,可能會在結尾補上空白,用.trim修飾字符可以去掉結尾空白 <iframe height="300" style="width: 100%;" scrolling="no" title="v-mode.number2022/1/23" src="https://codepen.io/samwnkyat/embed/zYEgaON?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/zYEgaON"> v-mode.number2022/1/23</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ## v-model 表單運用 `v-model`除了運用在input以外,所有的表單項目也可以套用,如:select、checjbox、textarea,不同項目應用略有不同。 ### select `select`選項可以直接使用option標籤中的value,或是透過v-for搭配元件內的data產生多個option,兩者同樣以value做為資料來源。 範例重點: * select所綁定的其值來自於<option></option>內的value * value可以使用自行撰寫或使用v-for搭配Vue Data來呈列。 <iframe height="300" style="width: 100%;" scrolling="no" title="v-mode.select2022/1/23" src="https://codepen.io/samwnkyat/embed/MWENXwy?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/MWENXwy"> v-mode.select2022/1/23</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### Checkbox 與 Radio 預設來說,Checkbox是作為一個資料的true or false。 範例重點: * 當input check box沒有設定value時,預設是作為v-model對應屬性的true or false <iframe height="300" style="width: 100%;" scrolling="no" title="v-mode.select2022/1/23" src="https://codepen.io/samwnkyat/embed/ExwqRXb?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/ExwqRXb"> v-mode.select2022/1/23</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> 或者可以做多個選項,將資料綁定於同一個陣列內。 範例重點: * checkbox是多選選項 * 如果多個input checkbox的v-model是對應同一個data,並且有設定value時,則是將該data視為同一個陣列,核取的選項為陣列內的值。 <iframe height="300" style="width: 100%;" scrolling="no" title="v-mode.select2 2022/1/23" src="https://codepen.io/samwnkyat/embed/mdBNKBo?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/mdBNKBo"> v-mode.select2 2022/1/23</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> Radio則是單一選項 範例重點: * radio是單一選項 * 如果多個input radio的v-model是對應同一個data時,該v-model的值則是核取radio選項 <iframe height="300" style="width: 100%;" scrolling="no" title="v-mode.radio2 2022/1/23" src="https://codepen.io/samwnkyat/embed/MWENBWr?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/MWENBWr"> v-mode.radio2 2022/1/23</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ## v-on事件觸發器 💡說明:可以用v-on指令監聽網頁上的事件,並在觸發時運行一些Vue的方法。 ### 案例 直接操作元件內的資料,範例重點: * v-on是觸發器,click是觸發的方法 * HTML的v-on:click可以直接操作data內的資料 <iframe height="300" style="width: 100%;" scrolling="no" title="v-mode.radio2 2022/1/23" src="https://codepen.io/samwnkyat/embed/rNGXrav?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/rNGXrav"> v-mode.radio2 2022/1/23</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> 運作元件內的methods,範例重點: * v-on:click內可以直接帶入方法,來源自Vue中的methods * 傳入的方法同樣也可以帶入參數 <iframe height="300" style="width: 100%;" scrolling="no" title="v-on 2 2023/1/23 " src="https://codepen.io/samwnkyat/embed/vYeoaLY?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/vYeoaLY"> v-on 2 2023/1/23 </a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### 事件修飾符: 說明: HTML中本身有預設的事件,如a的預設事件則是跳至特定連結,而事件修飾符可以增加或移除事件。 ### prevent: 移除預設的HTML事件,範例重點: * prevent加入倒v-on:click後方,可移除a連結的預設事件 * 移除預設事件後會執行觸發器內的事件 <iframe height="300" style="width: 100%;" scrolling="no" title="v-on 3 2023/1/23 " src="https://codepen.io/samwnkyat/embed/xxXvJOM?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/xxXvJOM"> v-on 3 2023/1/23 </a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### v-on:submit.prevent: 移除預設的HTML事件,範例重點: * 表單送出時會對action 中的網址進行post,prevent加入倒v-on:submit後方時則不會進行post * 移除預設事件後會執行觸發器內的事件 <iframe height="300" style="width: 100%;" scrolling="no" title="v-on 6 2023/1/23 " src="https://codepen.io/samwnkyat/embed/oNGKMBK?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/oNGKMBK"> v-on 6 2023/1/23 </a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### 案件修飾符: 除了移除事件外,也可以在觸發器上增加額外的事件監聽,如:Enter、Key(按下特定按鍵)等。 範例重點: * 針對input標籤額外增加按鍵修飾符,按下特定案件時則會運行methods中的方法 * methods的方法只有特定按鍵才會觸發,如:enter.keyup.a ... <iframe height="300" style="width: 100%;" scrolling="no" title="submit.prevent" src="https://codepen.io/samwnkyat/embed/xxXvJLe?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/xxXvJLe"> submit.prevent</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> 縮寫: * v-on可以使用@縮寫 * 結果如下 `<button @click="onClick">A</button>` ## v-bind 💡說明:動態的綁定HTML屬性,將資料傳遞到元素上。 ### 動態屬性 * `:`是v-bind的縮寫 * v-bind可以使用各種JS表達式 * 可以傳入data內的資料 ```htmlembedded= <img v-bind:src="imageSrc"> <!--縮寫--> <img :src="imageSrc"> <img :src="'/path/to/images/'+ fileName"> ``` 範例重點: * input中可以使用:value動態屬性傳入data內的值或是任何JS表達式的結果 * :src 也同樣道理可傳入data內的網址來呈現圖片 <iframe height="300" style="width: 100%;" scrolling="no" title="按鍵修飾符" src="https://codepen.io/samwnkyat/embed/abLejjg?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/abLejjg"> 按鍵修飾符</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### 綁定Class 可以透過:class的物件綁定並動態切換Class,物件的屬性為className,後方的值是表達式的結果,如果為真值則會套用該className。 範例重點: * `:class` 可以使用動態切換className * "{rotate:isTransform}" 物件中的前者為className名稱,後者為判斷式,當為真值時則啟用前者的className * 可以透過動態切換isTransform的true or false 來決定是否套用rotate <iframe height="300" style="width: 100%;" scrolling="no" title="動態屬性" src="https://codepen.io/samwnkyat/embed/RwLXBdo?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/RwLXBdo"> 動態屬性</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> 綁定的物件也不需要撰寫在麼模板內,在data內定義同樣可運作: 範例重點: * 同樣的邏輯可直接寫於data內,優點是可以同事定義更多的className而不造成HTML的混亂。 * <iframe height="300" style="width: 100%;" scrolling="no" title="綁定class" src="https://codepen.io/samwnkyat/embed/KKXOBLx?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/KKXOBLx"> 綁定class</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ❗(難,需多看幾次)除此之外還可以用陣列操作,同時為同一個元素賦予多個樣式 範例重點: * 如果傳入是陣列,則可以直接啟用該className * 特過checkbox的切換,則可以操作陣列內的多個值。 <iframe height="300" style="width: 100%;" scrolling="no" title="綁定class3" src="https://codepen.io/samwnkyat/embed/vYeozEx?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/vYeozEx"> 綁定class3</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### 行內樣式 Style也同樣可以使用動態屬性的方式傳入,但要特別注意class的名稱要使用小駝峰 範例重點: * 可以透過:style的方式傳入樣式 * 傳入時,樣式的名稱需要使用小駝峰的方式撰寫 * { backgroundColor:'red' } 前者為CSS的屬性,後者為該屬性的值。 <iframe height="300" style="width: 100%;" scrolling="no" title="綁定class5" src="https://codepen.io/samwnkyat/embed/eYGqLBq?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/eYGqLBq"> 綁定class5</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### 觀念動態屬性VS 靜態屬性 - 動態屬性 VS 靜態屬性(ex:`:src` vs `src`) - 靜態屬性 - 無法進行運算 - 型別一律式字串 - 動態屬性 - 可以傳入任何表達式結果,如: - true, false vs 'true' - 1 vs '1' - 可以傳入 Vue的 data <iframe height="300" style="width: 100%;" scrolling="no" title="綁定class5" src="https://codepen.io/samwnkyat/embed/eYGqLBq?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/eYGqLBq"> 綁定class5</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ## v-if,v-else,v-else-if,v-show ### v-if,v-else,v-else-if `v-if` 用於條件的方式渲染一個區塊,當指令的內容回傳為真值時會產生結構內容 範例重點: * 當v-if的結果為真值時,則會置入該區塊的結構內容 * v-else,v-else-if則為v-if的延伸運用,會延續著v-if 的結構後方 <iframe height="300" style="width: 100%;" scrolling="no" title="觀念動態屬性 VS 靜態屬性" src="https://codepen.io/samwnkyat/embed/rNYBmoz?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/rNYBmoz"> 觀念動態屬性 VS 靜態屬性</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### v-show `v-show` 與`v-if`同樣是用來切換物件的呈現,但兩者有很大的差異: * `v-if`會完整移除DOM元素,使其從HTML結構上消失。當使用此方法切換Vue元件時,元件的生命週期會重新計算。 * `v-show`是將物件加`上display:nonw`,讓物件從視覺上不可見。 ### `v-if`、`v-show`怎麼選擇? * 當元件生命週期需要在顯示時重新計算,則可以使用`v-if`,如果則否可用`v-show`。 * 當元件隱藏時,同時需要完整移除DOM結構,也可以使用`v-if` * `v-if`與`v-for`則有另外的衝突問題。 範例重點: * 請使用開發者工具剪是畫面上的「成功、失敗」區塊,可以發現是使用display:none的方式隱藏,而不移除整個DOM結構。 <iframe height="300" style="width: 100%;" scrolling="no" title="v-if, v-else, v-else-if" src="https://codepen.io/samwnkyat/embed/mdqbwqe?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/mdqbwqe"> v-if, v-else, v-else-if</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ## v-for `v-for`可以針對一組陣列或物件進行渲染,指令中會使用`(item,key)in array`的語法,其中: * item:陣列迭代的元素別名,名稱可以自訂 * Key:如果是陣列則為該迭代的索引位置,如果是物件則為該迭代的物件屬性 * array:陣列或資料的來源 範例為陣列、物件搭配迴圈的方式,範例重點: * v-for的結構為`v-for="(item,key) in array"` * 無論是陣列、物件都可以使用v-for * 陣列的索引為0,1,2...,物件索引則為屬性名稱 <iframe height="300" style="width: 100%;" scrolling="no" title="v-show" src="https://codepen.io/samwnkyat/embed/oNovwJN?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/oNovwJN"> v-show</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### v-for注意事項 由於v-for在運作上是採用快速替換的形式。因此,有部分元素會沒有完整的被替換,可參考以下範例: 當input輸入內容後,按下反轉陣列時: * 如果沒有key時,則input位置不會被同時更動 * 當有加上key時,input位置會與原本的資料內容位置一起變動 ##### 新版的Vue相關開發工具中,都會強烈建議加上`key` 範例重點: * 範例最下方有一個反轉陣列的按鈕,按下後會反轉上方的結構 * 試著輸入一些內容,並反轉整個結構 * 注意元素中是否有key屬性,這會影響到是否能夠input是否有隨著結構反轉 <iframe height="300" style="width: 100%;" scrolling="no" title="v-for" src="https://codepen.io/samwnkyat/embed/rNYBzWE?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/rNYBzWE"> v-for</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### Template 當渲染陣列資料卻不變產生新的標籤時,可以搭配`<template>`標籤做使用,此方法即可在產生DOM結構時不產生額外的標籤。另外`template`標籤也同樣可用於`v-for`上。 範例重點: * 可以使用template標籤替代原有的HTML標籤,而template標籤是不會被輸出的。 <iframe height="300" style="width: 100%;" scrolling="no" title="v-for 注意事項" src="https://codepen.io/samwnkyat/embed/PoOYVGx?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/PoOYVGx"> v-for 注意事項</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> ### 避免v-if和v-for用在一起 為了避免不必要的錯誤,Vue-js的規範中建議不要將v-for與v-if混合使用。搭配進階工具如Vue Cli,兩者混合使用時會跳出錯誤 範例重點: * 盡可能將v-if與v-for用不同的標籤呈現 <iframe height="300" style="width: 100%;" scrolling="no" title="Template" src="https://codepen.io/samwnkyat/embed/mdqbvWG?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/samwnkyat/pen/mdqbvWG"> Template</a> by 陳靖武 (<a href="https://codepen.io/samwnkyat">@samwnkyat</a>) on <a href="https://codepen.io">CodePen</a>. </iframe>

Import from clipboard

Paste your markdown or webpage here...

Advanced permission required

Your current role can only read. Ask the system administrator to acquire write and comment permission.

This team is disabled

Sorry, this team is disabled. You can't edit this note.

This note is locked

Sorry, only owner can edit this note.

Reach the limit

Sorry, you've reached the max length this note can be.
Please reduce the content or divide it to more notes, thank you!

Import from Gist

Import from Snippet

or

Export to Snippet

Are you sure?

Do you really want to delete this note?
All users will lose their connection.

Create a note from template

Create a note from template

Oops...
This template has been removed or transferred.
Upgrade
All
  • All
  • Team
No template.

Create a template

Upgrade

Delete template

Do you really want to delete this template?
Turn this template into a regular note and keep its content, versions, and comments.

This page need refresh

You have an incompatible client version.
Refresh to update.
New version available!
See releases notes here
Refresh to enjoy new features.
Your user state has changed.
Refresh to load new user state.

Sign in

Forgot password

or

By clicking below, you agree to our terms of service.

Sign in via Facebook Sign in via Twitter Sign in via GitHub Sign in via Dropbox Sign in with Wallet
Wallet ( )
Connect another wallet

New to HackMD? Sign up

Help

  • English
  • 中文
  • Français
  • Deutsch
  • 日本語
  • Español
  • Català
  • Ελληνικά
  • Português
  • italiano
  • Türkçe
  • Русский
  • Nederlands
  • hrvatski jezik
  • język polski
  • Українська
  • हिन्दी
  • svenska
  • Esperanto
  • dansk

Documents

Help & Tutorial

How to use Book mode

Slide Example

API Docs

Edit in VSCode

Install browser extension

Contacts

Feedback

Discord

Send us email

Resources

Releases

Pricing

Blog

Policy

Terms

Privacy

Cheatsheet

Syntax Example Reference
# Header Header 基本排版
- Unordered List
  • Unordered List
1. Ordered List
  1. Ordered List
- [ ] Todo List
  • Todo List
> Blockquote
Blockquote
**Bold font** Bold font
*Italics font* Italics font
~~Strikethrough~~ Strikethrough
19^th^ 19th
H~2~O H2O
++Inserted text++ Inserted text
==Marked text== Marked text
[link text](https:// "title") Link
![image alt](https:// "title") Image
`Code` Code 在筆記中貼入程式碼
```javascript
var i = 0;
```
var i = 0;
:smile: :smile: Emoji list
{%youtube youtube_id %} Externals
$L^aT_eX$ LaTeX
:::info
This is a alert area.
:::

This is a alert area.

Versions and GitHub Sync
Get Full History Access

  • Edit version name
  • Delete

revision author avatar     named on  

More Less

Note content is identical to the latest version.
Compare
    Choose a version
    No search result
    Version not found
Sign in to link this note to GitHub
Learn more
This note is not linked with GitHub
 

Feedback

Submission failed, please try again

Thanks for your support.

On a scale of 0-10, how likely is it that you would recommend HackMD to your friends, family or business associates?

Please give us some advice and help us improve HackMD.

 

Thanks for your feedback

Remove version name

Do you want to remove this version name and description?

Transfer ownership

Transfer to
    Warning: is a public team. If you transfer note to this team, everyone on the web can find and read this note.

      Link with GitHub

      Please authorize HackMD on GitHub
      • Please sign in to GitHub and install the HackMD app on your GitHub repo.
      • HackMD links with GitHub through a GitHub App. You can choose which repo to install our App.
      Learn more  Sign in to GitHub

      Push the note to GitHub Push to GitHub Pull a file from GitHub

        Authorize again
       

      Choose which file to push to

      Select repo
      Refresh Authorize more repos
      Select branch
      Select file
      Select branch
      Choose version(s) to push
      • Save a new version and push
      • Choose from existing versions
      Include title and tags
      Available push count

      Pull from GitHub

       
      File from GitHub
      File from HackMD

      GitHub Link Settings

      File linked

      Linked by
      File path
      Last synced branch
      Available push count

      Danger Zone

      Unlink
      You will no longer receive notification when GitHub file changes after unlink.

      Syncing

      Push failed

      Push successfully