vue xss 存在 Vue 零碎知識點

2021-10-14 05:14:10 字數 4099 閱讀 6379

一、指令

1.1、v-once：

通過使用v-once指令，你也能執行一次性地插值，當資料改變時，插值處的內容不會更新。但請留心這會影響到該節點上的其它資料繫結：

這個將不會改變: }
1.2、v-html：

將顯示html字串：}


這裡將被html替換
你的站點上動態渲染的任意 html 可能會非常危險，因為它很容易導致xss 攻擊。請只對可信內容使用 html 插值，絕不要對使用者提供的內容使用插值。

1.3、v-bind:

對於布林 attribute (它們只要存在就意味著值為true)，v-bind工作起來略有不同，在這個例子中：

button
如果isbuttondisabled的值是null、undefined或false，則disabledattribute 甚至不會被包含在渲染出來的元素中。

1.4、v-if & v-show:

v-if是「真正」的條件渲染，因為它會確保在切換過程中條件塊內的事件***和子元件適當地被銷毀和重建。

v-show也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。

相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 css 進行切換。

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。

1.5、v-for:

2.2.0+ 的版本裡，當在元件上使用v-for時，key現在是必須的。

key的特殊 attribute 主要用在 vue 的虛擬 dom 演算法，在新舊 nodes 對比時辨識vnodes。如果不使用 key，vue 會使用一種最大限度減少動態元素並且盡可能的嘗試就地修改/復用相同型別元素的演算法。而使用 key 時，它會基於 key 的變化重新排列元素順序，並且會移除 key 不存在的元素。

有相同父元素的子元素必須有獨特的 key。重複的 key 會造成渲染錯誤。

最常見的用例是結合v-for：
1.6、v-clock：

這個指令保持在元素上直到關聯例項結束編譯。和 css 規則如[v-cloak] 一起用時，這個指令可以隱藏未編譯的 mustache 標籤直到例項準備完畢。

}
}不會顯示，直到編譯結束。

二、元件

1.1、prop的大小寫：

html 中的 attribute 名是大小寫不敏感的，所以瀏覽器會把所有大寫字元解釋為小寫字元。這意味著當你使用 dom 中的模板時，camelcase (駝峰命名法) 的 prop 名需要使用其等價的 kebab-case (短橫線分隔命名) 命名：

子元件：

} }
父元件引用子元件：

如果你想要將乙個物件的所有 property 都作為 prop 傳入，你可以使用不帶引數的v-bind(v-bind:prop-name)。例如：

obj:

obj:
元件：

等價於：

所有的 prop 都使得其父子 prop 之間形成了乙個單向下行繫結：父級 prop 的更新會向下流動到子元件中，但是反過來則不行。這樣會防止從子元件意外變更父級元件的狀態，從而導致你的應用的資料流向難以理解。

1.2非prop的attribute：

乙個非 prop 的 attribute 是指傳向乙個元件，但是該元件並沒有相應 prop 定義的 attribute。

因為顯式定義的 prop 適用於向乙個子元件傳入資訊，然而元件庫的作者並不總能預見元件會被用於怎樣的場景。這也是為什麼元件可以接受任意的 attribute，而這些 attribute 會被新增到這個元件的根元素上。

若根元素上存在與傳入的attribute一致，此時將替換或合併根元素的attribute。

test元件：

test html
引用test元件

dom渲染結果：

可在子元件中設定inheritattrs：false禁用attribute繼承，但若根元素存在與傳入的attribute一致，還是會進行替換或合併根元素的attribute。

test html
結果：

1.4、自定義元件的v-model:

推薦你始終使用 kebab-case 的事件名。

aaa
使用：

1.5、自定義元件的v-model:

乙個元件上的v-model缺省會利用名為value的 prop 和名為input的事件，但是像單選框、核取方塊等型別的輸入控制項可能會將value attribute 用於不同的目的。

實現自定義元件的v-model：

ex1：

}
使用：

ex2：
使用：

1.6、將原生事件繫結到元件：

element-ui中input元件縮減版：
使用：

1.7、.syns修飾符：

在有些情況下，我們可能需要對乙個 prop 進行「雙向繫結」。不幸的是，真正的雙向繫結會帶來維護上的問題，因為子元件可以變更父元件，且在父元件和子元件都沒有明顯的變更**。所以將v-bind:mypropname.syns模式觸發事件取而代之。

元件：

}
使用：

當我們用乙個物件同時設定多個 prop 的時候，也可以將這個.sync修飾符和v-bind配合使用。

obj:
三、插槽

1.1具名插槽：

已廢棄的使用slot attribute的語法：

元件：
使用：
自 2.6.0 起有所更新：

元件：
使用：

a paragraph for the main content.


and another one.


here's some contact info
1.2、作用域插槽：

已廢棄的使用slot-scope attribute的語法：

元件：
使用：
自 2.6.0 起有所更新。

元件：
使用：
1.3、獨佔預設插槽

當被提供的內容只有預設插槽時，元件的標籤才可以被當作插槽的模板來使用。

元件：
使用：

}
注意預設插槽的縮寫語法不能和具名插槽混用，因為它會導致作用域不明確。只要出現多個插槽，請始終為所有的插槽使用完整的基於的語法

零碎知識C

c 中 dec,hex,oct,fixed,scientific,left,right,ws,setfill,setw,setprecision，eof，get，getline都是什麼意思 dec是十進位制 如cout這些是格式控制符 在使用時要加標頭檔案 include fixed是固定的意思 p...

JavaBean零碎知識

上面等價於下列操作 1.從scope session 中獲取id customer 屬性值，賦值給class com.stuipid.bean.customer 型別的id customer 變數 customer customer customer session.getattribute cus...

零碎知識點

1.反斜槓也可拼接字串 window.nl ad function window.nl ad function 2.在console.log 中新增樣式 var a hello console.log c a,font size 400 background blue color white 3 通...