Vue.js เป็น Framework ที่ใช้จัดการส่วนติดต่อผู้ใช้ (UI)
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 ใด