关于vue mounted钩子里能不能获取dom的问题

大家都知道mounted声明周期是发生在dom挂载完成之后，所以理论上是可以获取到dom元素的

但是有一些特殊情况下，是没办法在mounted中直接获取到都dom元素的。
例如，dom是一个v-if判断展示与否的元素时，如果我们在mounted里使判断条件成立，那么此时打印这个dom元素会是undefined。
这个时候就需要使用异步 *** 作来获取。

如果itemTitle是用v-html指令进行绑定的，那你就要在this$nextTick函数中去获取你插入的input元素的dom对象，才能获取input的值。由于你是动态插入的html片段，是不具有vue的任何属性和方法的，只能通过原生js方法去 *** 作dom。

<video ref="videoEle" class="video_channel" width="100%" height="auto" :poster="list[0]img"> <source :src="list[0]video"> </video>
<script>
// ref就是获取Dom, 只是把这个元素获取以后帮到$refs对象里了
Vue$refs['video']play();
</script>

在vue的开发过程中，常常需要 *** 作表格元素，比如数据的分页呈现，某行数据的修改、删除等 *** 作，不可避免的需要 *** 作某行数据，本文描述了这一过程

首先，我们全局引入ant-design-vue，本文简称为antd，为蚂蚁金服推出的一款UI组件，在mainjs中添加即可。

下面我们使用antd的表格组件，在dom元素中定义表格相关属性及数据的来源信息等。

dataSource为数据的来源，格式为数组，我们通过ajax的方式请求后台获取数据。

列信息需要和返回对象的属性对应，如果有些列不是对象的属性，比如 *** 作列，可以通过增加scopedSlots的方式。

名称为action的插槽(slot)，需要在dom元素中进行设置，添加在a-table的子元素中。slot-scope="text,record"中的record就是这行的数据值。

我们通过F12进行调试，将record的信息进行打印，不难发现，record确实记录了这行的数据信息

在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误，
这时候可以在 mounted 里用 $refs 来获取样式，并进行更改：
<template>
<div style="display: block;" ref="abc">
<!-- -->
</div>
</template>
<script>
export default {
mounted () {
consolelog(this$refsabcstylecssText)
}
}
</script>
结果是 display: block;
如果我们给一个div设定全屏背景图，就需要获取屏幕高度进行赋值:
<template>
<div ref="nana">
<!-- -->
</div>
</template>
<script>export default {
mounted () {
let w = windowinnerWidth || documentdocumentElementclientWidth || documentbodyclientWidth;
let h = windowinnerHeight || documentdocumentElementclientHeight || documentbodyclientHeight;
this$refsnanastyleheight = h +'px';
}
}

首先
vue的点击事件
是用
@click
=
“clickfun()”
属性
在html中绑定的,
在点击的函数中
添加$event
参数就可以
比如
<button
@click
=
“clickfun($event)”>点击</button>
methods:
{
clickfun(e)
{
//
etarget
是你当前点击的元素
//
ecurrentTarget
是你绑定事件的元素
}
},
以上这篇vue
的点击事件获取当前点击的元素方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:vue如何获取点击事件源的方法VUE中v-on:click事件中获取当前dom元素的代码vue获取当前点击的元素并传值的实例vue获取dom元素注意事项在Vue组件中获取全局的点击事件方法

使用场景，牌匾文字上的公司名要根据字数多少自动变大变小，要先拿到文字内容
html：

<div class="head-h1" ref="company_name" >{{datascompany_name}}</div>
js：当页面刚加载完，通过接口获取{{datascompany_name}}的值，要对里面的值编辑时

this$refscompany_name  拿不到值
解决办法：

接口响应完，this$nextTick()方法里面 *** 作DOM，它才能接收到DOM更新的值

官方解释：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

this$nextTick(_=>{

        。。。。

            this$refs company_name

})

---