小王的學習筆記（十四）——vue資料渲染、事件處理、表單輸入與繫結

資料渲染

1. 基本資料渲染
   {{}} 內容可以為表示式，可以進行簡單的邏輯運算

2. 條件渲染
   v-if='':：可以為布林型別 表示式
   根據條件判斷，控制當前的節點是否顯示到頁面中，符合條件，如果不符合條件，不顯示，不會被掛載在dom樹上
   v-else： 前一兄弟元素必須有 v-if 或 v-else-if
v-show：判斷當前的條件是否成立，成立則顯示在頁面上，不成立則增加display:none，依舊會掛載在dom樹上
   v-if有更高的切換消耗，而v-show有更高的初始渲染消耗；因此，如果是頻繁切換，就用v-show；如果元素可能永遠也不會被顯示出來被使用者看到， 則推薦使用 v-if

3. 迴圈渲染
   v-for：vue中有複用政策，為了防止重複渲染，保證高效率的渲染，增加key可以標識元件的唯一性，有相同父元素的子元素必須有獨特的 key。重複的 key 會造成渲染錯誤。

   <div v-for="(item index) in arr" :key='item.id'></div>
   

   v-for和v-if一般不做巢狀使用，如果發生巢狀，v-for的優先順序更高

4. v-text 只是識別渲染文字，v-html會解析HTML標籤然後進行資料渲染

5. v-once 只在第一次執行時渲染資料，如果資料發生變化不會重新渲染

6. v-bind 繫結屬性 ，簡寫:，動態的繫結一個或多個屬性。

事件處理、表單輸入繫結

1. v-on繫結事件，簡寫@
   事件修飾符：
   .once ：只觸發一次回撥，當前事件只執行一次
   .prevent ：阻止預設行為
   .stop：阻止冒泡
   .left ：只當點選滑鼠左鍵時觸發。
   .right ：只當點選滑鼠右鍵時觸發。
   .middle ：只當點選滑鼠中鍵時觸發。
2. v-model：在表單控制元件或者元件上建立雙向繫結。
   修飾符：
   .lazy：取代 input 監聽 change 事件，在“change”時而非“input”時更新
   .number：輸入字串轉為有效的數字
   .trim：輸入首尾空格過濾

表單

1. 單行文字框

   <div>姓名<input type="text" v-model.trim='form.username' ></div>
   

2. 多行文字

   <div>簡介<textarea cols="30" rows="10" v-model='form.desc'></textarea></div>
   

3. 核取方塊
   hobby必須為一個陣列

    <div>
           <input type="checkbox" value="a" v-model='form.hobby'>a
           <input type="checkbox" value="b" v-model='form.hobby'>b
           <input type="checkbox" value="c" v-model='form.hobby'>c
    </div>
   

4. 單選框

   <div>
       性別：
       <input type="radio" value="1" v-model='form.gender'>男
       <input type="radio" value="0" v-model='form.gender'>女
   </div>
   

5. 下拉框

   <div id="example-5">
     <select v-model="selected">
       <option disabled value="">請選擇</option>
       <option>A</option>
       <option>B</option>
       <option>C</option>
     </select>
     <span>Selected: {{ selected }}</span>
   </div>
   new Vue({
     el: '...',
     data: {
       selected: ''
     }
   })
   

6. 下拉多選時

   <div id="example-6">
     <select v-model="selected" multiple style="width: 50px;">
       <option>A</option>
       <option>B</option>
       <option>C</option>
     </select>
     <br>
     <span>Selected: {{ selected }}</span>
   </div>
   new Vue({
     el: '#example-6',
     data: {
       selected: []
     }
   })