如果我们想获取DOM元素，一般使用js中的document.querySelector来获取这个dom节点，然后在获取元素的值，现在Vue提供给我们一种更便捷的方式来获取DOM元素-----$refs{}

$refs{}----获取标签元素

说明：一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例

作用：减少DOM操作

用法：

原生方法

此例是利用原生jsdocument.getElementById()获取元素

<div id="app"><input type="button" value="获取元素" @click='btn'><h3 id="myh3">哈哈, 今天天气不错</h3>
</div><script>var vm= new Vue({el:'#app',data:{},methods: {btn(){console.log(document.getElementById('myh3').innerText);}}})console.log(vm);
</script>

效果如下：

我们将vm实例输出，查看这个对象

vm.$refs方法获取

给元素定义ref=",输出vm实例

<h3 id="myh3" ref="myh3">哈哈, 今天天气不错</h3>

在实例的方法中输出，

获取元素方法如下：

console.log(this.$refs.myh3);

获取内容方法如下：

console.log(this.$refs.myh3.innertext);
//或者
console.log(this.$refs.myh3.innerHtml);

$refs{}----获取Vue组件

查看vm实例：

<div id="app"><input type="button" value="获取元素" @click='btn'><login ref='mylogin'></login>
</div><script>var login={template:'<h1>登录组件</h1>',data() {return {msg:'son msg'}},methods: {show(){console.log('调用了子组件的方法');}},}var vm= new Vue({el:'#app',data:{},methods: {btn(){}},components:{login}})console.log(vm);
</script>

利用$refs获取子组件的方法：

console.log(this.$refs.mylogin);

利用$refs获取子组件内容的方法：

this.$refs.mylogin.show();

利用$refs获取子组件中的data：

console.log(this.$refs.mylogin.msg);

Vue.js中$refs{}获取DOM元素相关推荐

Vue.js实例学习：获取DOM元素
一.获取DOM元素在Vue中获取DOM元素,我们可以用ref. 用法(和React一样): (1)在组件的DOM部分,任意标签中写上:ref="xxx" (2)通过组件对象 t ...
使用Vue获取DOM元素
$refs获取DOM元素 Vue中,使用$refs属性可以获取DOM元素. 注意:需要在DOM元素中挂载ref属性后才能使用 //html<p id="app" ref = ...
vue 获取id元素,vue.js怎么获取dom元素？
vue.js怎么获取dom元素?下面本篇文章给大家介绍一下vue.js获取dom元素的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 使用Vue.js获取dom元素标签中添加 ...
vue.js -- 获取dom元素的样式(非行内样式)
在vue中获取dom元素的样式: this.$refs.menuList.style.top; 这种获取方式是只能获取到元素的行内样式的. this.$refs.menuList.getBoundin ...
Vue中获取dom元素的宽高
vue中获取dom元素的宽高 template模板中给dom绑定ref: <el-carouselid="ailabelmap"ref="remarkCarusel ...
vue获取dom元素与修改样式详解
vue中如何获取dom元素呢? 步骤详解在标签上加上ref属性如 : 在js中通过 this.$refs.加ref的值便可以获取dom 如:this.$refs.refDemo 修改对应的样式名 ...
vue获取dom元素值
1.通过refs来获取dom元素内容 2.需要利用到jq,但是不支持,学习vue.js,都说需要抛弃jq,否则会禁锢你的思想通过refs方法 ref 被用来给元素或子组件注册引用信息.引用信息将会注 ...
在Vue中获取DOM元素的实际宽高
最近使用 D3.js 开发可视化图表,因为移动端做了 rem 适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOM API的使用,避免遗忘这里总结一下. 一.获取元素在 Vue 中可以 ...
Vue笔记四：Vue获取DOM元素和组件元素的方法
文章目录 Vue获取组件元素 ref获取组件元素 Vue获取组件元素如果想使用哪个DOM元素,就给它加上ref属性,然后用$refs属性获取它的元素对象,示例如下: 全部代码: <!DOCTY ...

Vue.js中$refs{}获取DOM元素

$refs{}----获取标签元素

原生方法

vm.$refs方法获取

$refs{}----获取Vue组件

Vue.js中$refs{}获取DOM元素相关推荐

最新文章

热门文章