vue中关于dom的操作

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 ：当前组件已被删除，清空相关内容

　　

时间： 2024-10-11 03:36:08

vue中关于dom的操作的相关文章

javascript中的dom元素操作

javascript中的Dom事件操作 函数 函数就是将一些方法封装,通过调用执行函数. 作用: 避免重复代码. 简化编程,让编程模块化. 语法:fuction(){ } function是一个关键字,类似于Python中定义函数的"def": 小括号里放参数 大括号里放函数语句. 函数的调用 函数名+() 函数的参数 形参 实参 argument:只能在函数中使用. 返回实参的个数:argument.length 返回形参的个数:fn.length 伪数组 可以修改元素,但不能改变数

JavaEE笔记——JavaScript中对dom的操作

节点及其类型 在JavaScript中,节点分为三种: 元素节点:HTML标签元素. 属性节点: 元素的属性, 可以直接通过属性的方式来操作. 文本节点: 是元素节点的子节点, 其内容为文本. 在 html 文档的什么位置编写 js 代码? 一般地, 在 body 节点之前编写 js 代码, 但需要利用 window.onload 事件, 该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点 <head> <meta http-equiv="Cont

3. 数据双向绑定、ref获取vue中DOM节点

1. 数据的双向绑定 v-model 指令可以实现数据的双向绑定 2. ref获取vue中的DOM节点 注意:节点元素必须使用"ref" 定义一个唯一值,用于定位 原文地址:https://www.cnblogs.com/qfshini/p/12111009.html

详解Vue中的nextTick

Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一.示例 先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用. //模板 <div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1

vue中nextTick的理解

A. vue 中的 nextTick 是什么? 1.首先需要清楚,nextTick是一个函数:这个函数的作用,简单理解就是下一次渲染后才执行 nextTick 函数中的操作: 2.在下一次 DOM 更新循环结束之后延迟回调,也就是延迟执行一段代码. B. 什么情况下使用 nextTick 函数? 当项目数据改变后,需要对新改动的元素进行视图操作的时候,可能数据值已经进行修改,但是视图还没更新,直接操作报错的时候: C. nextTick函数解决什么问题? 数据值修改,视图没有立即更新,直接使用提

3-6 Vue中的条件渲染

本次案例讲解:v-if,v-show,v-else,v-else-if和key值的相关用法!!! v-if指令: //通过一个(v-if)指令 ,可以结合js表达式的返回值,决定一个标签是否在页面上展示或决定一个标签是否在页面上存在 //显示效果如下: v-if指令并不会显示div标签 (为了显示效果明显,特意在此页面中给div的父级设置了粉色背景颜色,便于看出页面的改变) //可以看到,调用v-if,设置为false后,div并不会显示出来. //当在控制台中,改变v-if的值为true后,d

在vue中操作DOM--this.$nextTick()

虽然 Vue.js 通常鼓励开发人员沿着"数据驱动"的方式思考,避免直接接触 DOM,但是有时我们确实要这么做.比如一个新闻滚动的列表项.如果在这里需要操作dom, 应该是等待 Vue 完成更新 DOM之后. 一.新闻滚动列表 1.在created函数中获取后台数据: 2.模板引擎中用v-for生成列表项: 3.调用滚动函数,假设该滚动函数式原声方法写的: 4.什么时候开始调用滚动函数比较合适呢? 二.this.$nextTick() 官方解释:将回调延迟到下次 DOM 更新循环之后执

图解vue中 v-for 的 :key 的作用，虚拟dom Diff算法

其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了. 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设: 1.两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构. 2.同一层级的一组节点,他们

Vue源码学习(六)之虚拟DOM——Vue中的DOM-Diff （上）

1. 前言 在上一篇文章介绍VNode的时候我们说了,VNode最大的用途就是在数据变化前后生成真实DOM对应的虚拟DOM节点,然后就可以对比新旧两份VNode,找出差异所在,然后更新有差异的DOM节点,最终达到以最少操作真实DOM更新视图的目的.而对比新旧两份VNode并找出差异的过程就是所谓的DOM-Diff过程.DOM-Diff算法时整个虚拟DOM的核心所在,那么接下来,我们就以源码出发,深入研究一下Vue中的DOM-Diff过程是怎样的. 2. patch 在Vue中,把 DOM-Dif