<!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. android apk 在哪个目录下安装？

    system/app系统自带的应用程序,无法删除.data/app用户程序安装的目录,有删除权限.安装时把apk文件复制到此目录.data/data存放应用程序的数据

  2. 16.1 用auth0服务 实现用登录和管理 使用auth版本的2个大坑。

    这是三周内容,实现用户登录和管理 回到master分支 切换到 han分支 更新一下 然后工作 开始工作写代码了 安装2个angular端的auth0的lib,也可不安装,后边有不安装的做法 不安装的 ...

  3. 限制ssh登录ip和系统用户

    一般对于安全性要求比较高的系统,限制ssh登录的源ip地址和可以登录的系统账户是非常有必要的,ssh登录的源地址和可以登录的系统账户的设置在sshd的配置文件/etc/ssh/sshd_config中 ...

  4. sql server连接字符串与tcp/ip开启

    连接字符串1:Data Source=localhost,1433;User ID=sa;Password=123;Initial Catalog=test;Min Pool Size=1;Max P ...

  5. effective C++学习二（仅供个人学习记录，本文摘录effective C++）

    条款 2:尽量用<iostream>而不用<stdio.h> scanf 和 printf 很轻巧,很高效,你也早就知道怎么用它们,这我承 认.但尽管他们很有用,事实上 sca ...

  6. 获取当前ip

    测ip地址http://2018.ip138.com/ic.asphttps://www.ip.cn/

  7. 基础的正则表达式与re模块（2）

    一.元字符 字符组是元字符中的一个.在字符组中所有的字符都可以匹配任意一个字符位置上能出现的内容,如果在字符串中有任意一个字符是字符组中的内容,那么就是匹配上的项. [0-9]   [a-z]    ...

  8. SQL Server和MySQL数据库

    导读:接下来的网上商城的项目,需要用到MySQL数据库了.这个对于我来说,是一个新接触的东西,按照惯例,在刚开始学习一个东西的时候,先从宏观上去了解它.本篇博客,先介绍SQL Server的基本内容, ...

  9. Ik分词器没有使用---------elasticsearch-analysis-ik 5.6.3分词问题

    此文章在作者认真阅读源码后发现,这并不是问题所在. 此篇文章是对IK配置的错误理解.新版本的IK配置的扩展字典本来就该使用者自己去手动配置! 1.问题 现在项目中用的是ES5.6.3的版本,在解决Fi ...

  10. powerdessigner使用教程

    https://jingyan.baidu.com/article/86fae346e089393c49121a11.html