<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> < Body > < div the above mentioned id = "App" > < the INPUT of the type = "the Button" value = "get elements" @click = "getElement" ref = "myBtn" > < h3 the above mentioned id = "MYH3" ref = "MYH3" > ha ha ha, nice weather today! ! ! </ H3 > < HR > < Login REF = "mylogin" > </ Login > </ div > < Template: ' <h1 of> Logon. </ h1 of> ' , Data () { return { MSG: ' Son MSG ' } }, Methods: { Show () { the console.log ( ' called method subassembly ' ) } } } // Create Vue instance, to give the ViewModel var VM = new new Vue ({ EL: ' #app ' , Data: {}, Methods: { getElement () { //console.log (document.getElementById ( 'MYH3'). innerText) // ref is the English word [reference] value types and reference types ReferenceError // console.log (the this. $ refs.myh3.innerText) // console.log (. refs.mylogin.msg the this $) // the this refs.mylogin.show $ (). } }, Components: { Login } }); </ Script > </ body > </ HTML >