Vue 2.0学习笔记之使用$refs访问Vue中的DOM


Posted in Javascript onDecember 19, 2017

通过前面对Vue的学习,到现在我们很有必要进一步了解Vue实例中的一些特殊的属性和方法。首先要了解的是$refs属性。但是在深入到JavaScript部分之前,我们先看看模板。

<div id="app">
  <h1>{{ message }}</h1>
  <button @click="clickedButton">点击偶</button>
</div>

let app = new Vue({
  el: '#app',
  data () {
    return {
      message: 'Hi,大漠!'
    }
  },
  methods: {
    clickedButton: function () {
      console.log('Hi,大漠!')
    }
  }
})

在Vue的模板中,我们可以在模板中的任何元素中添加ref属性,这样就可以在Vue实例中引用这些元素。更具体地说,可以访问DOM元素。在上面的示例中的<button>中添加ref属性试试。这个按钮上已有绑定了一个click事件,这个事件让我们在浏览器的控制面板中打印出Hi, 大漠!信息。

<button ref="myButton" @click="clickedButton">点击偶</button>

注意,ref属性不是一个标准的HTML属性,只是Vue中的一个属性。实际上,它甚至不会是DOM的一部分,所以在浏览器中你查看渲染的HTML,你是看不到有关于ref的任何东西。因为在它前面没有添加:,而且它也不是一个指令。

在Vue实例上使用$refs属性可以通过myButton来引用这个按钮。来看看在浏览器的控制台中打印出来,它将是什么样子。

let app = new Vue({
  el: '#app',
  data () {
    return {
      message: 'Hi!大漠'
    }
  },
  methods: {
    clickedButton: function () {
      console.log(this.$refs);
    }
  }
})

如果你打开浏览器的控制台,我们可以看到这个属性是一个JavaScript的对象,它包含了ref属性的所有元素的引用。

Vue 2.0学习笔记之使用$refs访问Vue中的DOM

注意,这个对象中的键名(key)与我们在ref属性中指定的名称(name)相匹配,而其值(value)是DOM元素。在这种情况下,我们可以看到键名是myButton,而其值是button元素。而且这也和Vue没有任何关系。

所以在Vue中,可以通过在$refs对象上访问ref的名称来访问DOM元素。来看下面这个示例。我们点击按钮后,这个按钮的文本将会更改message数据中的值。

let app = new Vue({
  el: '#app',
  data () {
    return {
      message: 'Hi!大漠'
    }
  },
  methods: {
    clickedButton: function () {
      console.log(this.$refs)
      this.$refs.myButton.innerText = this.message
    }
  }
})

点击按钮之后,按钮的文本将更改变“Hi,!大漠”:

Vue 2.0学习笔记之使用$refs访问Vue中的DOM

当然,我们也可以通过使用查询选择器来访问DOM元素来实现这样的效果,但是使用ref属性更简洁,而且这也是Vue中的方法。它也将更安全,因为你不会依赖于classid。因此,几乎不会因为更改了HTML的标签或者CSS样式受到影响。

像Vue这样的JavaScript框架的主要目的之一就是让开发人员不必去处理DOM。所以你应该避免去做这样的事情,除非你真的需要去做。还应该要注意一个潜在的问题。

首先来看一个简单的示例,给h1元素添加一个ref属性。

<div id="app">
  <h1 ref="message">{{ message }}</h1>
  <button ref="myButton" @click="clickedButton">点击偶</button>
</div>

当我们点击按钮之后,浏览器控制台输出的值将会得到改变:

Vue 2.0学习笔记之使用$refs访问Vue中的DOM

由于我们把Vue的实例赋值值了变量app,所以我们可以继续使用它。现在要做的是改变元素的文本。最初<h1>元素的内容是message的值,在下面这个示例中,通过一个setTimeout来看看元素<h1>发生的变化:

let app = new Vue({
  el: '#app',
  data () {
    return {
      message: 'Hi!大漠'
    }
  },
  methods: {
    clickedButton: function () {
      console.log(this.$refs);
      this.$refs.myButton.innerText = this.message
    }
  }
})

setTimeout(function() {
  app.$refs.message.innerText = '延迟2000ms修改h1元素的文本';
}, 2000);

Vue 2.0学习笔记之使用$refs访问Vue中的DOM

正如你所看到的,我们在更新数据属性时覆盖了我们对DOM所做的更改。这样做的原因是,当访问DOM元素并直接操作它们时,实际上跳过了前面文章中讨论到的虚拟DOM。因此,Vue仍然控制着h1元素,甚至当Vue对数据中的做出更新时,它会更新虚拟DOM,然后更新DOM本身。因此,你应该小心使用对DOM的直接更改,就算是你不小心做了相应的修改,你所做的任何更改都将可能会被覆盖。虽然在使用refs时应该小心更改DOM,但是做只读操作相对来说比较安全,比如从DOM中读取值。

另外来看看v-for指令中使用refs属性的效果。比如下面这个示例,给一个无序列表ul,通过v-for指令输出110的数字。

<ul>
  <li v-for="n in 10" ref="numbers">{{ n }}</li>
</ul>

当你点击按钮时,$refs属性将在浏览器控制台中输出:

Vue 2.0学习笔记之使用$refs访问Vue中的DOM

正如上图所看到的一样,把numbers属性添加到了对象中,但需要注意该值的类型。与之前看到的DOM元素不同,它实际上是一个数组,一个DOM元素的数组。当使用ref属性和v-for指令时,Vue会迭代所有DOM元素,并将它们放置在数组中。在这种情况下,这就输出了10li的DOM元素的数组,因为我们迭代了10次。每个元素都可以像我们之前看到的那样使用。

上面通过简单的示例了解了Vue中的$refs在Vue中是怎么访问到DOM元素的。接下来看一个简单的示例。

在Web中Modal组件是经常可见的一个组件。来看看$refs怎么来来控制Modal的打开和关闭。

<!-- HTML -->
<div id="app">
  <div class="actions">
    <button @click="toggleModal('new-item')">添加列表</button>
    <button @click="toggleModal('confirm')">删除列表</button>
  </div>

  <modal ref="new-item">
    <p>添加新的列表</p>
    <div slot="actions">
    <button>保存</button>
    <button>取消</button>
    </div>
  </modal>
  <modal ref="confirm">
    <p>删除列表?</p>
    <div slot="actions">
    <button>删除</button>
    <button>取消</button>
    </div>
  </modal>

  <script type="x-template" id="modal-template">
    <transition name="modal-toggle">
    <div class="modal" v-show="toggle">
      <button class="modal__close" @click="close">X</button>
      <div class="modal__body">
      <h1>Modal</h1>
      <slot>这是一个Modal,是否需要添加新的内容?</slot>
      </div>
      <div class="modal__actions">
      <slot name="actions">
        <button @click="close">关闭</button>
      </slot>
      </div>
    </div>
    </transition>
  </script>
</div>

// JavaScript
let Modal = Vue.component('modal', {
  template: "#modal-template",
  data () {
    return {
    toggle: false
    }
  },
  methods: {
    close: function() {
    this.toggle = false;
    }
  }
});
let app = new Vue({
  el: "#app",
  methods: {
    toggleModal(modal) {
    this.$refs[modal].toggle = !this.$refs[modal].toggle;
    }
  }
});

效果如下:

Vue 2.0学习笔记之使用$refs访问Vue中的DOM

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
juqery 学习之四 筛选查找
Nov 30 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
JS函数重载的解决方案
May 13 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
使用vue构建多页面应用的示例
Oct 22 Javascript
js之ajax文件上传
May 13 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 #jQuery
基于node.js实现微信支付退款功能
Dec 19 #Javascript
React Native之prop-types进行属性确认详解
Dec 19 #Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 #Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 #Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 #Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 #jQuery
You might like
Python中使用django form表单验证的方法
2017/01/16 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
ParseInt函数参数设置介绍
2014/01/02 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
JavaScript 基本概念
2015/01/20 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
element中Steps步骤条和Tabs标签页关联的解决
2020/12/08 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
常用python数据类型转换函数总结
2014/03/11 Python
python基础教程之常用运算符
2014/08/29 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
Python MySQLdb Linux下安装笔记
2015/05/09 Python
Python解决八皇后问题示例
2018/04/22 Python
python 编写简单网页服务器的实例
2018/06/01 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
艺术应用与设计个人的自我评价
2013/11/23 职场文书
精彩广告词大全
2014/03/19 职场文书
在校实习生求职信
2014/06/18 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
女方离婚起诉书
2015/05/18 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
公司人力资源管理制度
2015/08/05 职场文书
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android
python异步的ASGI与Fast Api实现
2021/07/16 Python
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL