實例方法 · 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> ~~~