精华内容
下载资源
问答
  • vue获取dom高度
    万次阅读
    2019-02-11 10:57:23
    //获取高度值
    var height= this.$refs.text.offsetHeight; //100
    
    
    //获取元素样式值,element 为元素ref="element"
    var heightCss = window.getComputedStyle(this.$refs.element).height; // 100px
    
    
    //获取元素内联样式值
    var heightStyle =this.$refs.element.style.height; // 100px

     

    更多相关内容
  • 详解在Vue中通过自定义指令获取dom元素2018-12-31编程之家收集整理的这篇文章主要介绍了详解在Vue中通过自定义指令获取dom元素,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。vue.js 是数据绑定的...

    详解在Vue中通过自定义指令获取dom元素

    2018-12-31

    编程之家收集整理的这篇文章主要介绍了详解在Vue中通过自定义指令获取dom元素,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

    vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的;

    在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个组件 (component),然后通过 this.$el 去获取,但是在一些很小的项目里,在一些没有使用 webpack 等构建工具的项目中,创建一个组件并不是那么值得,所以 vue 提供了另一种操作DOM元素的方式,就是自定义指令 (directive) ;

    自定义指令功能在DOM Element的生命周期内提供了不同的钩子函数,并允许我们监听指令绑定的数据的变化,但是它也是有缺点的,就是在指令的钩子函数内无法通过this来访问当前 vue 实例,也就无法进一步进行复杂的操作(虽然一般不需要什么复杂的操作),在 vue 的钩子函数 (lifecycle hook) 和方法 (method) 中也无法像this.$el那样轻易的访问到自定义指令绑定的DOM元素;

    不过只要通过一点点变通的做法,就可以突破这个限制:

    JavaScript代码:

    {

    this.elements[flag] = el;

    }

    }

    },beforeMount () {

    console.log(this.elements.test1); //=> undefined

    },mounted () {

    console.log(this.elements.test1); //=> the span DOM Element

    console.log(this.elements.test2); //=> the p DOM Element

    }

    })

    如代码所示,建立一个名为run的自定义指令,运行绑定的方法,并将当前 DOM Element 作为参数传入;

    同时建立一个名为register的方法,接收一个 flag 参数,并根据这个参数返回一个用于将传入参数注册到this.elements对象中的闭包函数;

    将写好的 run 指令和 register 方法搭配使用,就可以把想要的 DOM 注册进this.elements,并在 hook 或者 method 中十分方便的访问;

    注意:自定义指令将会在DOM元素插入 Document 时,也就是组件 mount 时首次执行,所以在此之前,比如beforeMount钩子中是无法使用的,这点也和this.$el 一致,详情可以查看官方文档中的生命周期图示;

    其实也很好理解啦……在 mount 之前,根本就没有这个实际的 DOM 元素,怎么可能访问的到……(:з)∠)

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    总结

    如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

    如您喜欢交流学习经验,点击链接加入交流1群:1065694478(已满)交流2群:163560250

    展开全文
  • vue-虚拟dom

    2020-12-20 12:00:57
    要明白diff算法,还是要从dom说起。dom什么是dom?全称:Document Object Model(文档对象模型)是网页用来表示文档中对象的标准模型,是针对HTML和XML的API。浏览器生成DOM过程浏览器的主要组件?用户界面:UI布局,...

    要明白diff算法,还是要从dom说起。

    dom

    什么是dom?

    全称:Document Object Model(文档对象模型)

    是网页用来表示文档中对象的标准模型,是针对HTML和XML的API。

    浏览器生成DOM过程

    浏览器的主要组件?

    用户界面:UI布局,比如地址栏前后退,收藏夹

    浏览器引擎:在用户界面和渲染引擎之间传递指令,同时操作数据存储

    渲染引擎:主要负责将请求的布局文件、样式文件进行解析渲染,呈现出web页面。

    网络:进行HTTP请求调用。

    js解释器:负责解析并执行JavaScript语言。

    从输入一个url到返回页面的过程发生了什么?

    HTTP过程:

    1.在地址栏输入URL,浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有,进行下一步

    2.浏览器对输入的URL进行域名解析,获取相应的IP地址

    3.浏览器向URL所在的服务器发起tcp请求,建立三次握手

    4.握手成功后,浏览器向服务器发送HTTP请求,请求数据

    5.服务器响应请求,将数据返回至浏览器。

    6.浏览器收到响应,解析html,渲染页面

    浏览器渲染过程:

    1.构建dom树:浏览器会把获取到的html文档解析成一个dom树,html中的每个标签都是dom树的节点。(DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等)

    2.构建cssom树:浏览器会把所有样式解析成样式结构体。(在解析的过程中会去掉浏览器不能识别的样式,比如IE会去掉-moz开头的样式,而FF会去掉_开头的样式)

    3.将 DOM 与 CSSOM 合并成一个渲染树。

    render tree类似于DOM tree,但区别很大,render tree能识别样式,render tree中每个节点都有自己的样式,而且 render tree不包含隐藏的节点 (比如display:none的节点,还有head节点)因为这些节点不会用于呈现,而且不会影响呈现的,所以就不会包含到 render tree中。注意 visibility:hidden隐藏的元素还是会包含到 render tree中的,因为visibility:hidden 会影响布局,会占有空间。根据CSS2的标准,render tree中的每个节点都称为Box ,理解页面元素为一个具有填充、边距、边框和位置的盒子。

    4.布局:浏览器开始布局,为每个渲染树的节点确定一个在显示屏上出现的精确坐标。

    5.绘制:Render树和节点显示坐标都有了,就调用每个节点paint方法,把它们绘制出来。

    html的解析,遵循以下规则:1.按顺序解析,从上到下。2.link标签的加载阻塞后续代码执行,但不影响外部文件(link,script,可以同时加载。)3.添加async属性的script,异步加载,不会被阻塞,但可能读取dom节点失败

    引申提问:

    什么是回流?什么是重绘?

    回流(重排 reflow):当修改DOM或修改元素的形状大小,浏览器部分或者全部重新渲染的过程。

    重绘(repaint):修改dom元素的样式,浏览器不需要重新计算元素的几何属性,直接可以为该元素绘制新的样式,这个过程叫重绘。

    哪些事件导致重排(回流)?

    添加或删除可见的dom元素

    元素的位置发生变化

    元素的尺寸发生变化

    内容改变(比如文本或者图片改变引起高度宽度重新计算)

    缩放浏览器窗口,浏览器窗口尺寸改变。

    HTML页面首次初始化呈现。

    最复杂的一种:获取某些属性,引发回流

    如何避免重排(回流)?

    避免频繁操作dom

    避免使用table布局

    让元素脱离文档流,减少渲染树的规模

    尽可能的使用className

    虚拟dom

    什么是虚拟dom?

    虚拟dom就是将真实的节点dom用js模拟出来。

    为什么要使用虚拟dom?

    首先,一个dom节点是很庞大的,它有很多属性,每次操作dom是一个相当耗时的过程。

    第二,当更新一个dom节点的时候,很有可能会触发回流操作,导致浏览器会重新渲染部分或全部文档。

    (打个比方,你有一个PPT,老板要你改几个字,你会重新去写一份PPT么?)

    第三,当对多个dom进行更新的时候,每一次都要重新计算dom节点的坐标信息,会造成性能的浪费。

    而虚拟dom就很好的解决了上述问题,当我们执行更新大量节点的操作时,可以通过虚拟dom找出最小的变化,然后再把这些改动写入实际的dom中,虚拟dom减少了实际操作dom的次数,有利于性能提升。

    vue2中的diff算法是怎样实现的?

    什么是diff算法?

    Vue通过编译将模板转换AST,之后将AST转换成渲染函数,执行渲染函数可以得到一个虚拟节点树(vnode),再拿新生成的虚拟节点树去和旧的虚拟节点树(oldVnode)对比,找出更新部分节点,最后做渲染。

    vnode与oldVnode对比的过程,也就是常说的diff算法。

    diff算法

    展开全文
  • vue隐藏和限制div或其他html元素

    千次阅读 2020-12-20 12:00:53
    Vue隐藏和限制Div或其他html元素...完整实例代码如下:显示和隐藏联系通过Vue隐藏和显示Div{{message}}欢迎关注微信公众号:程序新视界显示/隐藏(v-if)显示/隐藏(v-show)var app = new Vue({el: "#app",data: ...

    在Vue中隐藏和限制Div或其他html元素操作非常简单。通常有两种方法可以实现:v-if和v-show这两个判断属性。

    下面通过一个简单的实例来了解一下这两种方式的实现。完整实例代码如下:

    显示和隐藏

    联系通过Vue隐藏和显示Div

    {{message}}
    欢迎关注微信公众号:程序新视界

    显示/隐藏(v-if)

    显示/隐藏(v-show)

    var app = new Vue({

    el: "#app",

    data: {

    isShow: true,

    isTrue: true,

    message: 'Hello Vue!'

    },

    methods: {

    showOrHideMsg: function () {

    // 取反

    this.isShow = !this.isShow;

    },

    showOrHide: function () {

    // 取反

    this.isTrue = !this.isTrue;

    }

    }

    })

    首先在上面的代码中通过CDN引入了vue.js。通过el指定的vue监控的范围。其中在id为app的div中实现了两种方式的展示v-if=”isShow”和v-show=”isTrue”,他们的用法基本一样。

    下面的js脚本中对vue进行初始化,默认这两个div都是显示的。因为isShow和isTrue都默认为true。

    然后定义了两个按钮,并对两个按钮进行事件绑定,两个方法的实现都是对默认的布尔类型取反并赋值给自身。

    此时,通过点击两个按钮,就可以循环的显示和隐藏div元素。

    那么通过这两种方式显示和隐藏Div元素有什么不同么?

    v-if以删除或添加dom结点控制元素的显示隐藏

    v-show是通过添加样式display:none控制元素的显示隐藏

    如果html要操作的内容比较多,相对于删除和创建dom会比较损耗性能,因此可考虑使用v-show来进行操作。当少量不频繁的操作可考虑使用v-if来进行操作。

    关注公众号:程序新视界,一个让你软实力、硬技术同步提升的平台

    除非注明,否则均为程序新视界原创文章,转载必须以链接形式标明本文链接

    展开全文
  • Vue获取DOM元素样式 && 样式更改

    千次阅读 2020-12-22 16:03:06
    vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改:export default {mounted () {console.log(this....
  • Vue事件以及获取dom元素

    千次阅读 2019-11-07 22:30:26
    事件对象和事件修饰符 ... Vue 事件 以及获取dom元素(虚拟) v-on:事件类型 简写@事件类型 v-once 一次性数据绑定 changes 执行的方法可以不带括号 若方法有参数 --> <b...
  • 1、获取Element的弹框中的Dom元素 **由于弹框由v-if控制,在初始页面... 首先,由于弹框是由v-if判断,则可以在watch中监听v-if所对应的变量,在为true时,则弹框打开,此时去获取DOM元素,发现仍然获取不到。。。...
  • 问 题isShow默认是false,也就是点击的时候才会显示,但是这样的话显示后就没法获取dom了,有好的办法吗?或者说我把v-if改成v-show,但是这样的话v-focus就没效了,有没有办法点击的时候手动获取一下焦点v-model='i...
  • vue使用refs获取dom获取不到问题

    千次阅读 2021-04-15 09:32:16
    之前在公司做项目,一直感觉用ref来定位dom节点挺方便的。但是期间遇到了一个问题,就是在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined? 于是我就对比了一下之前使用ref定位的.vue文件,发现了...
  • vue使用refs获取dom时的注意点

    千次阅读 2019-08-24 17:35:24
    vue中使用refs定位dom出现undefined?  之前在公司做项目,一直感觉用ref来定位dom节点挺方便的。但是期间遇到了一个问题,就是在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined?  于是我就...
  • Vue2.(获取 DOM 元素或组件的引用:$ref,mixin.js混合配置,自定义插件)
  • vue 生成 dom组件 虚拟虚拟表 (vue-virtual-table) Vue table component with virtual dom and easy api. 具有虚拟dom和简单api的Vue表组件。 Keep smooth when the data reachs thousands of rows or even more. ...
  • 众所周知在vue2中,ref主要的作用还是便于快速的获取dom元素或组件,因为ref操作相比document.getElementbyId会减少dom操作的节点消耗。 具体关于vue2中ref和$refs的使用,这篇文章写的十分全面: ...
  • vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如下...
  • Vue获取DOM,数据监听,组件,混合和插槽 注:“:” 是指令 “v-bind”的缩写,“@”是指令“v-on”的缩写;“.”是修饰符。 Vue获取DOM 给标签加ref属性:ref=“my_box” 获取:this.$refs.my_box; <!DOCTYPE ...
  • e.currentTarget.parentElement // 获得点击元素的前一个元素的第一个子元素的HTML值 e.currentTarget.previousElementSibling.firstElementChild.innerHTML 比如获取当前点击的父亲节点的兄弟节点,改变他的css样式...
  • //获取dom 宽度 var height = shareContent.offsetHeight; //获取dom 高度 var canvas = document.createElement("canvas"); //创建一个canvas节点 var scale = 2; //定义任意放大倍数 支持小数 canvas.width = ...
  • 在使用elementUI table组件时,...就遇到了在mounted周期内,通过document.getElementsByClassName()或document.querySelector()获取元素节点,通过console.log()输出是能看到有数据的,但是document.getElementsBy
  • vue中已经不像jq那样直接操作dom了,如果要指向当前选中项时,就不能再用jq的思路来做了,方法如下: 当指向一个状态的时候,只让指向的状态隐藏,其他项不变,如果项目中用了element-ui,那么操作起来会比较简单...
  • dom-to-image是一个可以将任意DOM节点转换为用JavaScript编写的矢量(SVG)或光栅(PNG或JPEG)图像的库。 它基于Paul Bakaus的domvas并且已被完全重写,修复了一些错误并添加了一些新功能(如Web字体和图像支持)。...
  • //如果需要合成按钮操作的话,如果是vue中想要页面出现就获取就要在create中调用 实现:写法—注意这是没有合成按钮操作的,如果需要,可以通过传值这是直接将某页面的缩略图显示在某一个页面的角落 toImage() { /...
  • 但是模态框设置初始是不显示的,然后我在模态框组件里面的mouted里面拿到dom元素,按理来说mouted都已经加载完元素了,但是我不管是通过document.getElementById还是ref拿值都是拿取不到,甚至还用了this.$nextTick ...
  • vue子组件mounted中无法获取dom

    千次阅读 2019-07-18 09:24:37
    原因:子组件代码中用了v-if,所以为变量为false时的部分dom还未渲染当然获取不到,将v-if改为v-show,则可以获取的到dom, 因为v-show会渲染dom,只是控制display的显隐, ...
  •  this.$refs.xxx.$el获取dom 注意1:大多数情况下为了复用方法,将xxx传给对应的方法处理  如element ui的upload,选择图片后将添加按钮隐藏     注意2:若参数作为某个属性或者方法使用,将其放在[]里...
  • 监听DOM元素大小的变化,在前端开发中,算是一个比较常见的需求,比如我们要制作可伸缩的图表的时候,可能需要根据DOM大小的变化,进行动态的更新图表。 解决方案 方法一: 监听window变化,再改变对应DOM变化 ...
  • 老规矩 先放链接致敬作者 ...vue核心之虚拟DOM(vdom) 深入 React 之 diff 算法 虚拟dom 真实DOM操作: document.get…查询的是整个节点树。 ParentNode.querySelector()和ParentNode.querySelector
  • 当代码需要延迟到dom从新渲染之后执行时使用 组件的.$nextTick(回调...为什么不能写到updata中(因为点击后会执行一次获取焦点,当输入框失去焦点的时候,又要获取一次焦点,此时输入框已经隐藏) 此处不能使用 th

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,868
精华内容 5,147
热门标签
关键字:

vue获取dom隐藏