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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
File Server คืออะไร
โดย Patcharanan.0399 พฤ 26 เม.ย. 2018 6:30 pm บอร์ด Share Knowledge
0
4
พฤ 26 เม.ย. 2018 6:30 pm โดย Patcharanan.0399
การทำงานของหน่วยประมวลผลกลางของ CPU (ซีพียู)
โดย Patcharanan.0399 พฤ 26 เม.ย. 2018 5:48 pm บอร์ด Share Knowledge
0
5
พฤ 26 เม.ย. 2018 5:48 pm โดย Patcharanan.0399
ขั้นตอนวิธีการใช้งาน GitLap
โดย Patcharanan.0399 พฤ 26 เม.ย. 2018 4:52 pm บอร์ด Python Knowledge
1
5
พฤ 26 เม.ย. 2018 5:09 pm โดย Patcharanan.0399
ขั้นตอนวิธีใช้งาน GitLab
โดย Patcharanan.0399 พฤ 26 เม.ย. 2018 3:58 pm บอร์ด Programming - C/C++ & java & Python
1
19
พฤ 26 เม.ย. 2018 4:00 pm โดย mindphp
Mators เราคือผู้ให้บริการ
โดย annny853 พฤ 26 เม.ย. 2018 12:23 pm บอร์ด Programming - PHP
0
13
พฤ 26 เม.ย. 2018 12:23 pm โดย annny853
[ปัญหา] ภาษาไทยใน Netbeans ไม่สามารถอ่านได้ค่ะ
โดย Patcharanan.0399 พฤ 26 เม.ย. 2018 11:32 am บอร์ด Programming - C/C++ & java & Python
4
21
ศ 27 เม.ย. 2018 12:05 am โดย mindphp
สอบถามผู้รู้ เกี่ยวกับ Ubuntu ช้าครับ
โดย AePongsak พ 25 เม.ย. 2018 7:06 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
11
พ 25 เม.ย. 2018 7:06 pm โดย AePongsak
Internet (อินเทอร์เน็ต), Intranet(อินทราเน็ต), Extranet(เอกซ์ทราเน็ต) เชื่องโยงกันอย่างไร
โดย Patcharanan.0399 พ 25 เม.ย. 2018 3:38 pm บอร์ด Share Knowledge
0
22
พ 25 เม.ย. 2018 3:38 pm โดย Patcharanan.0399
วิธีการคำนวน Network, Host
โดย Patcharanan.0399 พ 25 เม.ย. 2018 3:01 pm บอร์ด Share Knowledge
0
15
พ 25 เม.ย. 2018 3:01 pm โดย Patcharanan.0399
ช่วยด้วยค่ะ กด Start MySql ใน XAMPP ไม่ได้ รบกวนผู้รู้ช่วยตอบทีค่ะ
โดย Too ZoZad พ 25 เม.ย. 2018 2:39 pm บอร์ด Programming - PHP
0
14
พ 25 เม.ย. 2018 2:39 pm โดย Too ZoZad
โชว์ HDD Docking Station โคลนดืสได้
โดย Akk Chu พ 25 เม.ย. 2018 2:26 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
13
พฤ 26 เม.ย. 2018 11:43 am โดย Nestycar
IP แบบนี้หมายความว่าอย่างไร 127.0.0.1/32, ::1/128
โดย Anonymous พ 25 เม.ย. 2018 6:36 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
18
พ 25 เม.ย. 2018 10:58 am โดย Patcharanan.0399
ปรโยชน์ และองค์ประกอบของ Intranet (อินทราเน็ต)..!
โดย Patcharanan.0399 อ 24 เม.ย. 2018 6:27 pm บอร์ด Share Knowledge
0
17
อ 24 เม.ย. 2018 6:27 pm โดย Patcharanan.0399
while(list($key, $value) = each ไม่ทำงาน เปลี่ยนเป็น foreach($_POST[id2] as $key => $value)
โดย Anonymous จ 23 เม.ย. 2018 10:14 pm บอร์ด Programming - PHP
2
29
พ 25 เม.ย. 2018 3:43 am โดย mindphp
จะทำให้เว็บฟอรั่มออนไลน์ได้ไหมครับ?
โดย Anonymous จ 23 เม.ย. 2018 1:52 pm บอร์ด Programming - PHP
0
26
จ 23 เม.ย. 2018 1:52 pm โดย บุคคลทั่วไป
รูปแบบการทำงานของ NAT มีอะไรบ้าง
โดย Patcharanan.0399 ศ 20 เม.ย. 2018 5:14 pm บอร์ด Share Knowledge
0
70
ศ 20 เม.ย. 2018 5:14 pm โดย Patcharanan.0399
ส่วนที่ไม่เข้าใจในบทความ Module MD Client History
โดย alisa93 ศ 20 เม.ย. 2018 4:56 pm บอร์ด Mobile Programming - Android, iOS, Window Phone
2
51
ศ 20 เม.ย. 2018 5:56 pm โดย alisa93
Loopback คืออะไร
โดย Patcharanan.0399 ศ 20 เม.ย. 2018 4:21 pm บอร์ด Share Knowledge
0
47
ศ 20 เม.ย. 2018 4:21 pm โดย Patcharanan.0399
สอบถามเรื่อง SQL การ SELECT id
โดย AePongsak ศ 20 เม.ย. 2018 4:21 pm บอร์ด SQL - Database
5
94
ศ 20 เม.ย. 2018 5:05 pm โดย AePongsak
Q - ติดตั้งโมดูลแล้วไฟล์ภาษาหาย
โดย Parichat ศ 20 เม.ย. 2018 3:52 pm บอร์ด Joomla Development
2
42
ศ 20 เม.ย. 2018 4:20 pm โดย Parichat