由于移動端設備的普及，手勢縮放的功能越來越被廣泛應用。在Vue.js中，通過使用插件或自定義指令，可以輕松實現圖片的手勢縮放功能。下面將分為介紹插件和自定義指令兩部分來詳細介紹Vue中圖片手勢縮放的實現。

一、插件實現Vue圖片手勢縮放

import Vue from 'vue'
import VuePinchZoom from 'vue-pinch-zoom';
Vue.component('vue-pinch-zoom', VuePinchZoom);

上述代碼通過使用vue-pinch-zoom插件，實現了圖片的手勢縮放功能。使用的時候，只需要在需要縮放的圖片元素上添加"vue-pinch-zoom"標識，在組件中引用該組件即可。

二、自定義指令實現Vue圖片手勢縮放

Vue.directive('pinch', {
bind: function (el, binding) {
var hammer = new Hammer(el);
var scale = 1, lastScale = undefined;
var currentX = 0, currentY = 0, lastPosX = 0, lastPosY = 0;
var elWidth = el.clientWidth, elHeight = el.clientHeight;
hammer.get('pinch').set({ enable: true });
hammer.on('pinch', function (e) {
scale = Math.min(5, Math.max(.5, e.scale * scale));
el.style.transform = 'scale(' + scale + ') translate(' + currentX + 'px,' + currentY + 'px)';
});
hammer.on('pan', function (e) {
currentX = e.deltaX + lastPosX;
currentY = e.deltaY + lastPosY;
el.style.transform = 'scale(' + scale + ') translate(' + currentX + 'px,' + currentY + 'px)';
});
hammer.on('panend', function (e) {
lastPosX = currentX;
lastPosY = currentY;
});
}
});

上述代碼通過使用Hammer.js庫，實現了圖片縮放和拖拽的功能。使用的時候，只需要在需要縮放和拖拽的圖片元素上添加"v-pinch"指令值即可。

總結：

Vue.js提供了插件和自定義指令兩種方式來實現圖片手勢縮放的功能。使用插件更加方便簡單，但是可能會包含過多的代碼，增加應用的體積。自定義指令需要手動實現手勢操作的邏輯，但是可以針對具體應用場景實現更為精細的控制。在實現的時候，需要注意使用合適的庫來輔助實現手勢操作的功能。