1、第一步,双击打开HBuilderX工具,新建静态页面并引入vue.js文件,如下图所示:
2、第二步,在主体标签元素中插入div标签和label标签,并在label标签绑定showNames,如下图所示:
3、第三步,在vue.js实例化函数中,给showNames赋值,注意调用对应的DOM,如下图所示:
4、第四步,在methods方法中,定义函数destoryDOM,并调用$destory()方法,如下图所示:
5、第五步,然后依次添加beforeDestroy()和destroyed()方法,查看打印结果,如下图所示:
6、第六步,在label标签下方,添加一个button,并绑定对应的事件,如下图所示: