HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <script src="js/vue.js" type="text/javascript"> </script> </head> <body> <div id="app"> <h2>组件示例</h2> <div> <inbutton></inbutton> <clock></clock> </div> </div> <!-- 单击就增加数字 --> <script src="js/inbutton.js"></script> <!-- 时钟的组件 --> <script src="js/clock.js"></script> <script> Vue.component(‘clock‘, myclock); Vue.component(‘inbutton‘, mybutton); var vm = new Vue({ el: ‘#app‘ }); </script> </body> </html>
js
//时钟的组件 var myclock = { data() { return { date: new Date().toLocaleTimeString(), _timer: ‘‘ } }, created() { this._timer = setInterval(this.updateTime, 1000); }, methods: { updateTime() { this.date = new Date().toLocaleTimeString(); } }, //销毁创建的更新的时间,不然占用内存 beforeDestroy() { this._timer.cancel(); }, template: `<h2>现在时间：{{date}}</h2>` }
显示的结果：
原文：https://www.cnblogs.com/YouAreABug/p/9982155.html