<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>v-el 和 v-ref</title>
    <link rel="stylesheet" href="./dist/css/bootstrap.css">
</head>
<body>
    <div id="app">
            <button @click="getdom">获取dom对象</button>
            <div id="div1" ref="mydiv" > hello v-el</div>
            <button v-on:click="getcom">获取组件对象</button>
            <login ref="mycom"></login>
    </div>

<script src="vue.js"></script>
<script src="vue-resource1.5.1.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{

        },
        methods:{
            getdom(){
                //获取到id= div1 的div对象
                // console.log(document.getElementById('div1'))  1.0 version
                //2.0 version
                console.log(this.$refs.mydiv.innerHTML);
            },
            getcom(){//2.x version 写法
                console.log(this.$refs.mycom.subname);
            }
        },
        components:{
            'component_name':{
            },
            'login':{
                data(){
                    return{
                        subname:'子组件名称'
                    };
                },
                template:'<h1>你好</h1>'
            }
        }

    });
</script>
</body>
</html>

vue 获取组件 和 dom 对象 ref/el的更多相关文章

  1. jquery 获取多个dom对象的方法

    $("[name=trade]").each(function(){ for(j=0;j<info.trade.length;j++){ if( $(this).val() ...

  2. Vue 获取数据、事件对象、todolist

    vue中在方法里获取data里的msg:this.msg 在微信小程序里this.data.msg 改变data里的msg:this.msg="改变后的msg" 可以通过list. ...

  3. vue方法中传递dom对象示例

    <div id="app"> <input type="text" v-on:keyup="onlyNum($event)" ...

  4. innerHTML与innerText的区别: 前者获取的是dom对象内的所有html元素 后者获取的是dom对象里面的纯文本元素

  5. Vue获取DOM元素的属性值

    项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...

  6. js点滴知识(1) -- 获取DOM对象和编码

    在今天的工作中发现了一些小的问题,在网上查了一下,才知道自己的js才是冰山一角,以后要虚心向他人学习,要虚怀若谷. 发现一:js获取DOM对象与jquery的区别 先前总以为,二者是一样的,最近才知道 ...

  7. js获取dom对象style样式的值

    js获取到的dom对象的style通常是没有值得,因为我们都写在外部文件中,从慕课网上见到讲师封装的一个方法,挺不错.特此记录下来. function getStyle(obj,attr){ if(o ...

  8. Vue全局组件注册

    通过Vue.component(‘组件名’, {配置对象})注册全局组件 在main.js中注册全局组件 test import Vue from 'vue' import App from './A ...

  9. jQuery对象和DOM对象的区别

    jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...

随机推荐

  1. app开发中读取数据库信息的vue页面

    <template> <!-- 容器 --> <div class="container"> <!-- 标头 --> <div ...

  2. VC++ 中ListCtrl经验总结

    先注明一下,这里,我们用m_listctrl来表示一个CListCtrl的类对象,然后这里我们的ListCtrl都是report形式,至于其他的如什么大图标,小图标的暂时不讲,毕竟report是大众话 ...

  3. atrous convolution

    atrous convolution 简而言之,带孔卷积: 来自:https://zhuanlan.zhihu.com/p/27470685 假设一个二维信号,每个位置对应的输出为和卷积核为,带孔卷积 ...

  4. jquery iframe父子框架中的元素访问方法

    在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1. 格式:window. ...

  5. easyui-属性表格-easyui-propertygrid-列名显示英文官方文档无修改方案

    修改值name value值为中文示例步骤: 1.<table 中    class="easyui-propertygrid" 中的data-options属性中加入  c ...

  6. 1.5.6、CDH 搭建Hadoop在安装之前(定制安装解决方案---使用Cloudera Manager模板创建CDH群集)

    使用Cloudera Manager模板创建CDH群集 您可以通过从Cloudera Manager管理的现有CDH群集导出群集模板来创建新的CDH群集.然后,您可以修改模板并使用它在新的主机集上创建 ...

  7. Light Probe Proxy Volume

    [Light Probe Proxy Volume] The Light Probe Proxy Volume (LPPV) component allows you to use more ligh ...

  8. Java基础学习笔记（四）

    21.构造方法(续):分类: 隐式构造方法:如果在一个类中,没有手动编写构造方法,则系统会提供一个默认的无参的构造方法 显式构造方法:如果在一个类中,手动编写构造方法,则系统不会提供默认的无参的构造方 ...

  9. GreenDao3.0简单使用（转）

    关于GreenDao greenDao是一个将对象映射到SQLite数据库中的轻量且快速的ORM解决方案. 关于greenDAO的概念可以看官网greenDAO greenDAO 优势 1.一个精简的 ...

  10. tomcat端口被占用 实际上却查询不到此端口

    参考 http://www.cnblogs.com/jieliujas/p/9413064.html 1.打开PCHunter,在进程选项卡下面可以找到无法结束的进程,右键--强制结束,失败(这儿效果 ...