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中数据的双向绑定