Vue -- $方法 · Vue&&TypeSprict--基础总结

[TOC] >[success] # Vue -- $方法 ~~~ 1.Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的数据属性区分 2.实例方法指的是创建Vue实例，例如 let vm = New Vue({}) 这里面vm就是实例，在内部就可以this 调用这些$方法，在外部也可以vm调用这些$方法 3.当然也可以Vue直接调用，但这样调用就不能加$ ~~~ >[danger] ##### 更改渲染 $set ~~~ 1.vm.$set( target, key, value ),其中'target' 是 'Object | Array'对象或者是数组，'key'是'string | number'字符串或者是数字,'value'是可以任意类型 2.在v-for章节有详细讲解 ~~~ >[danger] ##### 更改渲染 $delete ~~~ 1.用法： vm.$delete( target, key ) ，参数讲解{Object | Array} target 、{string | number} key，target接受数组或者对象，key 接受字符串或者数字 2.对象使用$delete 是删除整个key和key对应的valeu信息，在'章节案例中有讲解' 3.下面案例是针对数组删除的重新渲染的两种方法 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <p v-for="i,index in list" @click="delHandel(index)">{{i}}</p> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { list: ['as', 'bs', 'cs'], }, methods: { delHandel(index){ //this.list.splice(index,1); this.$delete(this.list,index); } }, }); </script> </body> </html> ~~~ >[danger] ##### 更改渲染 $refs ~~~ 1.因为 ref 是对象的形式储存，如果值相同后面的会把前面的覆盖 2.用v-for 循环出来绑定同一个ref 会以数组的形式呈现。 3.渲染Dom是异步的，如果在生命周期mounted中获取ref的，当页面没有变化时候是好用，但是如果后续通过'v-for' 等形式增加了dom，是获取不到的。因为mounted只加载一次，且$ref 是异步，也就导致不能同步获得 4.如何获取异步$refs有个两方法，一个是updated的生命周期中获取，另一种在 mounted生命周期中使用$nextTick ~~~ ![](https://box.kancloud.cn/1e9818e3391245e93e75423adc2424fa_354x393.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> </head> <body> <div id="app"> <button @click="dom">增加dom</button> <p v-for="i,index in list" ref="plist">{{i}}</p> <p ref="pHtml">我好</p> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { list: ['as', 'bs', 'cs'], }, methods:{ dom(){ this.list.push('ds'); }, }, mounted(){ // 没有使用$nextTick 同步进行dom console.log(this.$refs); this.$nextTick(()=>{ // 使用$nextTick 异步进行dom console.log(this.$refs); }); }, updated(){ // 异步进行dom console.log(this.$refs); }, }); </script> </body> </html> ~~~ >[danger] ##### 更改渲染 $nextTick ~~~ 1.将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。 2.具体案例看上面$refs 案例 ~~~