博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue实例方法
阅读量:6179 次
发布时间:2019-06-21

本文共 1461 字,大约阅读时间需要 4 分钟。

  这次我们介绍Vue实例提供的一些有用的属性和方法,这些属性和方法名都以前缀$开头。

一、实例属性

1.组件树访问

  •  $parent  用来访问当前组件实例的父实例
  •  $root  用来访问当前组件树的根实例,如果当前组件没有父实例,$root表示当前组件实例本身
  •     $children  用来访问当前组件实例的直接组件实例

 $refs   用来访问使用了v-ref指令的子组件。

2.DOM访问

  •  $el   用来访问挂载当前组件实例的DOM元素。
  •  $els   用来访问$el元素中使用了v-el指令的DOM元素

3.数据访问

  •  $data   用来访问组件实例观察的数据对象,该对象引用组件实例化时选项中的data属性
  •  $options  用来访问组件实例化时的初始化选项对象

二、实例方法

1.实例DOM方法的使用

  1. .$appendTo()  它用来将el所指的DOM元素或片段插入到目标元素中。该方法接受两个参数:
    • elementOrSelector(字符串或DOM元素),该参数可以是一个选择器字符串或者DOM元素。
    • callback(可选,函数),回调函数,该回调函数会在el元素被插入到目标元素后触发。

    2.  $before() 它用来将el所指的DOM元素或片段插入到目标元素之前。该方法接受两个参数:

    • elementOrSelector(字符串或DOM元素),该参数可以是一个选择器字符串或者DOM元素。
    • callback(可选,函数),回调函数

    3. $after() 它是用来将el所指的DOM元素或片段插入到目标元素之后。该方法接受两个参数,同上

    4. $remove()  它是用来将el所指的DOM元素或片段从DOM中删除。该方法接受一个参数

    • callbak(可选参数)同上

     5.$nextTick() 它是用来在下次DOM更新循环后执行指定的回调函数,使用该方法可以保证DOM中的内容已经与最新数据保持同步。该方法接受一个参数:

    • callback(可选,函数),回调函数,该回调函数会在下次DOM更新循环后被执行。它和全局的Vue.nextTick方法一样,不同的是,callback中的this会自动绑定到调用它的Vue实例上。

2.实例Event方法的使用

  1.$on() 该方法用来监听实例上的自定义事件。该方法接受两个参数:

    • event(字符串),该参数可以是一个事件名称
    • callback(函数),回调函数,该回调函数会在执行$emit、$broadcast或者$dispatch后触发

  2.$once() 该方法也是用来监听实例上的自定义事件,但只触发一次。该方法接受两个参数 。同$on

  3.$emit() 该方法用来触发事件。接受两个参数

    • event(字符串),该参数可以是一个事件名称
    • args(可选),传递给监听函数的参数

  4.$dispatch() 该方法用来派发事件,即先在当前实例触发,再沿着父链一层一层向上,如果对应的监听函数返回false就停止。该方法接受两个参数:同$emit()

  5.$broadcast() 该方法用来广播事件,即遍历当前实例的$children,如果对应的监听函数返回false就停止。该方法接受两个参数:同$emit()

  6.$off() 该方法用来删除事件监听器。该方法接受两个参数:同$on()

  

 

转载于:https://www.cnblogs.com/yc-1314/p/10314504.html

你可能感兴趣的文章
【操作系统】实验四 主存空间的分配和回收
查看>>
Log4j 配置 的webAppRootKey参数问题
查看>>
VMware ESXi 5.0中时间配置中NTP设置
查看>>
C++中memset()函数笔记
查看>>
oracle sql 数结构表id降序
查看>>
使用cnpm加速npm
查看>>
MySql跨服务器备份数据库
查看>>
一个字典通过dictionaryWithDictionary 他们的内存指针是不同的
查看>>
HTTP 错误 500.0的解决方法。
查看>>
CCF201612-1 中间数(解法三)(100分)
查看>>
百度前端任务一学习的知识
查看>>
C# 四个字节十六进制数和单精度浮点数之间的相互转化
查看>>
JavaNIO的总结
查看>>
阿里云总监课第五期PPT下载地址
查看>>
时间属性
查看>>
第十九章:集合视图(十七)
查看>>
BIOS
查看>>
Elasticsearch之元数据(meta-fields)介绍
查看>>
基于Django+Bootstrap框架,可视化展示内存监控信息
查看>>
Pytorch | BERT模型实现,提供转换脚本【横扫NLP】
查看>>