Apereo CAS 4.1 反序列化 RCE 漏洞

阿新 • • 發佈：2022-05-05

vue基礎

資料的頁面展示{{}} ,v-once,v-html

資料繫結屬性v-bind,簡寫用:

事件呼叫：v-on,簡寫：@

V-if與v-show，異同

v-for 用in和of都一樣，迴圈陣列的時候，可以有兩個引數，迴圈物件時，可以有三個引數

style與class繫結

計算屬性

表單雙向繫結

vue 指令

1. 內容渲染指令

v-text 指令的缺點：會覆蓋元素內部原有的內容！
{{ }} 插值表示式：在實際開發中用的最多，只是內容的佔位符，不會覆蓋原有的內容！
v-html 指令的作用：可以把帶有標籤的字串，渲染成真正的 HTML 內容！

2. 屬性繫結指令

注意：插值表示式只能用在元素的內容節點中，不能用在元素的屬性節點中！

在 vue 中，可以使用 v-bind: 指令，為元素的屬性動態繫結值；
簡寫是英文的 :
在使用 v-bind 屬性繫結期間，如果繫結內容需要進行動態拼接，則字串的外面應該包裹單引號，例如：
```
<div :title="'box' + index">這是一個 div</div>
```

3. 事件繫結

v-on: 簡寫是 @

語法格式為：

<button @click="add"></button>

methods: {
   add() {
            // 如果在方法中要修改 data 中的資料，可以通過 this 訪問到
            this.count += 1
   }
}

`$event` 的應用場景：如果預設的事件物件 e 被覆蓋了，則可以手動傳遞一個 $event。例如：

<button @click="add(3, $event)"></button>

methods: {
   add(n, e) {
            // 如果在方法中要修改 data 中的資料，可以通過 this 訪問到
            this.count += 1
   }
}

事件修飾符：

.prevent
```
<a @click.prevent="xxx">連結</a>
```

.stop

<button @click.stop="xxx">按鈕</button>

4. v-model 指令

input 輸入框
- type="radio"
- type="checkbox"
- type="xxxx"
textarea
select

5. 條件渲染指令

v-show 的原理是：動態為元素新增或移除 display: none 樣式，來實現元素的顯示和隱藏
- 如果要頻繁的切換元素的顯示狀態，用 v-show 效能會更好
v-if 的原理是：每次動態建立或移除元素，實現元素的顯示和隱藏
- 如果剛進入頁面的時候，某些元素預設不需要被展示，而且後期這個元素很可能也不需要被展示出來，此時 v-if 效能更好

在實際開發中，絕大多數情況，不用考慮效能問題，直接使用 v-if 就好了！！！

v-if 指令在使用的時候，有兩種方式：

直接給定一個布林值 true 或 false

<p v-if="true">被 v-if 控制的元素</p>

給 v-if 提供一個判斷條件，根據判斷的結果是 true 或 false，來控制元素的顯示和隱藏
```
<p v-if="type === 'A'">良好</p>
```

過濾器

過濾器的注意點

要定義到 filters 節點下，本質是一個函式
在過濾器函式中，一定要有 return 值
在過濾器的形參中，可以獲取到“管道符”前面待處理的那個值
如果全域性過濾器和私有過濾器名字一致，此時按照“就近原則”，呼叫的是”私有過濾器“

watch 偵聽器

偵聽器的格式

方法格式的偵聽器
- 缺點1：無法在剛進入頁面的時候，自動觸發！！！
- 缺點2：如果偵聽的是一個物件，如果物件中的屬性發生了變化，不會觸發偵聽器！！！
物件格式的偵聽器
- 好處1：可以通過 immediate 選項，讓偵聽器自動觸發！！！
- 好處2：可以通過 deep 選項，讓偵聽器深度監聽物件中每個屬性的變化！！！