vue2.0中的ref.html

本文轉載自查看原文 2017-12-20 11:33 2125 vue.js

前置知識請戳這里

獲取DOM對象以及組件對象

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
        <button @click="getdom">獲取DOM對象</button>
        <div ref="mydiv" id="box">hello vue</div>
        
        <button @click="getcom">獲取組件對象</button>
        <login ref="mycom"></login>
    </div>
        
    <script>
      new Vue({
        el: '#app',
        methods:{
            getdom:function(){
                //獲取id=box的div對象
                //1、通過傳統的document
                console.log(document.getElementById('box').innerHTML);
                
                //2、vue2.0的寫法
                console.log(this.$refs.mydiv.innerHTML);
            },
            getcom:function(){
                console.log(this.$refs.mycom.subname);
            }
        },
        components:{
            'login':{
                data:function(){
                    return {
                        subname:"子組件的名稱"
                    }
                },
                template:"<h3>這是一個子組件</h3>"
            }
        }
      });
    </script>
  </body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue2.0中使用svg vue2.0中怎么引用less？關於vue2.0中 $route和$router vue2.0中使用sass vue2.0中使用less Vue2.0中的Ajax請求 VUE2.0 【v-html】標簽使用技巧初學VUE2.0 vue2.0入門通過原生js實現Vue2.0中數據的雙向綁定