1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <script src="./lib/vue-2.4.0.js"></script>
  10. </head>
  11.  
  12. <body>
  13.   <div id="app">
  14.     <input type="button" value="获取元素" @click="getElement" ref="mybtn">
  15.     <!-- 这里ref是设置要获取的dom元素 -->
  16.     <h3 id="myh3" ref="my">哈哈哈， 今天天气太好了！！！</h3>
  17.     <hr>
  18.     <login ref="mylogin"></login>
  19.   </div>
  20.  
  21.   <script>
  22.  
  23.     var login = {
  24.       template: '<h1>登录组件</h1>',
  25.       data() {
  26.         return {
  27.           msg: 'son msg'
  28.         }
  29.       },
  30.       methods: {
  31.         show() {
  32.           console.log('调用了子组件的方法')
  33.         }
  34.       }
  35.     }
  36.  
  37.     // 创建 Vue 实例，得到 ViewModel
  38.     var vm = new Vue({
  39.       el: '#app',
  40.       data: {},
  41.       methods: {
  42.         getElement() {
  43.           // console.log(document.getElementById('myh3').innerText)
  44.           //  ref  是 英文单词 【reference】   值类型 和 引用类型  referenceError
  45.           //注意用$refs 获取的原生的DOM对象
  46.           console.log(this.$refs.my.innerText)
  47.           console.log(this.$refs.mylogin.msg)
  48.           this.$refs.mylogin.show()
  49.         }
  50.       },
  51.       components: {
  52.         login
  53.       }
  54.     });
  55.   </script>
  56. </body>
  57.  
  58. </html>

Vue 获取DOM元素ref的更多相关文章

  1. vue获取dom元素内容

    通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...

  2. vue获取dom元素注意问题

    mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...

  3. vue获取dom元素高度的方法

    获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...

  4. Vue 获取dom元素之 ref 和 $refs 详解

    一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...

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

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

  6. vue获取DOM元素并设置属性

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相 ...

  7. Vue获取dom元素

     <li  @click='获取li标签'    :ref="center-li" id="center-li"      > =====我是li标 ...

  8. Vue获取DOM元素样式 && 样式更改

    在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...

  9. Vue 获取dom元素中的自定义属性值

    方法一: HTML <div id="app"> <button @click="getData($event,'100')">点我&l ...

随机推荐

  1. 【JZOJ5094】【GDSOI2017第四轮模拟day3】鸽子 计算几何+floyd

    题面 养鸽人要监视他的鸽子,有n只鸽子站在平面上,他可以在m个给定的点上设置监视器,如果一只鸽子在某个监视器上或者在两个监视器所连直线上或者在三个监视器所连直线的三角形内则其就咕咕咕了,现在养鸽人要让 ...

  2. SpringBoot启动报错Failed to determine a suitable driver class

    SpringBoot启动报错如下 Error starting ApplicationContext. To display the conditions report re-run your app ...

  3. Sublime中输入中文的解决方案

    之前系统用的输入法是 ibus,在sublime中无法使用, 可能是不支持该输入法. 然后改用 fcitx,切换输入法之后要重启系统才可以生效, 启动之后就可以使用中文了.

  4. R语言Switch语句

    R语言Switch语句 switch语句允许一个变量值的列表来平等进行测试.每个值被称为一个条件(情况),变量被接通检查每个条件(情况). 语法 在R语言中创建switch语句的基本语法是: 以下规则 ...

  5. docker入门 基础命令 docker安装

    docker入门   在学一门新知识的时候,超哥喜欢提问,why?what?how? wiki资料 什么是docker Docker 最初是 dotCloud 公司创始人 Solomon Hykes ...

  6. Docker for windows pull镜像文件的安装位置改变方法

    发生现象: 在windows10下安装docker for windows,随着用docker pull image文件后,C盘的容量越来越小了,你可能也有一种跟我一样的想法,想改变默认的安装路径,本 ...

  7. iOS开发 底层抛析运行循环—— RunLoop

    http://blog.csdn.net/zc639143029/article/details/50012527 一.RunLoop基本概念 概念:程序的运行循环,通俗的来说就是跑圈. 1. 基本作 ...

  8. 使用 Swift 构建自定义的ActivityIndicator View

    目前在自己的个人项目里,已经开始使用Swift去编写代码.这篇文章把项目中自己设计的一个ActivityIndicator View展示给大家. 在开始之前,我们先看看最终的效果,如下图: 我建议大家 ...

  9. c++编译错误：invalid new-expression of abstract class type

    原因: 出现这个错误原因是new 了一个抽象类出错,说明父类(接口)中有纯虚函数没有实现.接口里的纯虚函数全部需要实现,这样才能new 子类. 例如: 纯虚函数例如 ; 是纯虚函数,不是纯虚函数不作要 ...

  10. js遮罩

    1.1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000 ...