div跟随鼠标包含script外部引入vue显示坐标的html文件
时间: 2024-09-11 22:04:18 浏览: 52
Vue中通过<script></script>引入的Vue.js文件
5星 · 资源好评率100%
如果你想在一个独立的HTML文件中使用外部脚本引入Vue,并创建一个div跟随鼠标移动显示坐标,你需要以下几个步骤:
1. 首先,确保已经安装了Vue CLI或者手动引入Vue.js库。可以在<head>标签内通过CDN引入:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Mouse Position</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<!-- 你的HTML结构 -->
<div id="app">
<div ref="mousePosition" :style="{left: mouseX + 'px', top: mouseY + 'px'}" class="cursor-pointer" @mousemove.capture="showPosition">鼠标位置</div>
</div>
<script src="your-vue-file.js"></script>
</body>
</html>
```
2. 在外部JS文件`your-vue-file.js`中,创建一个简单的Vue实例:
```javascript
new Vue({
el: '#app',
data: {
mouseX: null,
mouseY: null,
},
methods: {
showPosition(e) {
this.mousePosition = document.querySelector('#mousePosition');
this.mousePosition.textContent = `鼠标位置: X=${e.clientX}, Y=${e.clientY}`;
}
},
});
```
这里假设你已经创建了一个名为`#mousePosition`的div,并绑定了`ref`属性。当鼠标移动时,`showPosition`方法会被触发,更新div的位置和内容。
3. 最后,确保HTML页面的`<body>`标签中有一个id为`app`的容器,用于挂载Vue实例。
注意,为了保持兼容性,可能需要在移动设备上处理一些细节,比如触摸事件代替鼠标事件。
阅读全文