vue組件的示例
阿新 • • 發佈：2018-11-19
clas reat times his 分享 pan tex temp itl
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> <!-- 單擊就增加數字 --> <scriptsrc="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>` }
顯示的結果：
vue組件的示例