vue知識小結

一、v-if和v-show的區別

相同點：v-if與v-show均可以動態控制dom元素顯示隱藏
不一樣點：v-if顯示隱藏是將dom元素整個添加或刪除，而v-show隱藏則是爲該元素添加css--display:none，dom元素還在。實例以下：

<template>
  <div id="app">
    <div v-if="ifshow">我是v-if組件</div>
    <div v-show="show">我是v-show組件</div>
  </div> 
</template>
<script>
export default {
  data() {
    return {
      show:false,
      ifshow:false
    }
  },
}
</script>
複製代碼

運行結果固然是空白頁，由於v-if和v-show都讓他們隱藏了元素 可是打開瀏覽器元素界面會看到下圖

咱們看到了 我是V-show元素的內容 它的樣式是display:none;可是看不到v-if元素

2. v-on 和v-bind的區別

一、v-on能夠簡寫成@ 而v-bind能夠簡寫成：
二、v-bind通常用來動態更新HTML元素上的屬性，如id，class，href，src等，v-on通常用來綁定html事件，經常使用的事件修飾符有.stop .prevent .capture .self .once .passive等

3.v-for和v-if 的優先級

v-for比v-if優先，若是每一次都須要遍歷整個數組，將會影響速度，尤爲是當之須要渲染很小一部分的時候。因此咱們通常狀況下須要這樣作： 通常咱們在兩種常見的狀況下會傾向於這樣作： 一、永遠不要把 v-if 和 v-for 同時用在同一個元素上。
二、爲了過濾一個列表中的項目 (好比 v-for="user in users" v-if="user.isActive")。在這種情形下，請將 users替換爲一個計算屬性 (好比 activeUsers)，讓其返回過濾後的列表。
三、爲了不渲染本應該被隱藏的列表 (好比 v-for="user in users" v-if="shouldShowUsers")。這種情形下，請將 v-if 移動至容器元素上 (好比 ul, ol)。