圖片發大是一個常見的UI需求，在Vue中實現非常簡單，可以通過指令和樣式的設置來完成。下面分別介紹兩種實現方式。

// 指令方式：通過綁定指令來實現圖片發大// 注冊指令
Vue.directive('img-zoom', {
bind: function (el, binding) {
// 獲取縮放比例
var scale = binding.value.scale || 1;
// 初始樣式
el.style.transition = 'transform .3s';
el.style.transformOrigin = '0 0';
// 綁定事件
el.addEventListener('mouseenter', function () {
el.style.transform = 'scale(' + scale + ')';
});
el.addEventListener('mouseleave', function () {
el.style.transform = 'scale(1)';
});
}
});

以上代碼中，v-img-zoom指令綁定到img標簽上，指令需要傳入一個scale屬性，用來指定縮放比例。在注冊指令時，通過el獲取當前元素，設置初始樣式和綁定事件。當鼠標移入時，設置transform縮放屬性，當鼠標移出時，重置transform縮放屬性。

// 樣式方式：通過設置樣式來實現圖片發大
// 樣式設置
.zoom {
overflow: hidden;
cursor: pointer;
}
.zoom img {
transition: transform .3s;
transform-origin: 0 0;
}
.zoom:hover img {
transform: scale(1.5);
}

以上代碼中，父元素使用overflow:hidden來隱藏img溢出部分，設置cursor:pointer來鼠標懸停時變為手型。img標簽設置transform縮放過渡效果和初始縮放原點。鼠標懸停在父元素上時，img標簽設置變形縮放屬性，觸發縮放動畫。

總結：兩種方式實現圖片發大各有優缺點，指令方式需要在注冊指令時設置復雜的邏輯，但方便在多個組件中使用；樣式方式使用簡單，但需要編寫復雜的CSS選擇器來達到效果。根據實際需求選擇不同的實現方式。