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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
แนะนำบริการ hosting จาก Hostneverdie
โดย tumsailom อ 05 เม.ย. 2020 7:58 pm บอร์ด Web Hosting Review - Free Host Share Host VPS
0
10
อ 05 เม.ย. 2020 7:58 pm โดย tumsailom
อยากทราบถ้าหากต้องการที่ทดสอบการทำงานของของ Event cron จะต้องทำอย่างไรบางครับ
โดย Ittichai_chupol ส 04 เม.ย. 2020 10:50 am บอร์ด Programming - PHP
0
26
ส 04 เม.ย. 2020 10:50 am โดย Ittichai_chupol
เทมเพลต Megadeal ของ MooZiiCart สำหรับทำเว็บขายสินค้าออนไลน์
โดย prmindphp ศ 03 เม.ย. 2020 6:39 pm บอร์ด MindPHP News & Feedback
0
38
ศ 03 เม.ย. 2020 6:39 pm โดย prmindphp
เครื่องมือช่วยกรองสินค้า สำหรับค้นหาสินค้าที่ต้องการ
โดย prmindphp พฤ 02 เม.ย. 2020 6:46 pm บอร์ด MindPHP News & Feedback
0
48
พฤ 02 เม.ย. 2020 6:46 pm โดย prmindphp
การเขียน Script สำหรับสร้าง User ใน Joomla
โดย tsukasaz พฤ 02 เม.ย. 2020 3:33 pm บอร์ด Joomla Developing Knowledge
0
99
พฤ 02 เม.ย. 2020 3:33 pm โดย tsukasaz
อยากทราบวิธีการดึงข้อมูลจาก Excel โดยการดึงข้อมูลจาก คอลัมของ Excel มาบันทึกลงในฐานข้อมูล
โดย Ittichai_chupol พฤ 02 เม.ย. 2020 10:09 am บอร์ด Programming - PHP
1
85
พฤ 02 เม.ย. 2020 10:43 am โดย mindphp
เอ้าๆ ใครที่ใบขับขี่หมดอายุในช่วง COVID-19 สามารถอมรมผ่านออนไลน์ ด้วย e-learning ได้เเล้วนะ
โดย thatsawan พฤ 02 เม.ย. 2020 10:09 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
53
พฤ 02 เม.ย. 2020 10:09 am โดย thatsawan
วิธีการเชื่อม api ของ gitlab สำหรับดาวน์โหลดไฟล์ project ใน ภาษา Python
โดย jirawoot พ 01 เม.ย. 2020 3:38 pm บอร์ด Python Knowledge
0
117
พ 01 เม.ย. 2020 3:38 pm โดย jirawoot
สอบถาม ผมจะทำ ci ของ gitlab ผมดูดไฟล์ project จาก api ของ gitlab ได้แล้วทำอย่างไรต่อครับ
โดย jirawoot พ 01 เม.ย. 2020 12:09 pm บอร์ด Programming - C/C++ & java & Python
3
91
พฤ 02 เม.ย. 2020 10:50 am โดย tsukasaz
ผมอัพเกรด joomla 2.5 เป็นเวอร์ชั่นล่าสุด 3.8 หน้าเว็บเวอร์ชั่นเดิมจะหายไปไหมคับ
โดย Anonymous พ 01 เม.ย. 2020 12:00 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
3
66
พ 01 เม.ย. 2020 4:29 pm โดย icphp
ลดอัตราหัก ณ ที่จ่าย เหลือ 1.5% ออกเป็นกฎหมายมีผลใช้บังคับแล้ว!!! นะ เริ่ม 1 เมษายน 2563
โดย thatsawan พ 01 เม.ย. 2020 10:54 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
88
พ 01 เม.ย. 2020 10:54 am โดย thatsawan
วิธีการจัดการกับเด็กๆ กวนใจ เมื่อต้องทำงานจากบ้าน #Work from home
โดย thatsawan พ 01 เม.ย. 2020 9:53 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
51
พ 01 เม.ย. 2020 9:53 am โดย thatsawan
วิธีแก้ไขปัญหา สำหรับ การนำ Template phpbb 3.3 มาใช้ใน phpbb 3.2
โดย thatsawan อ 31 มี.ค. 2020 7:27 pm บอร์ด phpBB user Guide Knowledge
0
125
อ 31 มี.ค. 2020 7:27 pm โดย thatsawan
สอบถาม ผมลองใช้ curl ของ API ของ gitlab แล้ว "message":"401 Unauthorized ครับ
โดย jirawoot อ 31 มี.ค. 2020 5:16 pm บอร์ด Programming - C/C++ & java & Python
1
213
อ 31 มี.ค. 2020 5:35 pm โดย jirawoot
การเชื่อมต่อ API ของ GitLab เพื่อดาวน์โหลดไฟล์
โดย tsukasaz อ 31 มี.ค. 2020 12:52 pm บอร์ด PHP Knowledge
0
1554
อ 31 มี.ค. 2020 12:52 pm โดย tsukasaz
วิธิการใส่ icon favorite เพื่อแสดงในแต่ละ browser
โดย Ittichai_chupol อ 31 มี.ค. 2020 11:14 am บอร์ด Graphic design
4
241
พฤ 02 เม.ย. 2020 4:33 pm โดย thatsawan
สิ่งที่เกิดขึ้นจริงในการประชุมด้วยเทคโนโลยี Conference Call #Work from home
โดย thatsawan อ 31 มี.ค. 2020 10:39 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
59
อ 31 มี.ค. 2020 10:39 am โดย thatsawan
ช่วงนี้ Work From Home ก็จะลำบากนิดนึงแหละเนอะ #ทาสเเมว
โดย thatsawan จ 30 มี.ค. 2020 2:29 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
149
จ 30 มี.ค. 2020 2:29 pm โดย thatsawan
อยากทราบวิธีสร้างเว็บหน้าเดียวแบบกรอกข้อมูลเสร็จแล้วประมวลผล
โดย phongkhukhan ส 28 มี.ค. 2020 1:00 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
2
440
ส 28 มี.ค. 2020 1:09 am โดย mindphp
แสดงสินค้าที่อยากได้ใน Wishlist ด้วย Module Wishlist
โดย prmindphp ศ 27 มี.ค. 2020 5:26 pm บอร์ด MindPHP News & Feedback
0
282
ศ 27 มี.ค. 2020 5:26 pm โดย prmindphp