精华内容
下载资源
问答
  • vue获取dom节点

    2020-10-28 17:51:45
    Vue获取dom节点时有时候获取到时undefined,因为是异步的,在我们更新数据时,组件不会立即重新渲染,而是在刷新队列时才进行渲染。解决办法是给延时器。

    Vue在获取dom节点时有时候获取到时undefined,因为是异步的,在我们更新数据时,组件不会立即重新渲染,而是在刷新队列时才进行渲染。解决办法是给延时器。

    展开全文
  • VUE获取DOM节点的方法

    千次阅读 2020-08-29 14:39:48
    vue获取DOM节点vue项目中,获取dom节点可以用ref属性,这个属性就是来获取dom对象的。 这个属性就相当于给这个标签起了一个类似于id的东西。 <template> <div class="contaier" ref="box" style="width...

    vue获取DOM节点

    在vue项目中,获取dom节点可以用ref属性,这个属性就是来获取dom对象的。 这个属性就相当于给这个标签起了一个类似于id的东西。

    <template>
        <div class="contaier" ref="box" style="width: 100px;height: 100px;">
            这里用来测试元素的ref属性
        </div>
        <button type="button" @click="showData()">点击</button>
    </template>
    
    <script>
        export default {
            methods: {
                showData() {
                    console.log(this.$refs.box);
                    console.log(this.$refs.box.style);
                }
            }
        }
    </script>
    

    显示的结果为:

    1. <div class="container" style="height: 100px; width: 100px;"></div>
      说明:这里获取的是元素本身
    2. 这里获取到了元素的style属性的值在这里插入图片描述
      综上:我们在vue中需要操作某一个元素的时候,可以在元素上添加ref属性,使用$refs来获取到该元素,进而进行一些列操作。
    展开全文
  • 2.使用this.refs[′name′]或this.refs['name'] 或 this.refs[′name′]或this.refs.name,即可获取dom节点 this.$refs['div'] 3.获取dom的位置 getBoundingClientRect()可以打印出dom 的位置宽高等信息 this.$refs['...

    vue 获取dom

    1.使用res
    <div class="cover" ref="div"></div>
    2.使用this. r e f s [ ′ n a m e ′ ] 或 t h i s . refs['name'] 或 this. refs[name]this.refs.name,即可获取dom节点
    this.$refs['div']
    3.获取dom的位置 getBoundingClientRect()可以打印出dom 的位置宽高等信息
    this.$refs['div'].getBoundingClientRect()
    4.offsetHeight与offsetWidth可以单独获取w与h

    展开全文
  • 在这篇博文之前,我们已经开了一个vue的头了,需要的小伙伴可以点击这个链接:Vue的基础认知一—构建环境/v指令的使用,好了,我们继续来看我们接下来要看的内容。 一、vue的双向绑定 mvvm框架: m:module v...

    在这篇博文之前,我们已经开了一个vue的头了,需要的小伙伴可以点击这个链接:Vue的基础认知一—构建环境/v指令的使用,好了,我们继续来看我们接下来要看的内容。

    一、vue的双向绑定

    mvvm框架:
    m:module
    v:view
    vm:viewModule

    简单来说,就是我们在input框中输入什么,后面就显示什么,当然了,我们也可以对输入的内容进行一系列的计算属性的操作再进行展示出来。这里用到的v指令是v-model。
    现在我们先来看一个简单的双向绑定的例子:

    <div id="app">
        <input type="text" v-model="mytext">{{mytext}}<br/>
        <input type="text" v-model.lazy="mytext">{{mytext}}<br/>
        <input type="text" v-model.number="mytext1">{{mytext1}}<br/>
        <input type="text" v-model.trim="mytext">{{mytext}}
    </div>
    
    new vue({
        el:"#app",
            data:{
                mytext:"",
                mytext1:1,
            },
    })

    这里需要解释的就是v-model的修饰符:
    不加修饰符的会边输入边改变后面的显示内容;
    加lazy修饰符的,会当输入框失焦的时候才改变后面的显示内容;
    加number修饰符的,则只展示数字内容,其他的不予展示;
    加trim修饰符的,会自动删除掉输入内容的空格内容。

    刚才一开始我们就说了,可是对我们要展示的数据进行操作后再进行展示,这里说的就是计算属性computed,不知道小伙伴们注意到了没,vue中用到的属性定义在data中,方法定义在methods中,这里的计算属性需要定义在computed中。
    例子:把输入的内容,反转后展示在后面

    <div id="app">
        <input type="text" v-model="reverseStr">{{ myreverseStr }}
    </div>
    
    new vue({
        el:"#app",
        data:{
            reverseStr:"",
        },
        computed:{
            myreverseStr:function () {
               return  this.reverseStr.split("").reverse().join("")
            },
         }
    })

    经过这样的处理,我们就达到了展示的内容和输入的内容是相反的目的。

    二、vue获取DOM节点

    在vue中获取DOM节点的方法是ref,具体看下述例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue</title>
    </head>
    <body>
    <div id="app">
        <div id="mydiv" ref="myel">
            我的div
        </div>
        <!--事件触发-->
        <button @click="myfn">点击获取节点</button>
    </div>
    </body>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            },
            methods:{
                myfn:function(){
                    //注意点在这里哦!
                    var el = this.$refs.myel;
                    console.log(el);
                },
            },
        })
    </script>
    </html>

    这里写图片描述

    看完上述这个例子,我们再来看一个例子,看看获取input框的内容应该怎么获取。
    其实很简单,绑定数据信息,触发事件去获取就好了:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue</title>
    </head>
    <body>
    <div id="app">
        姓名:<input type="text" v-model="users.username"><br>
        性别:男 <input type="radio" value="男" name="sex" v-model="users.sex"><input type="radio" value="女" name="sex" v-model="users.sex"><br>
        爱好:<input type="checkbox" value="篮球" v-model="users.hobby">篮球
        <input type="checkbox" value="唱歌" v-model="users.hobby">唱歌
        <input type="checkbox" value="看书" v-model="users.hobby">看书<br>
        城市:<select name="" id="" v-model="users.city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
    </select><br>
        <button @click="sub">点击查看</button>
    </div>
    </body>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                users:{
                    username:"",
                    sex:"",
                    hobby:[],
                    city:"北京",
                }
            },
            methods:{
                sub:function(){
                    console.log(this.users);
                }
            },
        })
    </script>
    </html>

    这里写图片描述
    啦啦啦~这样就获取到了哟,呼呼,好的,vue的基础认知部分我们就认识到这样,从下一篇博文中我们就开始真正的使用vue咯,好的小伙伴们晚安,情人节快乐,哈哈哈。

    展开全文
  • [vue] vue怎么获取DOM节点? 1、document.getElementById("id") 2、this.$refs.xx 还有一些特殊的,比如this.$root、this.$parent、this.$children 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很...
  • vue获取dom节点 Vue-stickto (vue-stickto) A vue directive that support multiple DOM Node stick to top automatically. 支持多个DOM节点vue指令会自动粘贴到顶部。 View demo 查看演示 Download Source ...
  • vue-获取dom节点

    2018-12-01 18:03:00
    获取dom节点可以用ref属性,这个属性就是来获取dom对象的。看代码 这个属性就相当于给这个标签起了一个id样的东西 <input type="text" ref="userinfo" /> //获取ref定义的dom节点 console.log(this.$...
  • vue获取原始dom节点

    千次阅读 2018-06-13 12:25:17
    需求:需要获取dom节点,但是不能使用id获取dom元素。 vue里提供了ref属性获取dom节点。 在nextTick函数回调后就可以更新dom了 this.$nextTick(function(){ this.$refs.list })...
  • Vue渲染DOM节点

    千次阅读 2019-05-17 09:07:33
    Vue实例挂载的最后一个环节:渲染DOM节点。在渲染真实DOM的过程中,Vue引进了虚拟DOM的概念,虚拟DOM作为JS对象和真实DOM中间的一个缓冲存,极大的优化了JS频繁操作DOM的性能问题 浏览器的渲染流程 当浏览器接收到...
  • vue获取真实dom节点

    2020-09-15 16:06:49
    获取真实dom节点 1.命名 2.获取 this.$refs.ipt Son 组件 <template> <div id="son"> <h1>{{title}}</h1> <p>我的名字叫{{name}}</p> <input type="text" ref="inp"/...
  • Vue虚拟Dom节点、VDOM渲染流程、diff算法、JSX,Vue中为什么要是用jsx
  • vue 删除 dom节点

    千次阅读 2021-03-24 20:46:26
    moverImg(index){ this.imgList.splice(index,1) },
  • 如何在vue项目中获取dom节点

    千次阅读 2019-11-14 21:37:15
    vue项目中,我需要获取一个dom的offsetHeight、scrollHeight等,但是不知道如何在vue获取一个dom节点。毕竟是新手,所以在看了很多大佬的博客外,打算做一个小的总结,以便梳理知识,和大家共勉以及一起进步。 ...
  • vue获取DOM元素

    2020-01-11 11:15:13
    由于vue不推荐操作DOM节点所以最好不要使用原生的getElement方法 vue有一个reference属性 它能够获取DOM节点 在想要获取的节点上添加ref这个属性 ,这个节点就会被实例获取到 操作DOM节点 this.$refs.myp... .....
  • Vue实现dom节点的增删改成

    万次阅读 2019-03-08 15:51:36
    在学习了vue框架之后,对前端又有了新的认知,vue框架的使用跟之前的js或者jquery有着很大的不同,在使用js或者jquery,我们首先想到的就是获取页面的节点,然后再来改变或者添加上自己想要的数据,vue则是相反,vue...
  • App2.0配置:Vue双向绑定和获取dom节点 1、需求:效果展示如下, 当“获取第二个变淡里面数据”,弹出输入的文字,点击“确定”之后,box字体变红 2、源代码如下, <template> <!-- Vue双向...
  • Vue 及双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点 这是所有的代码,注释做的都很详细 &amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;!-- vue 的模板里面,所有的内容要被一个根节点包含...
  • 本篇文章主要介绍了Vue获取DOM元素样式和样式更改示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue获取DOM

    2018-11-19 16:05:17
    vue 中ref 的使用注意事项 最近看别人的项目发现有些语法不能理解,所以百度进行了学习。现在总结一下。 ref 有两种用法 1.ref 加在普通的元素上,用...3.如何利用v-for 和ref 获取一组数组或者dom 节点 ...
  • vue中操作dom元素节点的样式有好几种方式这里我总结了两种 第一种: 1.获取到元素节点(这里通过this.$refs获取元素节点) this.$refs.xxxxx.$el 2.操作元素的样式 this.$refs.num1Underline.$el.style.transform =...
  • vuedom节点和window对象

    千次阅读 2020-07-03 17:32:57
    vue中对dom节点的操作一般是用ref来完成的。ref 加在普通的元素上,用this.$refs.name 获取到的是dom元素,和原生的document.get(ID)获得的dom元素一样,拥有这个dom元素的默认属性,像innertext这种,而ref 加在...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,341
精华内容 14,136
关键字:

vue获取dom节点

vue 订阅