[前端] VUE基础 (7) (获取原生DOM)

一、获取原生DOM

我们之前在vue中获取原生的DOM，都是利用document来获取的，不是很方便。

vue为我们提供了ref属性，来方便的获取标签。

<div ref=‘div1‘></div>
<p ref=‘p1‘></p>
<Home ref=‘home1‘></Home>

获取标签：

this.$refs.div1 //获取ref为‘div1‘的<div>标签
this.$refs.p1 //获取ref为‘p1‘的<p>标签
this.$refs.home1 //获取ref为‘home1‘的组件对象

但是在使用从this.$refs中获取对象的时候，注意声明周期的问题，获取的时候标签是否已经被渲染，如果还未被渲染则会报错。例如想获取的标签是子组件的标签，而这个子组件要点击某个按钮才能被渲染到页面上，如果我们未点击按钮就在父组件去使用this.$refs获取，则会报错。

原文地址：https://www.cnblogs.com/leokale-zz/p/12285991.html

时间： 2024-10-11 11:56:49

[前端] VUE基础 (7) (获取原生DOM)的相关文章

vue 点击获取当前DOM元素

哈哈哈,昨天登QQ的时候,意外发现有人看了我写的博客,居然还加了我,这就激起了我内心的小波澜啊公司最近在做电商,用的前端框架依然是VUE 矩MAX(微信公众号)可以搜的到哦,貌似小苹果的AppStore也可以搜的到,不过应该是内测版回归中体哈,说一下今天做的领券中心有点类似于京东的领券中心,刚测试完,券全被我领啦效果就是点击立即领取,文字变为立即使用.弹出领取成功但是因为接口不是实时的,所以我没有通过接口数据判断让用户点击领取的同时,让优惠券改变状态但是,毛爷爷说过:办法总比困难多~

[前端] VUE基础 (5) (过滤器)

一.过滤器过滤器分为局部过滤器和全局过滤器. 1.局部过滤器 <body> <div id="app"> </div> <script src="./static/vue.js"></script> <script> // 定义App let App = { data() { return { msg: 'Hello World' } }, // 使用msg的时候,使用管道符号传递给filte

[前端] VUE基础 (6) (v-router插件)

一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页签,我们选择页签显示不同的内容,但页面不跳转. 例如: 在网易云音乐的主页中,发现音乐.我的音乐.朋友这三个页签就是单页面应用.当我们切换他们时,可以观察到url的变化: 这里看到的url改变(路由改变)的路由是vue-router提供的,而不是对应django的路由系统(前后端分离的项目,djan

Vue 操作原生Dom refs

获取原生DOM 给标签或组件添加ref属性 <div ref='alex'></div> <p ref='a'></p> <Home ref='b'></Home> this.$refs.alex // 获取原生的Dom对象 this.$refs.b // 获取的是组件的实例化对象 refs属性集合 console.log(this.$refs.input); // 获取原生DOM // 返回值 <input type=&qu

原生DOM探究 -- NodeList v.s. HTMLCollection

涉及获取元素的主要API 在获取原生DOM元素的时候,主要涉及这几个DOM API(链接为Living Standard): Node及对应集合NodeList Element(继承Node)及对应集合HTMLCollection Document(继承Node) 注:计划取代NodeList和HTMLCollection的Elements目前并无广泛实现基础知识 -- NodeList v.s. HTMLCollection 在不同版本的浏览器中,如果使用获取多元素的DOM方法,有的会得到N

【转】原生DOM探究 -- NodeList v.s. HTMLCollection

原文链接:http://www.cnblogs.com/joyeecheung/p/4067927.html 涉及获取元素的主要API 在获取原生DOM元素的时候,主要涉及这几个DOM API(链接为Living Standard): Node及对应集合NodeList Element(继承Node)及对应集合HTMLCollection Document(继承Node) 注:计划取代NodeList和HTMLCollection的Elements目前并无广泛实现基础知识 -- NodeLis

Vue自定义指令获取DOM元素

我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export default { data(){ return{ msg : 'oldMsg' } } methods : { changeMsg : function(){ this.msg = 'newMsg' } } } 当调用了changeMsg方法,msg被修改为 ' newMsg ' ,我们可以把这次修改理解为数据

前端基础之BOM和DOM：

目录前端基础之BOM和DOM 前言 window对象 BOM与DOM操作 DOM学习流程一些常用的Window方法: window的子对象 navigator对象(了解即可) screen对象(了解即可) history对象(了解即可) location对象弹出框计时相关 DOM HTML DOM 树查找标签直接查找间接查找节点操作创建节点添加节点删除节点: 替换节点: 获取值操作对类属性操作 class的操作指定CSS操作事件常用事件绑定方式: window.o

用原生dom的方法获取class对象(很简单实用)

话不多说,直接上代码,用的是for(var i in array) 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>用原生dom的方法获取class对象(很简单实用)</title> 6 <style> 7 .ca{background:red;padding:20px;} 8 .js{border:1px so