1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <!--1.导入Vue的包--> 10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 11 </head> 12 13 <body> 14 <div id="app"> 15 <input type="button" value="获取元素" @click="getElement" ref="mybtn"> 16 <h3 id="myh3" ref="myh3">哈哈哈，今天天气太好了！！！</h3> 17 18 <hr> 19 <login ref="mylogin"></login> 20 </div> 21 22 <script> 23 24 var login={ 25 template:'<h1>登录组件</h1>', 26 data(){ 27 return{ 28 msg:'son msg' 29 } 30 }, 31 methods:{ 32 show(){ 33 console.log('调用了子组件的方法') 34 } 35 } 36 } 37 38 39 //创建 Vue 实例，得到 ViewModel 40 var vm = new Vue({ 41 el:'#app', 42 data:{ 43 msg:'' 44 }, 45 methods:{ 46 getElement(){ 47 // console.log(document.getElementById('myh3').innerText) 48 49 //ref 是英文单词 【reference】引用 referenceError 50 // console.log(this.$refs.myh3.innerText) 51 // console.log(this.$refs.mylogin.msg) 52 this.$refs.mylogin.show() 53 } 54 }, 55 components:{ 56 login 57 } 58 }); 59 </script> 60 </body> 61 </html>
个人理解：相当于给你想要操作的DOM元素做过标记（ref），之后通过这个标记（ref）就可以获取DOM元素做相应的操作了，而不是通过操作DOM元素相关的API，比如document.getElementById()来获取DOM元素。