Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作。

vue的不同版本获取dom对象的方法不一样

Vue.js  1.0版本中,通过v-el绑定,然后通过this.els.XXX来获取

Vue.js  2.0版本中。我们通过给元素绑定ref=“XXX”,然后通过this.$refs.XXX或者this.refs['XXX']来获取

以2.0为例:

<template>
<section>
<div ref="hello">
<h1>Hello World ~</h1>
</div>
<el-button type="danger" @click="get">点击</el-button>
</section>
</template>
<script>
export default {
methods: {
get() {
console.log(this.$refs['hello']);
console.log(this.$refs.hello);
}
}
}
</script>

vue中操作dom需要谨慎,尤其是添加或删除dom的时候,特别是mounted()和created()的时候,此时dom对象还没有生成,要放在this.nextTick()的回调函数中。

嗯,就酱~~

Vue中获取dom元素的更多相关文章

  1. 20.Vue中获取DOM元素和组件

    1.获取DOM元素和组件:this.$refs

  2. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  3. javascript中获取dom元素高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  4. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  5. Vue之获取DOM元素与更新DOM后事件的特殊情况

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 在vue中操作dom元素

    在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...

  7. vue $refs获取dom元素

    1.今天做vue项目有个获取dom节点,主要目的是获取节点让滚动到顶部 首先在滑动容器去添加ref <div class="contentScroll" ref=" ...

  8. problem: vue中获取动态元素高度

    前言:始终要相信你能想到的解决方案,基本上都是可以用技术实现的... 解决方法就是在mounted中在this.$nextTick()去获取,如果没有获取到,不是写法错就是,元素没有绑定对地方,注意检 ...

  9. vue中一个dom元素可以绑定多个事件?

    其实这个问题有多个解决方法的  这里提出两点 第一种 第二种 现在dom上绑定一个 然后在你的methods中直接调用 如果要传参数  这时候千万别忘记 原创 如需转载注明出处 谢谢

随机推荐

  1. (一)EasyUI 使用——基本概念

    1. EasyUI是什么 EasyUI是一种第三方组织开发的一款基于jQuery的,简单易用的,功能强大的WEB[后台前端]JavaScript现成的组件库. 2.  JavaScript,AJAX, ...

  2. 记一次elementUI Icon 加载无效的问题。并且提示错误 Failed to decode downloaded font:

    问题在于webpack的loader中.检查了一下发现有两个相同的file-loader的配置,删除其中一个即可.

  3. 【从0開始Tornado建站】0.9版本号python站点代码开源--持续更新中

            从5月份開始[从0開始Tornado建站]这个专栏,開始一点一点把这个分类兴趣站点弄起来,从无到有的过程也是令人兴奋的:-) 国庆的时候等待备案然后上线,如今站点域名为ustchack ...

  4. mac os x 使用scp取代sz rz

    在windows下,能够通过secureCRT的sz来下载文件,而用rz来上传文件.在unix/linux下则不必.由于scp命令能够完毕这项目工作. sz file替代方案为:scp usernam ...

  5. Atitit.java jna 调用c++ dll 的总结

    Atitit.java jna 调用c++ dll 的总结 1. JNA技术解密1 1.1. JNA工作原理1 2. JNA技术难点 Java—C和操作系统数据类型的对应表1 2.1. 1 2.2.  ...

  6. C++语言基础(14)-typeid

    typeid可用来判断类型是否相等: 例如有下面的定义: char *str; ; ; float f; 类型比较 结果 类型比较 结果 typeid(int) == typeid(int) true ...

  7. 如何在Linux下统计高速网络中的流量

    参考: http://www.geekfan.net/5558/ http://blog.jobbole.com/23638/ http://www.csdn.net/article/2014-03- ...

  8. ActionBar + ViewPager(PagerSlidingTabStrip)

    既然是要实现ActionBar.那么第一步当然就是编辑menu文件夹下的main.xml文件了.代码例如以下所看到的: <menu xmlns:android="http://sche ...

  9. Linux 总结2

    cd                                             pwd                                            mkdir ...

  10. poj 1041(欧拉回路+输出字典序最小路径)

    题目链接:http://poj.org/problem?id=1041 思路:懒得写了,直接copy吧:对于一个图可以从一个顶点沿着边走下去,每个边只走一次,所有的边都经过后回到原点的路.一个无向图存 ...