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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ทำความรู้จักกับ Google Lighthouse ตรวจสอบคุณภาพเว็บไซต์
โดย birdkritsna พฤ 19 ก.ย. 2019 6:37 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
6
พฤ 19 ก.ย. 2019 6:37 pm โดย birdkritsna
ส่วนประกอบของเว็บไซต์ มีอะไรบ้าง
โดย aninthana พฤ 19 ก.ย. 2019 6:12 pm บอร์ด Web Hosting Review - Free Host Share Host VPS
0
7
พฤ 19 ก.ย. 2019 6:12 pm โดย aninthana
วิธีทำภาพให้มีขอบโค้งมนด้วยโปรแกรม คล้าย photoshop ออนไลน์ freephototool.com
โดย jamepiyawat พฤ 19 ก.ย. 2019 5:51 pm บอร์ด Graphic design
1
12
พฤ 19 ก.ย. 2019 11:15 pm โดย pipoipi
วิธีการอัพเกรด Ubuntu server เพื่อให้ support และ เพิ่มความสามารถใหม่ๆ ของระบบปฏิบัติการ
โดย jirawoot พฤ 19 ก.ย. 2019 4:14 pm บอร์ด Linux - Web Server
1
14
ศ 20 ก.ย. 2019 12:06 am โดย cocomax
form มันซ้อนกันอยู่ทำให้ form ที่อยู่ด้านในส่งข้อมูลไม่ได้ทำยังไงดี ครับ
โดย jamepiyawat พฤ 19 ก.ย. 2019 3:57 pm บอร์ด Programming - PHP
2
11
พฤ 19 ก.ย. 2019 4:20 pm โดย jamepiyawat
R - Template และ laout
โดย mindphp พฤ 19 ก.ย. 2019 3:13 pm บอร์ด buildinstore - Manual & Content Web
0
1
พฤ 19 ก.ย. 2019 3:13 pm โดย mindphp
G - subdomain ที่จะไปอยู่ที่เว็บไซต์อื่น
โดย mindphp พฤ 19 ก.ย. 2019 3:12 pm บอร์ด Buildin - Tester
0
1
พฤ 19 ก.ย. 2019 3:12 pm โดย mindphp
เฟสบุ๊แฟนเพจ กับ ทำเว็บไซต์ให้คนเข้า อะไรคุ้มกว่าในระยะยาว
โดย zend_framework พฤ 19 ก.ย. 2019 11:06 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
5
พฤ 19 ก.ย. 2019 11:06 am โดย zend_framework
Q - อยากทราบวิธีการดึงค่า api มาใช้อย่างไรครับ
โดย birdkritsna พฤ 19 ก.ย. 2019 10:50 am บอร์ด Programming - PHP
5
38
พฤ 19 ก.ย. 2019 6:25 pm โดย birdkritsna
งานประจำวันที่ 19 กันยายน 2562
โดย Patipat พฤ 19 ก.ย. 2019 10:49 am บอร์ด M088 - ปฏิภัทร สารธรรม
1
4
พฤ 19 ก.ย. 2019 7:22 pm โดย Patipat
อยากทราบวฺิธีการทำปุ่มเพิ่มตัวเลย ครับ
โดย jamepiyawat พฤ 19 ก.ย. 2019 10:39 am บอร์ด Programming - PHP
6
35
พฤ 19 ก.ย. 2019 6:44 pm โดย jamepiyawat
งานประจำวันที่ 19 กันยายน 2562
โดย birdkritsna พฤ 19 ก.ย. 2019 10:19 am บอร์ด M094 - กฤษณะ จะโรจน์รัมย์
1
10
พฤ 19 ก.ย. 2019 7:44 pm โดย birdkritsna
งานประจำวันที่ 19 กันยายน 2562
โดย jamepiyawat พฤ 19 ก.ย. 2019 10:09 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
2
12
พฤ 19 ก.ย. 2019 7:36 pm โดย jamepiyawat
งานประจำวันที่ 19 กันยายน 2562
โดย aninthana พฤ 19 ก.ย. 2019 10:04 am บอร์ด M092 - อนินธนา บุญยัง
1
8
พฤ 19 ก.ย. 2019 7:04 pm โดย aninthana
งานประจำวันที่ 19 กันยายน 2562
โดย jirawoot พฤ 19 ก.ย. 2019 10:03 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
1
3
พฤ 19 ก.ย. 2019 8:34 pm โดย jirawoot
ถ้าจะให้้มีคนกดซับเพิ่มขึ่นต้องทำไง
โดย totzazx789 พ 18 ก.ย. 2019 10:40 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
17
พ 18 ก.ย. 2019 10:40 pm โดย totzazx789
สอบถามเกี่ยวกับ list ใน Tkinter ค่ะ
โดย mashato พ 18 ก.ย. 2019 8:45 pm บอร์ด Programming - C/C++ & java & Python
0
15
พ 18 ก.ย. 2019 8:45 pm โดย mashato
ทำกราฟ เปรียบเทียบ ค่าธรรมเนียมของแต่ละธนาคาร
โดย chatee supasand พ 18 ก.ย. 2019 7:24 pm บอร์ด MT33 - นายชาตรี สุภาแสน
1
7
พ 18 ก.ย. 2019 7:29 pm โดย mindphp
ทำไมต้องอัพเกรดและวิธีอัพเกรด Ubuntu
โดย jirawoot พ 18 ก.ย. 2019 7:02 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
20
พ 18 ก.ย. 2019 7:02 pm โดย jirawoot
Adobe Premiere Pro เปิดตัวฟีเจอร์ปรับขนาดเฟรมวิดีโออัตโนมัติด้วย AI รองรับโซเชียลแอป
โดย birdkritsna พ 18 ก.ย. 2019 6:05 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
27
พ 18 ก.ย. 2019 6:05 pm โดย birdkritsna