ให้เรตสมาชิก: 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 ใด

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
มีส่วนเสริมตัวไหนทำระบบแจ้งผลการเรียนได้ไหมครับ
โดย toonytoony2004 จ 25 มี.ค. 2019 8:33 pm บอร์ด Joomla Development
0
11
จ 25 มี.ค. 2019 8:33 pm โดย toonytoony2004
วันนี้กินอะไรดี
โดย สริญญา สมสา จ 25 มี.ค. 2019 6:16 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
18
จ 25 มี.ค. 2019 6:16 pm โดย สริญญา สมสา
CSS Tips : การไล่ระดับสีด้วย CSS
โดย abdkode จ 25 มี.ค. 2019 5:17 pm บอร์ด CSS Knowledge
0
11
จ 25 มี.ค. 2019 5:17 pm โดย abdkode
ผมรัน Python27 แล้ว Error ImportError: No module named client ลองติดตั้ง pip client แล้วยังเหมือนเดิมครับ
โดย tatiya จ 25 มี.ค. 2019 5:09 pm บอร์ด Programming - C/C++ & java & Python
1
42
จ 25 มี.ค. 2019 5:12 pm โดย tatiya
วีดีโอภาษีอีเพย์เมนต์
โดย สริญญา สมสา จ 25 มี.ค. 2019 5:05 pm บอร์ด MT32 - นางสาวสริญญา สมสา
0
1
จ 25 มี.ค. 2019 5:05 pm โดย สริญญา สมสา
วิธีดึงข้อมูล API ธนาคารเเห่งประเทศไทย ด้วย Python
โดย tatiya จ 25 มี.ค. 2019 4:27 pm บอร์ด Programming - C/C++ & java & Python
0
20
จ 25 มี.ค. 2019 4:27 pm โดย tatiya
กฎหมายภาษีอีเพย์เมนต์
โดย สริญญา สมสา จ 25 มี.ค. 2019 1:47 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
16
จ 25 มี.ค. 2019 1:47 pm โดย สริญญา สมสา
วิธีการเปิดใช้งาน การตอบกลับด่วย ใน เว็บบอร์ด phpbb
โดย Ittichai_chupol จ 25 มี.ค. 2019 11:45 am บอร์ด PHP Knowledge
0
9
จ 25 มี.ค. 2019 11:45 am โดย Ittichai_chupol
วิธีแก้ไข การ import ฐานข้อมูล ที่ server ต่าง vesion กัน ทำยังไงครับ
โดย beking2539 จ 25 มี.ค. 2019 11:44 am บอร์ด SQL - Database
0
21
จ 25 มี.ค. 2019 11:44 am โดย beking2539
งานประจำวันที่ 25 มีนาคม 2562
โดย สริญญา สมสา จ 25 มี.ค. 2019 9:49 am บอร์ด MT32 - นางสาวสริญญา สมสา
1
2
จ 25 มี.ค. 2019 10:01 am โดย สริญญา สมสา
งานประจำวันที่ 25 มีนาคม 2562
โดย napharat079 จ 25 มี.ค. 2019 9:42 am บอร์ด M079 - นภารัตน์ ฐิติกรโกวิท
1
2
จ 25 มี.ค. 2019 7:00 pm โดย napharat079
ฟุตบอล-บาสเกตบอล
โดย Nhani ส 23 มี.ค. 2019 7:56 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
32
ส 23 มี.ค. 2019 7:56 pm โดย Nhani
export jar ไปใช้เครื่องอื่นพร้อม database
โดย Saharat Saharat ส 23 มี.ค. 2019 6:46 pm บอร์ด Programming - C/C++ & java & Python
0
54
ส 23 มี.ค. 2019 6:46 pm โดย Saharat Saharat
งานประจำวันที่ 23 มีนาคม 2562
โดย napharat079 ส 23 มี.ค. 2019 9:41 am บอร์ด M079 - นภารัตน์ ฐิติกรโกวิท
3
10
ส 23 มี.ค. 2019 7:08 pm โดย napharat079
งานประจำวันที่ 23 มีนาคม 2562
โดย Four ส 23 มี.ค. 2019 9:08 am บอร์ด M077 - อิษยา งามสอาด
2
5
จ 25 มี.ค. 2019 10:25 am โดย thatsawan
Q - ผมติดตั้ง โมดูลฟอนต์ (oecn_base_fonts) ไม่ได้ ปัญหานี้เกิดบนเครื่อง Ubuntu 16.04 นะครับ
โดย tatiya ศ 22 มี.ค. 2019 5:51 pm บอร์ด OpenERP - MD-ERP
1
7
ศ 22 มี.ค. 2019 6:08 pm โดย tatiya
วิธีทำให้ผมสวย
โดย สริญญา สมสา ศ 22 มี.ค. 2019 3:30 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
47
ส 23 มี.ค. 2019 7:51 pm โดย Nhani
วิธีสร้าง color palette จากรูปภาพของตัวเองได้ง่ายๆไม่ซ่ำใคร
โดย napharat079 ศ 22 มี.ค. 2019 3:28 pm บอร์ด Graphic design
0
45
ศ 22 มี.ค. 2019 3:28 pm โดย napharat079
อยากทราบวิธีการ เปลี่ยน รูป icon ที่ Tab ของ Browser บน เว็บบอร์ด phpbb
โดย Ittichai_chupol ศ 22 มี.ค. 2019 3:28 pm บอร์ด Programming - PHP
1
50
ศ 22 มี.ค. 2019 3:34 pm โดย mindphp
Stedia Google Game Platform คืออะไร
โดย Ittichai_chupol ศ 22 มี.ค. 2019 2:36 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
54
ศ 22 มี.ค. 2019 2:36 pm โดย Ittichai_chupol