获取DOM元素在Vue中非常简单,可以使用以下两种方式:
1. 使用$refs
<template> <div ref="myDiv">我是一段DOM元素</div> </template> <script> export default { mounted() { const myDiv = this.$refs.myDiv; console.log(myDiv); }, }; </script>
在mounted钩子函数中,可以通过this.$refs来访问定义在模板中的ref属性,这里的myDiv就是一个DOM元素,可以直接操作它。
2. 使用原生DOM API
<template> <div id="myDiv">我是一段DOM元素</div> </template> <script> export default { mounted() { const myDiv = document.getElementById('myDiv'); console.log(myDiv); }, }; </script>
Vue组件实际上是基于原生DOM API来实现的,所以我们也可以像普通的Web开发一样使用原生API来获取DOM元素,这里的myDiv就是一个DOM元素,可以直接操作它。