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 相关文章推荐
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
JavaScript之数组扁平化详解
Jun 03 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
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
python Shapely使用指南详解
2020/02/18 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
用 Python 制作地球仪的方法
2020/04/24 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
应届毕业生求职信范例分享
2013/12/17 职场文书
工作交流会欢迎词
2014/01/12 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
文员岗位职责
2015/02/04 职场文书
中学教师教学工作总结
2015/08/13 职场文书
python Polars库的使用简介
2021/04/21 Python
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
MySQL 四种连接和多表查询详解
2021/07/16 MySQL