Vue.js คืออะไร?
Vue.js ให้คุณขยาย HTML ด้วยแอตทริบิวต์ HTML ที่เรียกว่าdirectives
คำสั่ง Vue.js นำเสนอฟังก์ชันการทำงานให้กับแอปพลิเคชัน HTML
Vue.js มีคำสั่งในตัว และคำ สั่งที่ผู้ใช้กำหนด
คำสั่ง Vue.js
Vue.js ใช้วงเล็บปีกกาสองครั้ง{{ }}เป็นที่ยึดสำหรับข้อมูล
คำสั่ง Vue.js เป็นแอตทริบิวต์ HTML ที่มีคำนำหน้าv-
ดูตัวอย่าง
ในตัวอย่างด้านล่าง วัตถุ Vue ใหม่จะถูกสร้างขึ้นด้วยnew Vue( )
คุณสมบัติel:ผูกวัตถุ Vue ใหม่กับองค์ประกอบ HTML ด้วยid="app "
ตัวอย่าง
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
การผูก Vue.js
เมื่อวัตถุ Vue ถูกผูกไว้กับองค์ประกอบ HTML องค์ประกอบ HTML จะเปลี่ยนไปเมื่อวัตถุ Vue เปลี่ยนแปลง:
ตัวอย่าง
<div id="app">
{{ message }}
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
function
myFunction() {
myObject.message = "John Doe";
}
</script>
Vue.js Two-Way Binding
คำv-modelสั่งผูกค่าขององค์ประกอบ HTML กับข้อมูลแอปพลิเคชัน
สิ่งนี้เรียกว่าการผูกสองทาง:
ตัวอย่าง
<div id="app">
<p>{{ message }}</p>
<p><input v-model="message"></p>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js วนรอบ
การใช้v-forคำสั่งเพื่อผูกอาร์เรย์ของวัตถุ Vue กับ "อาร์เรย์" ขององค์ประกอบ HTML:
ตัวอย่าง
<div id="app">
<ul>
<li v-for="x in todos">
{{
x.text }}
</li>
</ul>
</div>
<script>
myObject =
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn
JavaScript' },
{ text: 'Learn
Vue.js' },
{ text: 'Build
Something Awesome' }
]
}
})
</script>