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 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 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模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
php微信开发接入
2016/08/27 PHP
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
React组件的三种写法总结
2017/01/12 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
Python中单例模式总结
2018/02/20 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
django连接oracle时setting 配置方法
2019/08/29 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
香港通票:Hong Kong Pass
2019/02/26 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
擅自离岗检讨书
2014/09/12 职场文书
毕业设计论文评语
2014/12/31 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
工作态度检讨书范文
2015/05/06 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书