? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 指令

? ? ? ?v-bind ? 單項數據解析表達式 ?可簡寫為 :xxx

? ? ? ? v-model ? 雙向數據綁定

? ? ? ? v-for ? 遍歷數組/對象/字符串

? ? ? ? v-on ?綁定事件監聽 ?可簡寫為 @

? ? ? ? v-if 條件渲染??切換頻率較低的場景??不展示的DOM元素直接被移除

? ? ? ? v-else 條件渲染?

? ? ? ? v-show 條件渲染? ??切換頻率較高的場景

? ? ? ?v-text ? ?不支持結構的解析

? ? ? ? v-html ?指令

? ? ? ? 1.作用 向指定節點中渲染包含html結構的內容

? ? ? ? 2.與插值語法的區別

? ? ? ? ? ? ? ? ?(1)v-html會替換掉節點中所有的內容 ?{{xxx}}則不會

? ? ? ? ? ? ? ? ? (2)v-html可以識別html結構

? ? ? ? 3.嚴重注意 v-html有安全性問題

? ? ? ? ? ? ? ? (1)在網站上動態渲染任意HTML是非常危險的 容易導致xss攻擊

? ? ? ? ? ? ? ? (2)一定要在可信的內容上使用v-html 永不要在用戶提交的內容上

?v-cloak指令

? 1.本質是一個特殊屬性 Vue實例創建完畢并接管容器后 會刪掉v-cloak屬性

? 2.使用css配合v-cloak可以解決網速慢時頁面展示出{{xxx}}的問題

?<style>

? ? ? ? [v-cloak]{

? ? ? ? ? ? display: none;

? ? ? ? }

? ? </style>

v-once指令

?1.v-once所在的節點在初次渲染后 就視為靜態內容了

?2.以后數據的改變不會引起v-once所在結構的更新 可以用于優化性能

?<h2 v-once>初始化的n值是{{n}}</h2>

1 .? ?v-if

? ? ? ? 寫法：

? ? ? ? (1)v-if="表達式"

? ? ? ? (2)v-else-if="表達式"

? ? ? ? (3)v-else="表達式"

? ? ? ? 適用于:切換頻率較低的場景

? ? ? ? 特點：不展示的DOM元素直接被移除

? ? ? ? 注意：v-if可以和:v-else-if ? v-else一起使用 但要求結構不能被打斷

<template v-if="n == 1">? ? ? ? ? ? ? ? ?//只有v-if可以使用template樣式

? ? ? ? <h2 >年后</h2>

? ? ? ? <h2 >念好</h2>

? ? ? ? <h2 >你好</h2>

? ? ? </template>

? 2.v-show

? ? ? ? 寫法 v-show="表達式"

? ? ? ? 適用于:切換頻率較高的場景

? ? ? ? 特點：不展示的DOM元素未被移除 僅僅是使用樣式隱藏掉

?3.備注

?使用v-if時 元素可能無法獲取到 ?而使用v-show一定可以獲取到

? ? ? ? ? ? ? ?react ?Vue 中的key有什么作用

?1.虛擬DOM中key的作用

? ? ? ? key是虛擬DOM對象的標識 當數據發生變化時Vue會根據 ? 新數據 生成 新的虛擬

DOM隨后Vue進行 新虛擬DOM 與 舊虛擬DOM 的差異比較 比較規則如下

? 2.對比規則

? ? ? ? (1)舊虛擬DOM中找到了與新虛擬DOM相同的key

? ? ? ? ? ? ? ? ? 1.若虛擬DOM中的內容沒變 直接使用之前的真實DOM

? ? ? ? ? ? ? ? ?2.若虛擬DOM中的內容變了 則直接生成新的真實DOM 隨后替換掉頁面中之

前的真實DOM用index作為key可能會引發問題

? ? ? ? 1.若對數據進行 ?逆序添加 逆序刪除等會破壞順序操作

? ? ? ? 會產生沒有必要的真實DOM更新 ==> 界面效果沒問題 但效率低

? ? ? ? 2.如果結構中還包含輸入類的DOM

? ? ? ? 會產生錯誤DOM更新 ==> 界面有問題

? ? ? ? 4.開發中如何選擇key

? ? ? ? 1.最好使用每條數據的唯一標識作為key 比如id，手機號，身份證號，學號等唯一值

? ? ? ? 2.如果不存在對每條數據的逆序添加，逆序刪除操作 僅用于渲染列表用于展示

? ? ? ? 使用index是沒有問題的