技术QQ交流群:294088839
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 实例方法</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <h1>Vue 实例方法</h1> <hr> <div id="app"> </div> <p><button onclick="destroy()">卸载</button></p> <p><button onclick="reload()">刷新</button></p> <p><button onclick="tick()">修改</button></p> </body> </html> <script> var whl=Vue.extend({ template:`<p>{{info}}</p>`, //扩展的直接写对象是不行的 必须用匿名函数来命名数据 data:function () { return{ info:'我是中国人' } }, //挂载的时候执行 mounted:function () { console.log('我是挂载的时候触发') }, //删除的时候触发 destroyed:function () { console.log('我是卸载的时候触发') }, //被更新的时候触发 updated:function () { console.log('我是更新之后触发') } }) //构造 挂载方法 $mount var vm = new whl().$mount('#app') function destroy(){ // 销毁 $destroy vm.$destroy(); } function reload(){ //刷新的方法 vm.$forceUpdate() } //数据修改方法 function tick(){ vm.info='我更新该了'; vm.$nextTick(function(){ console.log('info更新完了 调用') }) } </script>