<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="app">

    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>

       /*

       在Vue中提供了一种特别的方式来获取元素：

       给元素加上个ref属性，那么就可以通过this.$refs.名字来获取到该元素

       */

       /* 前面知道了Vue的生命周期的钩子函数，其中需要注意的是在DOM挂载后，事件可能不能正常的触发，

       需要将其放入到$nextTick方法里：在下次 DOM 更新循环结束之后执行延迟回调。

       在修改数据之后立即使用这个方法，获取更新后的 DOM。

       */

       new Vue({

           el: '#app',

           data(){

                return {

                    isShow: false

                }

           },

           template:`

           <div>

            <input type='text' v-if='isShow' ref='inp'/>

            </div>

           `,

            mounted() {

                this.isShow = true;

                // 若删掉外面的$nextTick方法，那么将不能识别出该输入框，

                // 聚焦事件也不能正常执行

                this.$nextTick(function() {

                    console.log(this.$refs.inp);

                    this.$refs.inp.focus();

                });

            }

       })

    </script>

</body>

</html>

Vue之获取DOM元素与更新DOM后事件的特殊情况的更多相关文章

  1. 【转】从Vue.js源码看异步更新DOM策略及nextTick

    在使用vue.js的时候,有时候因为一些特定的业务场景,不得不去操作DOM,比如这样: <template> <div> <div ref="test" ...

  2. vue中一个dom元素可以绑定多个事件？

    其实这个问题有多个解决方法的  这里提出两点 第一种 第二种 现在dom上绑定一个 然后在你的methods中直接调用 如果要传参数  这时候千万别忘记 原创 如需转载注明出处 谢谢

  3. 获取 js DOM元素中绑定的所有事件,模仿 chrome getEventListeners

    偶尔看到了这个问题,如何用JS获取元素某一事件上绑定的所有Listener? 突然觉得好像是有解决办法的,查了下,在 chrome 下,支持 window.getEventListeners(obj) ...

  4. problem: vue中获取动态元素高度

    前言:始终要相信你能想到的解决方案,基本上都是可以用技术实现的... 解决方法就是在mounted中在this.$nextTick()去获取,如果没有获取到,不是写法错就是,元素没有绑定对地方,注意检 ...

  5. document.getElementById 和 document.getElementsByClassName获取DOM元素的区别

    想必小伙伴们对于 JS 获取DOM的几种方法早已烂熟于心,了然于胸,   尤其是 document.getElementById 和 document.getElementsByClassName, ...

  6. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  7. 深度解析JQuery Dom元素操作技巧

    深度解析JQuery Dom元素操作技巧 DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了JQuery dom元素操作方法,写的十分的全面细 ...

  8. C1:DOM 元素的尺寸和位置

    DOM元素的尺寸和位置 DOM 元素的尺寸 DOM.offsetWidth/offsetHeight: 包括内容区宽/高,padding,border,不包括margin.如果元素的box-sizei ...

  9. HTML DOM 元素对象

    HTML DOM 元素对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 : 文档本身就是一个文档对象 所有 HTML 元素都 ...

随机推荐

  1. MySQL基本数据类型之枚举与集合类型

    目录 一:枚举 1.枚举 2.创建表(使用枚举) 3.表内添加数据 二:集合 1.集合 2.创建表(使用集合) 3.表内添加数据 一:枚举 1.枚举 枚举作用: 提前定义好数据之后 后续录入只能录定义 ...

  2. linux区分atime，ctime and mtime

  3. ApacheCN 深度学习译文集 20201218 更新

    新增了四个教程: Python 人工智能中文版 0 前言 1 人工智能简介 2 人工智能的基本用例 3 机器学习管道 4 特征选择和特征工程 5 使用监督学习的分类和回归 6 集成学习的预测分析 7 ...

  4. EasyExcel小试牛刀

    原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/12029411.html 某种偶然的机会遇到了这个插件, 听说很牛X, 我之前也不知道, 不过还 ...

  5. STP的究极进化MSTP

    MSTP多生成树协议 1.MSTP概述 2.MSTP相关配置命令 1.MSTP是一个公有生成树协议,在实际生产环境中得到了广泛的应用. PVST是思科私有的,它能让多实例,多VLAN可以进行负载均衡, ...

  6. SQLServer误删ReportServerTempDB导致打不开其他库——解决方案

    无意间删除了ReportServerTempDB库和ReportServer 导致其他库连接不上 错误:报表服务器无法打开与报表服务器数据库的连接.所有请求和处理都要求与数据库建立连接. 解决方案: ...

  7. 如何在 Xamarin 中快速集成 Android 版认证服务 - 邮箱地址篇

    Xamarin 作为微软提供的移动服务多系统开发平台,成为很多开发者首选的应用开发平台.AppGallery Connect(以下简称 AGC)也在逐步的支持 Xamarin 的 SDK.认证服务也是 ...

  8. 4、前端--浮动、定位、是否脱离文档流、溢出属性、z-index、透明度、JavaScript简介

    浮动 # ps:html代码时没有缩进一说的 全部写在一行也可以 """浮动主要就是用于页面布局的!!!""" # 浮动带来的负面影响 &q ...

  9. 我来教你如何用Docker部署最近火爆的人生重开模拟器

    文章目录 获取项目源码包 Dockerfile 构建docker镜像 启动docerk容器 访问liferestart 如果人生可以重来... <可惜没如果> github项目地址:htt ...

  10. Python基础（Day1）

    一.Python的简介  1.Python的诞生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为了在阿姆斯特丹打发 ...