Vue系列之 => ref獲取DOM元素和元件
阿新 • • 發佈：2019-01-02
可以獲取DOM元素，和元件中的資料，方法
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<script src="./lib/jquery2.1.4.min.js"></script> 10 <script src="./lib/Vue2.5.17.js"></script> 11 <link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css"> 12 </head> 13 14 <body> 15 16 <div id="app"> 17 <input type="button" value="獲取元素" @click="getElement"> 18<h3 id="myh3" ref="myh3">哈哈哈哈，今天天氣真不錯！</h3> 19 <hr> 20 <login ref="mylogin"></login> 21 </div> 22 23 <!-- 模板 --> 24 <template id="tmpl"> 25 26 </template> 27 28 <script> 29 var login = {30 template : '<h1>這f 是登入元件</h1>', 31 data(){ 32 return { 33 msg : 'newcontent' 34 } 35 }, 36 methods: { 37 show(){ 38 console.log('嘿嘿黑惡'); 39 } 40 }, 41 } 42 43 var vm = new Vue({ 44 el : '#app', 45 data : {}, 46 methods: { 47 getElement(){ 48 // ref 是英文單詞 【reference】 在瀏覽器控制檯 輸入vm 檢視 49 console.log(this.$refs.myh3.innerText); 50 console.log(this.$refs.mylogin.msg); 51 this.$refs.mylogin.show() 52 } 53 }, 54 components : { 55 login 56 } 57 }) 58 </script> 59 </body> 60 61 </html>