vue实例方法-白红宇

vue实例方法

阅读量：4087 次

发布时间：2019-05-25

本文共 1937 字，大约阅读时间需要 6 分钟。

一、Vue之实例属性

Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的数据属性区分

组件树

$parent：用来访问组件实例的父实例

$root: 用来访问当前组件树的根实例

$children:用来访问当前组件实例的直接子组件实例

$refs:用来访问v-ref指令的子组件

DOM访问

$el：用来挂载当前组件实例的dom元素

$els：用来访问$el元素中使用了v-el指令的DOM元素

12345678910111213


       
            {
     { message }}

数据访问

$data：用来访问组件实例观察的数据对象

$options：用来访问组件实例化时的初始化选项对象

DOM方法的使用

$appendTo(elementOrSelector, callback)：将el所指的DOM元素插入目标元素

$before(elementOrSelector, callback)：将el所指的DOM元素或片段插入目标元素之前

$after(elementOrSelector, callback)：将el所指的DOM元素或片段插入目标元素之后

$remove(callback)：将el所指的DOM元素或片段从DOM中删除

$nextTick(callback)：用来在下一次DOM更新循环后执行指定的回调函数

event方法的使用

监听
- $on(event, callback)：监听实例的自定义事件
- $once(event, callback)：同上，但只能触发一次

触发
- $dispatch(event, args)：派发事件，先在当前实例触发，再沿父链一层层向上，对应的监听函数返回false停止
- $broadcast(event, args)：广播事件，遍历当前实例的$children，如果对应的监听函数返回false，就停止
- $emit(event, args)：触发事件

1234567891011121314151617181920212223242526272829303132


           
        {
     { num }}

二、实例方法

2.1 $.watch()

123456789101112131415

var data = { a: 1 }var vm = new Vue({  el: '#example',  data: data}) vm.$data === data // -> truevm.$el === document.getElementById('example') // -> true // $watch 是一个实例方法vm.$watch('a', function (newVal, oldVal) {    })  // 这个回调将在 `vm.a`  改变后调用

2.2 vm.$nextTick

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上

12345678910111213141516171819202122232425262728

放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码

什么时候需要用的Vue.nextTick()

你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题。