Vue作為一款前端框架，具有很強的組件化能力，讓我們可以實現一些常見的UI組件功能。其中一個比較常用的功能是讓控件顯示紅點。在實際開發中，我們經常會遇到這種需求，例如：在消息中心中，未讀消息需要用紅點來標記；或者在購物車中，商品數量發生變化后，購物車按鈕也需要用紅點來提醒用戶。

在Vue中，我們可以通過通過自定義指令來實現紅點的顯示功能。下面是一個示例代碼：

Vue.directive('red-point', {
bind: function (el, binding) {
// binding.value表示要展示的數字
if (binding.value >0) {
var div = document.createElement('div');
div.className = 'red-point';
div.innerText = binding.value;
el.appendChild(div);
}
}
})

上面的代碼中，我們定義了一個名為"red-point"的自定義指令，它會在綁定時執行，判斷要展示的數字是否大于0，如果大于0，則創建一個紅點div，將數字添加到div中，并將紅點div添加到el元素中。

接下來，我們需要添加一些CSS樣式來讓紅點顯示出來：

.red-point {
position: absolute;
top: -5px;
right: -8px;
width: 18px;
height: 18px;
background-color: red;
border-radius: 50%;
color: #fff;
line-height: 18px;
text-align: center;
}

這些樣式會使紅點按照我們的預期樣式展示。

在實際使用中，我們只需要在需要顯示紅點的控件上添加"v-red-point"指令，例如:

<i class="iconfont icon-message" v-red-point="unreadCount"></i>

上面的代碼中，我們在字體圖標上添加了"v-red-point"指令，并傳遞了unreadCount作為要顯示的數字。當unreadCount大于0時，就會在圖標上添加一個紅點，顯示未讀消息數量。

除了數字外，我們還可以在指令中處理更多復雜的情景，例如：根據某個數據是否有更新動態顯示紅點。

總之，Vue的自定義指令功能為我們實現控件顯示紅點提供了便利的方式，讓我們能夠更加高效地開發出漂亮的UI組件。