<!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. 将 DNSCrypt 部署到 Openwrt 路由器上+ DNSmasq 解析国内域名用本地 DNS[ZT+实践]

    原文地址: 1.https://typcn.com/legacy/blog/posts/openwrt-dnscypt.html 2.http://www.openwrt.pro/post-376.h ...

  2. [转载]FMS Dev Guide学习笔记(验证客户端二)

    一.开发交互式的媒体应用程序 1.使用unique key a. 在客户端ActionScript中创建一个unique key,如下代码所示,unique key的组成为本地电脑时间和一个随机数连接 ...

  3. ROC，AUC，Precision，Recall，F1的介绍与计算（转）

    1. 基本概念 1.1 ROC与AUC ROC曲线和AUC常被用来评价一个二值分类器(binary classifier)的优劣,ROC曲线称为受试者工作特征曲线 (receiver operatin ...

  4. （转载）jenkins 安装 SVN Publisher 后向 svn 提交代码报错: E170001: Authentication required for...

    问题描写叙述 安装并启动 jenkins 后,加入了 SVN Publisher 插件,然后在构建任务的“构建后操作”操作中加入了“Publish to Subversion repository”相 ...

  5. vue-cli结构介绍

    vue-cli是vue项目开发的脚手架,非常方便,其结构大致如下, 其中static是存放静态资源的,存放的静态数据可以访问到,如果在static文件夹中创建mock文件夹,在mock文件夹中创建in ...

  6. python遇到的错误

    今天学习文件遇到这个错误. 这是在 text_files\vvvv.txt  之间加一个\ 就可以了,变成  text_files\\vvvv.txt,运行成功

  7. linux中weblogic相关命令操作

    在weblogic的目录下找到bin目录,其中有startWeblogic.sh.startManagerWeblogic.sh等 首先需要启动startWeblogic.sh,这个是管理服务,也就是 ...

  8. python 进阶(转自http://python.jobbole.com/82633/)

    网络 通用 urllib -网络库(stdlib). requests -网络库. grab – 网络库(基于pycurl). pycurl – 网络库(绑定libcurl). urllib3 – P ...

  9. Struts2学习资料

    Struts2入门示例教程 http://blog.csdn.net/wwwgeyang777/article/details/19078545     Struts2工作原理 http://blog ...

  10. 在 MySQL 中创建一个中文数据库

    安装完 MySQL 后,要修改密码. step 1: SET PASSWORD = PASSWORD('your new password'); step 2: ALTER USER 'root'@' ...