实例方法 · web前端

[TOC] # `$mount`方法 $mount方法是用来挂载我们的扩展的，我们先来复习一下扩展的写法。这里我们作了jspang的扩展，然后用$mount的方法把jspang挂载到DOM上，我们也生成了一个Vue的实例，直接看代码 ~~~ <div id="app"> {{message}} </div> <script type="text/javascript"> var jspang = Vue.extend({ template:`<p>{{message}}</p>`, data:function(){ return { message:'Hello ,I am JSPang' } } }) var vm = new jspang().$mount("#app") </script> ~~~ 这段代码我们在extends的时候已经写过一次 # `$destroy()` 卸载方法用$destroy()进行卸载。我写了一个button按钮，点击后卸载整个挂载。 html： ~~~ <p><button onclick="destroy()">卸载</button></p> ~~~ js ~~~ function destroy(){ vm.$destroy(); } ~~~ ~~~ <body> <div id="app"> {{message}} </div> <button onclick="destroy()">卸载</button> </body> <script type="text/javascript"> var jspang = Vue.extend({ template: `<p>{{message}}</p>`, data: function () { return { message: 'hello vue' } }, destroyed: function () { console.log('被销毁了'); } }); var vm = new jspang().$mount("#app"); function destroy() { vm.$destroy(); } ~~~ PS:`$destroy()`后边必须要有括号，没有括号是无用的 # `$forceUpdate()` 更新方法 ~~~ vm.$forceUpdate() ~~~ # `$nextTick()` 数据修改方法当Vue构造器里的data值被修改完成后会调用这个方法，也相当于一个钩子函数吧，和构造器里的updated生命周期很像。 ~~~ function tick(){ vm.message="update message info "; vm.$nextTick(function(){ console.log('message更新完后我被调用了'); }) } ~~~ ~~~ <body> <div id="app"> {{message}} </div> <button onclick="tick()">更新</button> </body> <script type="text/javascript"> var jspang = Vue.extend({ template: `<p>{{message}}</p>`, data: function () { return { message: 'hello vue' } }, updated: function () { console.log("更新钩子函数被调用了"); } }); var vm = new jspang().$mount("#app"); function tick() { vm.message = "update message"; vm.$nextTick(function () { console.log('message更新完,我被调用了'); }) } </script> ~~~