mouted vue 操作dom_vue中关于dom的操作

最新推荐文章于 2024-01-23 22:05:32 发布
最新推荐文章于 2024-01-23 22:05:32 发布
阅读量162 收藏
点赞数
文章标签： mouted vue 操作dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39779537/article/details/111777915
版权

mounted

个人理解为DOM结构准备就绪了，可以开始加载vue数据了，

挂载点，配合使用

mounted:function(){

this.$nextTick(function(){ //this.$nextTick是在下次DOM更新循环结束时调用延迟回调函数。异步函数

this.loadData();　　　　　　　　　　//DOM加载就绪，后调用loadData方法进行数据更新

//想要更新后的获取dom　　　　　　　　　　　　　　//此时若获取更新后dom数据将会报错，数据为undefined；

})

}

此时，若想要获取更新后的dom结构，并操作dom，必须在下一个钩子函数中获取，否则将会报错，获取不到

updated

数据更新导致的dom结构更新，在更新完之后会调用这个钩子

在此时获取上一步中更新的数据，就可以成功获取到。

引用插件的方法，在mounted钩子中加载数据，在updated钩子引用处理这个数据的插件。

beforecreate : 举个栗子：可以在这加个loading事件

created ：在这结束loading，还做一些初始化，实现函数自执行

mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情

updated: 在这里处理更新后的数据

beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容

weixin_39779537
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue生命周期
JOKEthel的博客
12-17 476
vue生命周期 beforeCreate 在这个钩子函数里只是刚开始初始化实例，拿不到实例里的任何东西，比如data和methods和事件监听等。 data: { msg: 'Ethel' }, methods: { getLists(){ return 'beauty' } }, beforeCreate() { console.log('beforeCreate',this.msg,this.getLists()) } 运行结果会报错 created 在实例创建完成后立即调用
VUE DOM加载后执行自定义事件的方法
10-18
今天小编就为大家分享一篇VUE DOM加载后执行自定义事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue实例中生命周期created和mounted的区别详解
12-01
前言 本文主要跟大家介绍了关于Vue实例中生命周期created和mounted区别的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。 在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。 再上图，
vue操作dom元素的三种方法介绍和分析
热门推荐
一只前端小菜鸟
03-07 8万+
相信大家在做项目的时候，肯定会遇到这样的问题：我点击新增按钮，需要弹出个弹框，然后我点击对应的关闭按钮，关闭弹框，但是新增按钮和关闭按钮操作的是另一个元素，所以需要获取dom元素进行操控，那么在vue中怎么操作dom呢？ 以下是常用的三种方法： 1、jQuery操作dom（推荐指数：★☆☆☆☆）： 只要拿jQuery的选择器，选中相应的dom进行操作就可以了，但是大家都知道jQuery获取元...
【vue】vue 如何获取并操作DOM元素
Java_gaohao的博客
01-26 1万+
vue 如何获取并操作DOM元素
Vue2 操作dom的时机在于mounted钩子中
最新发布
知远同学的博客
01-23 444
【代码】Vue2 操作dom的时机在于mounted钩子中。
Vue.js踩坑日记 —— 关于在Mounted生命周期函数中操作DOM元素
Marinda_Speed的博客
03-30 2165
Vue.js踩坑日记 —— 关于在Mounted生命周期函数中操作DOM元素前言代码温馨提示结束语 前言 在最近开发Vue项目时想在mounted生命周期函数中操作DOM元素，但是在自我尝试下无果，次次操作进行参数结果为：undefined ，然后根据网上内容与自我尝试，特此写下该文章解惑于各位。 代码 补充：我的功能需求为在数据加载结束后，根据type字段进行相应的Class类名操作 DOM: <!-- 优惠券内容区域 --> <div class=
[Vue] mounted阶段获取不到dom的原因及解决方法
老电影故事的博客
05-09 9158
问题描述 需要在dom渲染后，获取dom来进行页面自动滚动到需要的位置。 在mounted阶段用document.querySelector()以及this.$refs获取元素均获取不到。用两种方式获取元素，打印出来的结果都是undefined。 有解答说用this.nextTick(function(){…})，试了一下在我这个场景中，结果还是undefined 分析原因 在mounted阶段，若需要获取的元素或组件有v-if，v-for属性。 v-if的初始化结果为false。v-for遍历的数组初始化
vue 在mounted里操作DOM
weixin_45842460的博客
07-14 6851
this.$nextTick <template> <div class="hello"> <div> <button id="firstBtn" ref="aa">{{testMsg}}</button> </div> </div> </template> <script> export default { name: "HelloWorld", da
vue中操作dom
imkaifan的博客
04-15 1555
在vue中操作dom，要在mounted中使用，因为只有在执行mounted的时候，vue已经渲染了dom节点，这个时候是可以获取dom节点的，vue中尽量不去操作dom元素，选用ref操作属性获取 首先设置ref=“xxx” 然后等所有的dom加载完毕之后，使用this.$ref.btn来进行操作 <button ref="btn">获取ref</button> this.$refs.btn.style.backgroundColor="#ff0000" ...
created mounted 动态获取数据渲染后，获取DOM问题
weixin_34224941的博客
07-19 3005
口水记录一个问题。 ┓(;´_｀)┏ 写代码的时候，遇到一个问题，就是在created里面调用接口获取数据，利用v-for渲染DOM后，再在mounted里面调用渲染后的DOM时，一直无法获取到，显示为undefined。 按照VUE的生命周期来说 created 组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在。 mounted模板编译/挂载之后。 按道理，在moun...
解决vue项目F5刷新mounted里的函数不执行问题
12-13
在主文件index.vue中初始化页面相关的操作， 在mounted中放置用户权限判断并更新store中的权限值，当点击相应组件时mounted可正常工作， 但是在用户手动刷新时mounted内的函数并未执行，导致相应组件未获取到权限而...
vue 页面回退mounted函数不执行的解决方案
10-15
主要介绍了vue 页面回退mounted函数不执行的解决方案 ，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue(定时器)解决mounted不能获取到data中的数据问题
11-19
vue中data定义 data() { return { isok:10, } } 在vue中使用定时器 如下 mounted是钩子函数 mounted(){ console.log(this.isok) //能获取isok 10 setInterval(function(){ console.log(this.isok) //不能...
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
11-20
1、在Vue项目中引用公共方法 作为一个新人小白，在使用vue的过程中，难免会遇到很多的问题，比如某个方法在很多组件中都能用的上，如果在每个组件上都去引用一次的话，会比较麻烦，增加代码量。怎么做比较好呢，话不...
vue中如何操作DOM（简单明了）
yc2318249775的博客
01-22 773
在 Vue.js 中，获取 DOM 的最佳时机通常是在组件的生命周期钩子中，特别是在 mounted 钩子中。因为在 mounted 钩子中，Vue 实例已经被挂载到 DOM 中，所以你可以安全地访问和操作 DOM 元素。
vue---vue中如何操作dom获取节点？.vue组件中通过mounted获取节点操作
Wbiokr的博客
09-02 5万+
选择器获取 <template> <div> <canvas id='cvs' > </div> </template> <script> export default{ mounted(){ let canvas=document.querySelector('#cvs'); } } </scr
vue mounted 内找不到dom
前台技术
11-02 5890
vue生命周期   mounted () {   }, 如果生命周期还是不好用，在语句外套用this.$nextTick方法 this.$nextTick(function () {   this.x= document.getElementsByClassName('x')[0] })
vue切换菜单mouted没渲染
05-05
可能是因为 `mounted` 钩子函数在组件切换时不会被触发。你可以尝试使用 `activated` 钩子函数，它会在组件被激活时被触发，可以尝试在该钩子函数中触发菜单的渲染。另外，你也可以使用 `watch` 监听路由的变化，在路由变化时触发菜单的渲染。以下是使用 `activated` 钩子函数的示例代码： ```javascript export default { data() { return { menuList: [] } }, activated() { // 在组件被激活时触发渲染菜单 this.renderMenu() }, methods: { renderMenu() { // 渲染菜单的代码 } } } ``` 如果你想使用 `watch` 监听路由变化，则可以使用以下代码： ```javascript export default { data() { return { menuList: [] } }, watch: { $route() { // 在路由变化时触发渲染菜单 this.renderMenu() } }, methods: { renderMenu() { // 渲染菜单的代码 } } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值