vue基礎中的注意事項，以及一些學習心得

vue中你不知道的東西、以及注意事項

• v-html

• 使用 v-html的時候該指令中的值會覆寫系結標簽中原有的值，且使用v-html的時候不要將他設定為給用戶提供內容的地方，因為v-html很容易被XSS攻擊

• v-bind

  • 使用v-bind系結屬性值為布林值的屬性時，如果資料為truthy，則該布林值屬性都不會被渲染出來
  • 如果資料值為其他任意存在的值，就意味著值為true

• v-if

  • 使用v-if系結的標簽，當其指令值為truthy的時候該標簽是直接被洗掉掉了

  • 而當其指令值為其他任意存在的值時，就意味著值為true

  • 如果您現在有一個需求是讓多個標簽都使用v-if，則可以使用template標簽，使用該標簽包裹需要被一起隱藏或顯示的標簽，在該標簽上系結v-if即可

  • <template v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>
    

• v-show

  • 和v-if的區別在于v-show是將標簽設定為 display:none;的

• 動態引數

  • 定義：在v-bind中，被系結的屬性被稱之為引數，如 id、class、href、src...

  • 用法：使用方括號括起來的js運算式作為指令的動態引數

  • 注意事項：在使用動態引數的時候，需要避免使用大寫的字符來命名，因為瀏覽器會把命名強制轉換為小寫，其次，動態引數有一些語法約束，如空格和引號放在動態引數中是無效的

  • <div id="app">
        <!-- 2.6.0版本新增:動態引數 -->
        <img v-bind:[attribute]="url">	<!-- 這里的attribute寫成大寫也能有效果，因為瀏覽器會把該變數名強制轉換為小寫 -->
        <br>
        <!-- <img :['s'+ 'rc']="url" alt=""> -->  <!-- 這種寫法在編譯時會報錯，因為不允許使用引號 -->
        <img :[compsrc]="url" alt="">
     </div>
    <script>
        const vm = new Vue({
          el: '#app',
          data: {
            attribute: 'src',
            url: './images/logo-footer.png'
          },
          computed: {	//	通過使用計算屬性巧妙避開在動態引數中使用引號和空格
            compsrc() {
              return 's' + 'rc'
            }
          },
        })
     </script>
    

• vue中復用性的問題

  • 因為vue會盡可能高效的渲染元素，通常會復用已有的元素，

  • 大家可能以前出現過這樣的問題，

  • <!-- 有時候我們可能想實作這樣的效果：我點擊按鈕的時候改變登錄方式，即如下的賬號和用戶名兩種 -->
    <template v-if='isShow'>
        <label for='number'>賬號:</label>
    	<input type="text" id="number">
    </template>
    <template v-else>
        <label for="username">用戶名:</label>
    	<input type="text" id="username">
    </template>
    <button @click='btnClick'>切換isShow</button>
    <!-- 但是這樣使用之后我們會出現這樣一個問題:當我們在其中一個登錄方式輸入了東西之后，我們突然想切換另一個登錄方式，那么我點擊切換之后，按道理來說我們輸入框中的資訊應該被重置掉，因為我們不是使用的同一個input文本框，但是事實總是相反的，原因就在于vue會復用已存在的元素，所以其實根本就沒有創建一個新的input文本框 -->
    

  • 解決方案：在input標簽中加入一個 key 屬性，給該屬性命名(字串or數字)，加以區分即可，但是這不會導致label標簽不復用，因為label標簽沒有key屬性，

• v-for的注意事項：

  • 在v-for的語法中其實可以把in代替為of作為分隔符；

  • 陣列更新檢測：

    • 變異方法(變異方法就是改變了原陣列的方法，即：push,pop,shift,unshift,splice,sort,reverse)，Vue可以監聽到陣列的變化，并在遍歷的時候動態遍歷
    • 替換方法(替換方法就是生成了新陣列的方法，即：filter,concat,slice等等)，當使用替換方法時，可以用新陣列替換原來的陣列
    • 注意事項：當你利用索引直接添加一個陣列項時、當你修改陣列長度時，Vue不是回應性的
    • 解決方法： vm.lists.splice(index,num,newValue) or Vue.set(vm.lists,index,newValue)
    • 物件的變更檢測也是如此，不能通過物件名.新屬性名去手動添加新屬性，但是也可以使用Vue.set(vm.lists,index,newValue) 的方法進行添加，

  • 在 <template> 上使用 v-for

    • <ul>
        <template v-for="item in items">
          <li>{{ item.msg }}</li>
          <li  role="presentation"></li>
        </template>
      </ul>
      

  • v-for與v-if一同使用的問題

    • 當這兩個指令處于同一個節點，v-for的優先級比v-if的高
    • 官方不推薦我們用使用這兩個指令，除非你是為了部分項渲染節點時，這種優先級機制就發揮了重要作用

• 在組件中使用v-for的注意事項

  • 在有些html元素中，對于哪些元素可以出現在其內部是有嚴格限制的，例如：p元素中如果有div元素，那么div會被提升到跟p元素外部，所以在進行組件化開發的時候，在使用這些約束條件的元素會有一些問題，

  • <table>
      <blog-post-row></blog-post-row>
    </table>
    <!-- 這個自定義組件會被提升到tabel之外，最終渲染的樣式肯定就出錯了 -->
    

  • 解決方法：使用Vue中提供的 is 屬性

  • <table>
      <tr is="blog-post-row"></tr>
    </table>
    

• 事件處理

  • 事件修飾符
    • 1. once ：系結的事件只執行一次；可以被使用在組件事件中
      2. prevent ：阻止默認事件的發生，如超鏈接的跳轉、點擊事件的點擊
      3. stop ：阻止冒泡行為的方法（由內到外）
      4. capture ：讓事件進行捕獲（由外到內）
      5. self ：只有當事件該本身元素觸發時才發生
      6. passive ：滾動事件的默認行為（滾動行為）將會立即觸發
    • 注意：不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告，請記住，.passive 會告訴瀏覽器你不想阻止事件的默認行為，

• 表單輸入值系結

  • 修飾符
    • 1. .lazy ：將 input事件監聽（同步更新）轉換為 change事件監聽（當失去焦點時更新）
      2. .number ：自動將用戶的輸入值轉為數字型別
      3. .trim ：自動過濾用戶輸入的首尾空白字符

標籤：JavaScript

上一篇：React16原始碼解讀：揭秘ReactDOM.render

下一篇：react-native-----hello word！