vue中$refs的使用记录

ref 目前使用过的三种方式：

1、在html的元素中使用rel，可在js中直接调用该元素，用this$refs（ref值） 获取到的是dom元素

2、在vue的组件上加rel，可在js中直接使用该组件包括该组件的方法，用this$refs（ref值）方法名()

3、在v-for的循环列中使用rel

避坑：

v-for中使用rel需要绑定 变量 ，即v-bind:rel='变量名'

ref 需要在dom渲染完成后才会有 ，在使用的时候确保dom已经渲染完成。比如在生命周期  mounted(){} 钩子中调用 ，或者 在 this$nextTick(()=>{}) 中调用 。

如果rel循环未绑定变量，那就$refs获取获取数组再循环得到使用即可

例子1：在html元素上使用

<div id="app">

    <h1 ref="h1ele">这是h1</h1>

    <hello ref="ho"></hello>

    <button @click="getref">获取h1元素</button>

</div>

获取注册过 ref 的所有组件或元素

methods: {

        getref() {

          // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素

          consolelog(this$refsh1eleinnerText);

          this$refsh1elestylecolor = 'red';// 修改html样式

          consolelog(this$refshomsg);// 获取组件数据

          consolelog(this$refshotest);// 获取组件的方法

        }

      }

例子2：

<html部分

<view class="example-body">

<button class="button" type="primary" @click="togglePopup('top', 'popup')">顶部d出 popup</button>

<button class="button" type="primary" @click="togglePopup('center', 'popup')">中间d出 popup</button>

<button class="button" type="primary" @click="togglePopup('bottom', 'popup')">底部d出 popup</button>

</view>

<uni-popup ref="showpopup" :type="type" @change="change"><text class="popup-content">{{ content }}</text></uni-popup>

<uni-popup ref="showtip" :type="type" :mask-click="false" @change="change">

<view class="uni-tip">

<text class="uni-tip-title">警告</text>

<text class="uni-tip-content">这是一个通过自定义 popup，自由扩展的 警告d窗。点击遮罩不会关闭d窗。</text>

<view class="uni-tip-group-button">

<text class="uni-tip-button" @click="cancel('tip')">取消</text>

<text class="uni-tip-button" @click="cancel('tip')">确定</text>

</view>

</view>

</uni-popup>

<js部分

methods: {

togglePopup(type, open) {

switch (type) {

case 'top':

thiscontent = '顶部d出 popup'

break

case 'bottom':

thiscontent = '底部d出 popup'

break

case 'center':

thiscontent = '居中d出 popup'

break

}

thistype = type

this$nextTick(() => {

this$refs['show' + open]open()

})

},

cancel(type) {

this$refs['show' + type]close()

},

change(e) {

consolelog('是否打开:' + eshow)

}

},

一般来讲获取DOM元素，需documentquerySelector（"class"）获取这个dom节点，然后在获取元素的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的元素上绑定rel，然后$refs里面调用就行。

然后在javascript里面这样调用：this$refs元素绑定rel  这样就可以减少获取dom节点的消耗了

在vue的开发过程中，常常需要 *** 作表格元素，比如数据的分页呈现，某行数据的修改、删除等 *** 作，不可避免的需要 *** 作某行数据，本文描述了这一过程

首先，我们全局引入ant-design-vue，本文简称为antd，为蚂蚁金服推出的一款UI组件，在mainjs中添加即可。

下面我们使用antd的表格组件，在dom元素中定义表格相关属性及数据的来源信息等。

dataSource为数据的来源，格式为数组，我们通过ajax的方式请求后台获取数据。

列信息需要和返回对象的属性对应，如果有些列不是对象的属性，比如 *** 作列，可以通过增加scopedSlots的方式。

名称为action的插槽(slot)，需要在dom元素中进行设置，添加在a-table的子元素中。slot-scope="text,record"中的record就是这行的数据值。

我们通过F12进行调试，将record的信息进行打印，不难发现，record确实记录了这行的数据信息

$eventtargetquerySelector('img');

这是基础js啊，还是建议先把基础学扎实了再研究框架吧，官方指南有这么一段我觉得很有道理

官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！

javaScript 框架

简化Dom的 *** 作

响应式数据驱动

简单的vue程序：

1导入开发版本的vueis

2创建vue实例对象，设置el属性和data属性

3使用简介的模版语法把数据渲染到页面上

vue实例可以使用双标签挂载，不能使用HTML和BODy来进行

v-text 设置标签的文本值 (覆盖标签中全部的内容 {{}} el只会替换相应的值)

v-html (1内容中有html结构会被解析成标签 2设置元素的innerHTML)

注：解析文本使用 v-text 解析hml使用v-html

v-on(1为元素绑定事件，2事件名不需要写on,3指令可以简写@ 4绑定的方法定义在methods属性中5方法内部可以通过this关键字访问定义data中的数据)

计数器（创建实例v-on事件和方法绑定，实时更改数据）

v-show(1根据元素的真假切换元素的显示状态 2原理是修改元素的display实现元素的隐藏)

v-if(1根据表达式的真假切换元素的显示状态 2本质是 *** 作dom 3表达式的值是true时，元素存在于dom树中，为否是从dom树中移除)

注：v-show和v-if的区别：

v-show：只是改变了display属性的 *** 作

v-if：改变的是dom数

实际情况 频繁切换的使用v-show

v-bind (1为元素绑定属性 2完整写法v-bind:属性名 3简写的话可以只写:属性名)

切换（1用数组来存放元素 2用v-on来绑定事件 3用v-bing来修改元素的属性）

v-for(1根据数据生成列表 2v-for长和)

v-on (补充)（1时间绑定的方法写成函数调用的形式，可以传入自定义参数

2定义方法时定义形参数来接受传入的实参

3通过修饰符可以对事件进行限制）

例如：@keyupenter

v-model(1便捷的设置和获取表单元素的值

2绑定的数据会和表单元素值相关联

3 表单的 数据=绑定的数据)

记事本实战演练(1增加 2删除 3隐藏 4清空 )

注：shift()函数删除的是数组中的第一个元素 使用splice删除指定的某个元素

获取DOM或者组件实例可以使用ref属性，写法和vue20需要区分开 。

总结：

1Vue2中可以通过ref直接 *** 作单个DOM和组件 this$refsinfoinnerHTML

2Vue2中可以批量通过ref *** 作DOM和组件 this$refsfruit[0]innerHTML

vue30里面模板的ref是跟着定义走的（先定义再使用， 模板中的名字和定义的名字要一致 ）先返回再使用

vue20里面的使用是跟着模板走（先模板中用，然后根据模板使用ref， 获取DOM的ref要和模板的一样 ）

总结： *** 作单个DOM或者组件的流程

1定义一个响应式变量

2把变量返回给模板使用

3模板中绑定上述返回的数据

4可以通过info变量 *** 作DOM或者组件实例

1定义 *** 作DOM的函数----通过形参获取单个DOM元素

总结： ref批量 *** 作元素的流程

1定义一个 *** 作DOM的函数

2把该函数绑定到模板上（ 必须动态绑定 ）

3在函数中可以通过参数得到单个元素，这个元素一般可以放到数组中

4通过上述数组即可 *** 作批量的元素

以上就是关于vue中$refs的使用记录全部的内容，包括:vue中$refs的使用记录、vue如何获取表格某行数据、vue2.0获取当前元素li下的内容等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！