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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
MOD_MTB_NEWS_RECENT
เจอปัญหา cannot write to log file pg_upgrade_internal.log ตอนอัพเกรด postgresql
โดย mindphp พฤ 27 ก.ค. 2017 7:21 pm บอร์ด Linux - Web Server
1
8
พฤ 27 ก.ค. 2017 7:21 pm โดย mindphp
สถาบันเทคโนโลยีไทย-ญี่ปุ่น เปิดรับสมัครนักศึกษาใหม่ ป.โท ภาคเรียนที่ 2 ประจำปีการศึกษา 2560 วันนี้ – 4 ต.ค.60
โดย gradtni พฤ 27 ก.ค. 2017 5:06 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
19
พฤ 27 ก.ค. 2017 5:06 pm โดย gradtni
สอบถามปัญหาการเรียกใช้ css ใน phpbb ค่ะ
โดย Ik Kat พฤ 27 ก.ค. 2017 1:48 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
4
24
พฤ 27 ก.ค. 2017 1:48 pm โดย thatsawan
สอบถามเรื่อง json กับ php ครับ
โดย pookpix พฤ 27 ก.ค. 2017 8:55 am บอร์ด Programming - PHP
1
12
พฤ 27 ก.ค. 2017 8:55 am โดย mindphp
สินค้าไม่ขึ้นตามที่ต้องการ
โดย บุคคลทั่วไป พ 26 ก.ค. 2017 7:52 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
18
พ 26 ก.ค. 2017 7:52 pm โดย บุคคลทั่วไป
Visibility การกำหนดสิทธิ์ในการเข้าถึงตัวแปร
โดย Ik Kat พ 26 ก.ค. 2017 4:14 pm บอร์ด PHP Knowledge
0
19
พ 26 ก.ค. 2017 4:14 pm โดย Ik Kat
วิธีการสร้าง Function ใช้เอง
โดย Ik Kat พ 26 ก.ค. 2017 3:44 pm บอร์ด PHP Knowledge
0
20
พ 26 ก.ค. 2017 3:44 pm โดย Ik Kat
วิธีการเรียกใช้งาน Class และ Method
โดย Ik Kat พ 26 ก.ค. 2017 3:07 pm บอร์ด PHP Knowledge
0
9
พ 26 ก.ค. 2017 3:07 pm โดย Ik Kat
ไม่สามารถตั้งรอบระยเวลาบัญชีของโปรแกรมบัญชีสรรพากร
โดย บุคคลทั่วไป พ 26 ก.ค. 2017 2:58 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
1
9
พ 26 ก.ค. 2017 2:58 pm โดย บุคคลทั่วไป
วิธีการใช้งาน Array Function เบื้องต้น
โดย Ik Kat พ 26 ก.ค. 2017 2:39 pm บอร์ด PHP Knowledge
0
14
พ 26 ก.ค. 2017 2:39 pm โดย Ik Kat
วิธีการใช้งาน Date Time Function เบื้องต้น
โดย Ik Kat พ 26 ก.ค. 2017 2:11 pm บอร์ด PHP Knowledge
0
13
พ 26 ก.ค. 2017 2:11 pm โดย Ik Kat
วิธีการใช้งาน Math Function เบื้องต้น
โดย Ik Kat พ 26 ก.ค. 2017 1:33 pm บอร์ด PHP Knowledge
0
14
พ 26 ก.ค. 2017 1:33 pm โดย Ik Kat
วิธีการใช้งาน String Function เบื้องต้น
โดย Ik Kat พ 26 ก.ค. 2017 1:10 pm บอร์ด PHP Knowledge
0
11
พ 26 ก.ค. 2017 1:10 pm โดย Ik Kat
ความหมายของฟังก์ชั่น PHP ที่ควรรู้จัก
โดย Ik Kat พ 26 ก.ค. 2017 11:42 am บอร์ด PHP Knowledge
0
18
พ 26 ก.ค. 2017 11:42 am โดย Ik Kat
การ Export รายงานสรุปยอดซื้อ ในโปรแกรมบัญชี Express
โดย pleng พ 26 ก.ค. 2017 10:51 am บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
14
พ 26 ก.ค. 2017 10:51 am โดย pleng
Joomla ออกเวอร์ชั่น 3.7.4 Fix Bug เรื่องความปลอดภัย 2 จุดใหญ่ และ Error ในเวอร์ชั่นก่อนหน้า
โดย mindphp พ 26 ก.ค. 2017 6:51 am บอร์ด PHP News
0
18
พ 26 ก.ค. 2017 6:51 am โดย mindphp
ผมใช้ Odoo9 ผมทำการ Restor มันนานมั้งใช้เวลาเป็นวันเลยครับ
โดย nuattawoot อ 25 ก.ค. 2017 7:58 pm บอร์ด Odoo
2
8
อ 25 ก.ค. 2017 8:23 pm โดย mindphp
ทำไมฉันเข้าเฟสบุกของฉันต้องมีคำว่าเฟสม่ต
โดย คูกูหาที่เกีดบ่อได้ ต้องทำใจรอเนื้อคู่ อ 25 ก.ค. 2017 7:40 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
20
อ 25 ก.ค. 2017 7:40 pm โดย คูกูหาที่เกีดบ่อได้ ต้องทำใจรอเนื้อคู่
รบกวนสอบถามปัญหา SSL กับ woocommerce theme หน่อยครับ
โดย permchai อ 25 ก.ค. 2017 6:55 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
3
19
อ 25 ก.ค. 2017 6:55 pm โดย mindphp
รบกวนสอบถามเกี่ยวกับ SSL กับ woocommerce ครับ
โดย permchai อ 25 ก.ค. 2017 6:51 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
14
อ 25 ก.ค. 2017 6:51 pm โดย permchai