vue 实例的简单属性与方法

vue实例的简单属性和方法

https://www.cnblogs.com/wspblog/p/9876723.html

属性
1.this.$data/vm.$data====>data

       vm.a=100;
      vm`.$`data.a=100;   直接使用数据   实例的数据对象

2. this.$el/= =vm.$el= =>el 指定要绑定的元素
3. vm.$options.aa/this.$options.aa 访问自定义属性
4. 获取所有ref属性的标签（获取DOM元素）

<h1 ref="hOne">11111</h1>
console.log(this.$refs.hOne.innerHTML);

方法

1. vm`.$`mount("#box")= = = = =>手动挂载 el   可以替换原来的挂载

 2. this`.$`set(要修改的数据,属性名，属性值)/Vue.set(vm.jsona,'sex', '男')/vm`.$`set(要修改的数据,属性名，属性

  值)====>任何时候添加对象属性
 
3.vm`.$`destroy()/this`.$`destroy();= = = =>销毁 destoryed/beforeDestroy

 4.vm`.$`delete(vm.jsona,属性名)/

  Vue.delete(vm.jsona,"a")/

this`.$`delete(this.jsona,"a")= = = =>删除对象属性

5. vm`.$`forceUpdate()/this`.$`forceUpdate(); 更新= =》

（ 与updated/beforeUpdate相对较多）     

 this`.$`forceUpdate();有时候你会碰到数据已经更新了但是组件还是没有刷新

 6.vm`.$`watch(data,callback[,options])  

 7. vm`.$`nextTick(fn)/this`.$`nextTick()===>(原生DOM)     

 this.$nextTick(()=>{
      console.log(this.$el.getElementsByTagName("span")[0].innerHTML)
     })
     
     Vue.nextTick().then(function(){
        console.log(vm.$el.getElementsByTagName("span")[0].innerHTML)
     })

1.在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

与之对应的就是beforeMount（）、mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。

2.在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中

其他属性和方法（组件）
$parent
$children
$emit
$on
$root
$refs