ให้เรตสมาชิก: 5 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 

Vue.js เป็น Framework ที่ใช้จัดการส่วนติดต่อผู้ใช้ (UI)

Vue.js : Framework

 

         Vue.js พัฒนาโดย Evan You ที่เป็นอดีตทีมพัฒนา Meteor Framework ของ Google โดยมีการพยายามทำให้ Vue.js มีความเรียบง่ายในการใช้งานให้มากที่สุด

        Vue.js เป็นการผสมผสานกันระหว่าง AngularJS กับ React เพื่อสร้างเป็น Reactive Component ขึ้นมา โดยที่ไลบารี่หลักนั้นจะเน้นไปที่เลเยอร์ View เท่านั้น นอกจากนั้น Vue.js ยังมีความสามารถในการใช้งานแอพพลิเคชั่น Single-Page ที่มีความซับซ้อนได้อีกด้วย ในส่วนของ Reactive นั้นคือ การโต้ตอบแบบทันที กล่าวคือถ้าหากค่าตัวแปรใดตัวแปรหนึ่งใน DOM มีการเปลี่ยนแปลง ตัวแปรนั้นก็จะสามารถเปลี่ยนได้ทันทีโดยไม่ต้องเช็คว่าตัวแปรใดถูกเปลี่ยน

 

ตัวอย่างการเรียกใช้งาน Vue.js :

<script src="https://unpkg.com/vue"></script>

 

การแสดงข้อมูล DOM :

- .html

<div id="app">
  {{ message }}
</div>

- .js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Output :

Hello Vue!

 

การเชื่อมโยง Attributes :

- .html

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

- .js

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date()
  }
})

Output :

 

Hover your mouse over me for a few seconds to see my dynamically bound title!

 

การทำงานแบบมีเงื่อนไขและทำซ้ำ :

- .html

<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>

- .js

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

Output :

Now you see me

 

ตัวอย่างการใช้งาน v-for :

- .html

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

- .js

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

Output :

1. Learn JavaScript

2. Learn Vue

3. Build something awesome

 

ตัวอย่างการใช้งาน v-on : เพื่อติดต่อกับผู้ใช้

- .html

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

- .js

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

 

ตัวอย่างการใช้งาน v-model : เพื่อกรอกข้อมูล

- .html

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

- .js

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

 

        ในการเลือกใช้งาน Framework ในแต่ล่ะตัวนั้นมีความแตกต่างกันออกไป ซึ่งอาจะขึ้นอยู่กับปัจจัยหลายอย่าง ทั้งความถนัดที่แตกต่างกัน ความต้องการและความยากง่ายของงานนั้น ๆ ทั้งนี้ก็ขึ้นอยู่กับตัวอยู่ใช้เองว่าชอบหรือถูกใจ Framework ใด

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
สรุปความรู้จากวีดีโอการสร้างเทมเพลต
โดย tai14 จ 20 ส.ค. 2018 7:44 pm บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
0
2
จ 20 ส.ค. 2018 7:44 pm โดย tai14
แนะนำตัวช่วยในการ หาคำที่มีจำนวนการใช้งานมากที่สุด
โดย tatiya จ 20 ส.ค. 2018 4:54 pm บอร์ด Python Knowledge
0
11
จ 20 ส.ค. 2018 4:54 pm โดย tatiya
ตัวอย่างการใช้ Match Fuction
โดย tai14 จ 20 ส.ค. 2018 4:29 pm บอร์ด PHP Knowledge
0
8
จ 20 ส.ค. 2018 4:29 pm โดย tai14
ทำความรู้จักกับ Built-in Functions
โดย tai14 จ 20 ส.ค. 2018 3:40 pm บอร์ด PHP Knowledge
0
8
จ 20 ส.ค. 2018 3:40 pm โดย tai14
กลุ่มคำสั่งการทำงานซ้ำ
โดย tai14 จ 20 ส.ค. 2018 11:51 am บอร์ด PHP Knowledge
0
14
จ 20 ส.ค. 2018 11:51 am โดย tai14
ใบเสร็จรับเงินจาก POS แสดงเลขที่ Invoice ไม่ถูกต้อง [2018-08][006]
โดย AePongsak จ 20 ส.ค. 2018 10:54 am บอร์ด Hachanna - Testter
2
13
จ 20 ส.ค. 2018 5:18 pm โดย AePongsak
งานประจำวันที่ 20 สิงหาคม 2561
โดย Lamduan จ 20 ส.ค. 2018 10:23 am บอร์ด M066 - นางสาวลำดวน พันโอดเบี้ย
0
4
จ 20 ส.ค. 2018 10:23 am โดย Lamduan
งานที่ต้องทำประจำวันที่ 20 สิงหาคม 2561
โดย tai14 จ 20 ส.ค. 2018 10:18 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
4
15
จ 20 ส.ค. 2018 8:21 pm โดย thatsawan
งานประจำวันที่ 20 สิงหาคม 2561
โดย tatiya จ 20 ส.ค. 2018 10:13 am บอร์ด M065 - ตติยะ นาชัย
1
4
จ 20 ส.ค. 2018 7:34 pm โดย tatiya
งานประจำวันที่ 20 สิงหาคม 2561
โดย pprn จ 20 ส.ค. 2018 10:11 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
7
จ 20 ส.ค. 2018 7:37 pm โดย pprn
งานประจำวันที่ 20 สิงหาคม 2561
โดย prakon จ 20 ส.ค. 2018 10:07 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
16
จ 20 ส.ค. 2018 10:07 am โดย prakon
B - Period Payment หน้าทำใบเสนอราคาต้องอยู่ ที่ tab แรก และเป็นราคาหลังรวม vat แล้ว
โดย mindphp จ 20 ส.ค. 2018 3:42 am บอร์ด M.D.Soft Co.,Ltd. - Tester
0
2
จ 20 ส.ค. 2018 3:42 am โดย mindphp
Q-สอบถามครับตอนนี้ผมติดปัญหา EnvironmentError: [Errno 13] Permission denied:
โดย tatiya อ 19 ส.ค. 2018 10:41 pm บอร์ด Programming - C/C++ & java & Python
2
28
จ 20 ส.ค. 2018 6:21 am โดย tatiya
วิธีแก้ปัญหา 'pip' is not recognized as an internal or external command, operable program or batch file
โดย tatiya อ 19 ส.ค. 2018 9:56 pm บอร์ด Python Knowledge
0
13
อ 19 ส.ค. 2018 9:56 pm โดย tatiya
สอบถามวิธีติดตั้งตัว module pythainlp ครับ
โดย tatiya อ 19 ส.ค. 2018 5:41 pm บอร์ด Programming - C/C++ & java & Python
3
25
อ 19 ส.ค. 2018 8:10 pm โดย mindphp
สอบถามวิธีการใส่ค่าที่ต้องการใน type="number" เป็นตัวเลขได้ทั้งบวก ลบ และทศนิยมที่มีค่าเป็นบวกและลบ แต่ไม่เอา 0 ค่ะ
โดย pprn ส 18 ส.ค. 2018 8:14 pm บอร์ด HTML CSS
1
26
อ 19 ส.ค. 2018 5:15 pm โดย mindphp
B - หน้า Contact ของลูกค้ามีปุ่มติ๊กเกินมา
โดย thatsawan ส 18 ส.ค. 2018 6:59 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
3
ส 18 ส.ค. 2018 6:59 pm โดย thatsawan
อบรมระบบ ERP Odoo 11 ครั้งที่ 30 วันที่ 18 สิงหาคม 2561
โดย Lamduan ส 18 ส.ค. 2018 6:58 pm บอร์ด M066 - นางสาวลำดวน พันโอดเบี้ย
0
5
ส 18 ส.ค. 2018 6:58 pm โดย Lamduan
สอบถามวิธีการคำนวณหา Rate ค่ะ
โดย pprn ส 18 ส.ค. 2018 6:51 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
22
ส 18 ส.ค. 2018 6:51 pm โดย pprn
B - ฐานจริง User M017 สร้าง inv จากหน้า sale ไม่ได้
โดย thatsawan ส 18 ส.ค. 2018 4:57 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
2
ส 18 ส.ค. 2018 4:57 pm โดย thatsawan