บทความ

Single Page Application คืออะไร และ Vue.js คืออะไร

Vue.js เป็นเฟรมเวิร์ก JavaScript แบบโปรเกรสซีฟและโอเพ่นซอร์สที่ใช้ในการพัฒนาอินเทอร์เฟซผู้ใช้บนเว็บเชิงโต้ตอบและแอปพลิเคชันหน้าเดียว

Vue.js ส่วนใหญ่มุ่งเน้นไปที่ส่วนการแสดงภาพของแอปพลิเคชัน หรือที่เรียกว่าการพัฒนาส่วนหน้า Vue.js กำลังได้รับความนิยมมากขึ้นทุกวัน เนื่องจากง่ายต่อการรวมเข้ากับโปรเจ็กต์และไลบรารี่อื่นๆ มันง่ายมากที่จะติดตั้งและใช้งาน

สารบัญ

Vue.js คืออะไร

Vue.js เป็นเฟรมเวิร์ก JavaScript แบบโปรเกรสซีฟ โอเพนซอร์ส ใช้สำหรับการพัฒนาส่วนติดต่อผู้ใช้บนเว็บแบบโต้ตอบและแอปพลิเคชันหน้าเดียว (SPA) Vue.js โดยทั่วไปเรียกว่า Vue และออกเสียงว่า "view.js" หรือ "view"

แอปพลิเคชันหน้าเดียว (SPA) คืออะไร?

แอปพลิเคชันหน้าเดียวหรือ SPA คือเว็บแอปพลิเคชันหรือเว็บไซต์ที่ให้ผู้ใช้ได้รับประสบการณ์ที่ราบรื่น ตอบสนองและรวดเร็วคล้ายกับแอปพลิเคชันบนเดสก์ท็อป แอปพลิเคชันหน้าเดียวประกอบด้วยเมนู ปุ่ม และบล็อกในหน้าเดียว เมื่อผู้ใช้คลิกที่หนึ่งในนั้น ผู้ใช้จะเขียนหน้าปัจจุบันใหม่แบบไดนามิกแทนที่จะโหลดหน้าใหม่ทั้งหมดจากเซิร์ฟเวอร์ นี่คือเหตุผลที่อยู่เบื้องหลังความเร็วในการตอบสนอง

โดยพื้นฐานแล้ว Vue ได้รับการพัฒนาเพื่อการพัฒนาส่วนหน้า ดังนั้นจึงต้องรองรับไฟล์ HTML, JavaScript และ CSS จำนวนมาก Vue.js ทำให้ผู้ใช้สามารถขยาย HTML ด้วยแอตทริบิวต์ HTML ที่เรียกว่าคำสั่งได้อย่างง่ายดาย Vue.js มีคำสั่งในตัวและคำสั่งมากมาย defiไนท์โดยผู้ใช้เพื่อปรับปรุงการทำงานของแอปพลิเคชัน HTML

คุณสมบัติของ Vue.js

ด้านล่างนี้คือรายการคุณสมบัติที่สำคัญที่สุดของ Vue.js:

ส่วนประกอบ

ส่วนประกอบ Vue.js เป็นหนึ่งในคุณสมบัติที่สำคัญของเฟรมเวิร์กนี้ ใช้เพื่อขยายองค์ประกอบ HTML พื้นฐานเพื่อสรุปรหัสที่ใช้ซ้ำได้ คุณสามารถสร้างองค์ประกอบแบบกำหนดเองที่ใช้ซ้ำได้ในแอปพลิเคชัน Vue.js ซึ่งสามารถนำมาใช้ซ้ำใน HTML ได้ในภายหลัง

แม่แบบ

Vue.js มีเทมเพลตที่ใช้ HTML ที่สามารถใช้เพื่อเชื่อมโยง DOM ที่แสดงผลกับข้อมูลอินสแตนซ์ Vue เทมเพลต Vue ทั้งหมดเป็น HTML ที่ถูกต้องซึ่งสามารถแยกวิเคราะห์ได้โดยเบราว์เซอร์และตัวแยกวิเคราะห์ HTML ที่เป็นไปตามข้อกำหนด Vue.js รวบรวมโมเดลเป็นฟังก์ชันการแสดงผล DOM เสมือน Vue แสดงส่วนประกอบลงในหน่วยความจำ DOM เสมือนก่อนที่จะรีเฟรชเบราว์เซอร์ นอกจากนี้ Vue ยังสามารถคำนวณจำนวนขั้นต่ำของคอมโพเนนต์เพื่อแสดงผลซ้ำและใช้การจัดการ DOM จำนวนขั้นต่ำเมื่อเปลี่ยนสถานะแอปพลิเคชัน

ปฏิจจสมุปบาท

Vue จัดเตรียมระบบการตอบสนองที่ใช้ออบเจกต์ JavaScript อย่างง่าย และเพิ่มประสิทธิภาพการแสดงผลซ้ำ ในกระบวนการนี้ แต่ละส่วนประกอบจะติดตามการขึ้นต่อกันของปฏิกิริยา ดังนั้นระบบจึงทราบแน่ชัดว่าเมื่อใดและส่วนประกอบใดควรแสดงผลซ้ำ

การกำหนดเส้นทาง

การนำทางเพจทำได้ด้วยความช่วยเหลือของ vue-router คุณสามารถใช้ไลบรารี vue-router ที่สนับสนุนอย่างเป็นทางการสำหรับแอปพลิเคชันหน้าเดียวของคุณ

ทรานซิซิโอนี่

Vue ให้คุณใช้เอฟเฟ็กต์การเปลี่ยนแปลงต่างๆ เมื่อองค์ประกอบต่างๆ ถูกแทรก อัปเดต หรือลบออกจาก DOM

จะติดตั้ง Vue.js ได้อย่างไร?

มีหลายวิธีในการใช้ Vue.js คุณสามารถติดตั้งได้โดยไปที่เว็บไซต์อย่างเป็นทางการหรือเริ่มใช้ไฟล์ Vue.js จากไลบรารี CDN ก็ได้ ต่อไปนี้เป็นวิธีใช้ Vue.js ในโครงการของคุณ

โดยตรงในไฟล์ HTML

หากคุณต้องการใช้แท็ก <script> ของ Vue.js ลงในไฟล์ HTML ของคุณโดยตรง คุณต้องดาวน์โหลดจากเว็บไซต์ทางการ

<html>  
   <head>  
      <script type = "text/javascript" src = "vue.min.js"></script>  
   </head>  
   <body>
   </body>  
</html>

ไปที่เว็บไซต์อย่างเป็นทางการของ Vue.js https://vuejs.org/v2/guide/installation.html เพื่อดาวน์โหลด vue.js ตามความต้องการของคุณ

การใช้ซีดีเอ็น

คุณยังสามารถใช้ไฟล์ Vue.js จาก CDN ในแอปพลิเคชันของคุณ ใช้ลิงก์ https://unpkg.com/vue@3/dist/vue.global.js ภายในองค์ประกอบ <script>, ดังต่อไปนี้:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

ประโยชน์ของการใช้ Vue.js

Vue.js เป็นหนึ่งในเทคโนโลยีซอฟต์แวร์ล่าสุดที่ใช้กันอย่างแพร่หลายสำหรับการพัฒนาเว็บและการสร้าง Single Page Applications (SPA) อย่างที่คุณเดาได้จากชื่อ ส่วนใหญ่จะใช้สำหรับ UI หรือด้านการแสดงผลของโครงการ

มาดูประโยชน์ของการใช้ Vue.js ในโครงการของคุณกัน:

Dimensioni molto ริดอตต์

ข้อดีอย่างหนึ่งของ Vue.js คือมีขนาดเล็กมาก ความสำเร็จของเฟรมเวิร์ก JavaScript ขึ้นอยู่กับขนาดของมันเป็นอย่างมาก และปลั๊กอิน JavaScript ที่น่าตื่นเต้นนี้มีขนาดเพียง 18-21KB ดังนั้นคุณจึงสามารถดาวน์โหลดและใช้งานได้ง่ายมากในเวลาไม่นาน

ง่ายต่อการเข้าใจและรหัส

กรอบงาน Vue.js มีโครงสร้างที่เรียบง่ายและเข้าใจได้ง่ายมาก เป็นสาเหตุหนึ่งที่ทำให้กรอบนี้ได้รับความนิยม หากคุณคุ้นเคยกับ HTML และ JavaScript คุณสามารถเขียนโค้ดใน Vue.js ได้อย่างง่ายดาย ผู้ใช้สามารถเพิ่ม Vue.js ลงในโปรเจกต์เว็บได้อย่างง่ายดาย เนื่องจากโครงสร้างที่เรียบง่ายและพัฒนาแอปพลิเคชัน

การผสานรวมกับแอปพลิเคชันที่มีอยู่อย่างง่าย

Vue.js มีส่วนประกอบมากมายสำหรับทุกสิ่งและสามารถรวมเข้ากับแอปพลิเคชันที่มีอยู่ได้อย่างรวดเร็ว คุณสามารถรวมเข้ากับแอปพลิเคชันใด ๆ ที่เขียนด้วย JavaScript

มีความยืดหยุ่นโดยธรรมชาติ

ลักษณะที่ยืดหยุ่นของ Vue.js ยังช่วยให้นักพัฒนา React.js, Angular.js และเฟรมเวิร์ก JavaScript ใหม่อื่นๆ เข้าใจได้ง่าย ให้ความยืดหยุ่นอย่างมากในการใช้โหนดเสมือนเพื่อเขียนไฟล์ HTML, ไฟล์ JavaScript และไฟล์ JavaScript บริสุทธิ์

ส่วนประกอบ

คุณสามารถสร้างองค์ประกอบแบบกำหนดเองที่ใช้ซ้ำได้ในแอปพลิเคชัน Vue.js

เอกสารที่ง่าย ครบถ้วน และละเอียด

Vue.js มีเอกสารประกอบที่เรียบง่าย ครบถ้วน และมีรายละเอียด ดังนั้นนักพัฒนาที่ไม่มีความรู้เพียงเล็กน้อยเกี่ยวกับ HTML และ JavaScript สามารถใช้โปรแกรมนี้ในการเขียนโปรแกรมได้

DOM เสมือน

Vue.js ใช้ DOM เสมือนคล้ายกับเฟรมเวิร์กอื่นๆ ที่มีอยู่ เช่น ReactJS, Ember เป็นต้น DOM เสมือนคือการแสดงแผนภูมิต้นไม้ในหน่วยความจำขนาดเล็กของ DOM HTML ดั้งเดิม และได้รับการอัปเดตโดยไม่กระทบกับ DOM เริ่มต้น

การสื่อสารสองทาง

Vue.js ให้การสื่อสารสองทางด้วยสถาปัตยกรรม Model View View Model (MVVM) ที่ทำให้การจัดการบล็อก HTML ง่ายขึ้น

Vue.js การแสดงผลแบบประกาศ

เฟรมเวิร์กมาพร้อมกับระบบที่ช่วยให้เราสามารถแสดงข้อมูลไปยัง DOM อย่างชัดเจนโดยใช้รูปแบบไวยากรณ์ที่เรียบง่ายและตรงไปตรงมา

นี่คือตัวอย่าง:

<body>
<div id="app">  
  {{ message }}  
</div>

<script>
var app = new Vue({  
  el: '#app',  
  data: {  
    message: 'This is a simple Vue.js Declarative Rendering example!'  
  }  
})  
</script>
</body>

กรอบงาน Vue.js ช่วยให้เราทำได้ defiคุณลักษณะ HTML nire ที่เรียกว่าคำสั่งซึ่งใช้เพื่อจัดเตรียมฟังก์ชันการทำงานให้กับแอปพลิเคชัน HTML

มีคำสั่งสองประเภทใน Vue.js:

คำสั่งรวม e
คำสั่ง defiเสร็จสิ้นโดยผู้ใช้

Vue.js ใช้วงเล็บปีกกาคู่ {{}} เป็นตัวยึดตำแหน่งข้อมูล และคำสั่ง Vue.js เป็นแอตทริบิวต์ HTML ที่ใช้คำนำหน้า v-

แอป Vue เชื่อมต่อกับองค์ประกอบ DOM เดียวและควบคุมอย่างเต็มที่ ในตัวอย่างข้างต้น มันคือ #app

ด้วย Vue เราสามารถพิจารณา HTML เป็นจุดเริ่มต้น และทุกอย่างจะเกิดขึ้นภายในอินสแตนซ์ Vue ที่สร้างขึ้น
มาดูตัวอย่างที่เราลองผูกองค์ประกอบและแอตทริบิวต์:

<html>  
    <head>  
        <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>         
        <div id="app-2">  
        <span v-bind:title="message">  
            Hover mouse over me for a few seconds  
            and see a dynamically bound title which I have set!  
        </span>  
        </div>          
        <script>
           var app2 = new Vue({  
           el: '#app-2',  
           data: {  
           message: 'You loaded this page on ' + new Date().toLocaleString()  
                 }  
           })  
       </script>  
    </body>  
</html>

ในกรณีนี้ แอตทริบิวต์ v-bind ใหม่คือคำสั่ง คำสั่งใช้กับคำนำหน้า v เพื่อระบุว่าเป็นแอตทริบิวต์เฉพาะจาก Vue และใช้เพื่อใช้ลักษณะการตอบสนองแบบพิเศษกับ DOM ที่แสดงผล

ผลลัพธ์ของตัวอย่างมีดังต่อไปนี้