Vue能够获取手机权限原理是因为它借助了浏览器的Web API技术，其中涵盖了HTML5规范定义的许多API。HTML5的API技术包括位置、加速度、罗盘、相机、麦克风、导航、响应式等多个能力，通过JavaScript代码来访问这些API，从而获取您的手机权限。

// 获取用户位置
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("该浏览器不支持地理定位。");
}
// 监测屏幕尺寸
if (screen.width < 768) {
console.log("移动端设备");
} else {
console.log("电脑端设备");
}
// 访问麦克风
navigator.mediaDevices.getUserMedia({ audio: true })
.then(function(stream) {
console.log('成功获取麦克风');
})
.catch(function(err) {
console.log('无法获取麦克风：' + err.message);
});

在上面的代码中，我们可以看到如何获取用户位置、监测屏幕尺寸和访问麦克风。我们只需要使用navigator.geolocation、screen和navigator.mediaDevices.getUserMedia这几个内置的Web API即可实现这些功能。其中getCurrentPosition()是根据用户的IP地址定位用户坐标，而getUserMedia()是获取用户可访问的媒体设备，包括麦克风、相机等。

使用Vue时，可以通过创建组件来利用这些Web API。例如，我们可以创建一个Video组件，向用户请求使用摄像头的权限：

Vue.component('my-video', {
template: '<video playsinline autoplay ref="video"></video>',
mounted() {
navigator.mediaDevices.getUserMedia({ video: true })
.then(this.handleSuccess)
.catch(this.handleError);
},
methods: {
handleSuccess(stream) {
this.$refs.video.srcObject = stream;
},
handleError(error) {
console.log('获取摄像头失败：' + error.message);
}
}
});

通过在mounted()生命周期中调用getUserMedia()函数，我们可以确保已经获取用户的摄像头流并将其嵌入到Video组件中。在handleSuccess()回调函数中，我们设置参考video元素的srcObject属性以指定数据源，从而实现在浏览器中实时查看摄像头捕捉到的内容。如果出现错误，则会在handleError()回调函数中记录错误信息以便调试。