Skip to main content

Askboon

Vuejs แบบดิบๆ

พอเริ่มเรียนภาษาหรือเฟรมเวิร์คอะไรใหม่ๆก็ต้องเริ่มจากพื้นฐานก่อนครับ อย่างเช่น VueJS นี่ก็เริ่มแบบไฟล์เดียวโดยไม่ต้องลง Vue CLI เลย

ตัวอย่าง Code แบบง่ายๆ

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
  <body>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/moment"></script>
    <div id="app">
      <p>{{ hello }}</p>
      <p>Now: <span class="beauty_time">{{ time_now }}</span></p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: { 
            	hello: 'Hello Boon!',
				time_now: "",
            },
			methods: {
        	 	refreshTime() {
        	 		this.time_now = moment();
        			setTimeout ( this.refreshTime,1000 )
        			},
        	},
        	mounted: function() {
  				this.refreshTime()
  			}
        })
    </script>
    <style>
    	.beauty_time {
    		background-color: teal;
    		color: white;
    	}
    </style>
  </body>
</html>

ผลลัพธ์ก็จะได้นาฬิการแบบเรียลไทม์ ตามรูปด้านล่างนี้ครับ