การใช้ Directive ใน Vue.js เพื่อเพิ่มความสามารถให้กับองค์ประกอบของแอปพลิเคชัน

ประเภทโค้ด: JavaScript

Vue.js ก็มีจุดเด่นอย่างหนึ่ง ซึ่งทำให้โปรแกรมเมอร์จากทั่วโลกสนใจอย่างมากมายในตัวของ Vue.js ก็คือ การใช้ Directive เป็นการเพิ่มความสามารถให้กับ Element ของแอปพลิเคชันใน Vue.js เราสามารถใช้ Directive เพื่อกำหนดพฤติกรรมที่เฉพาะเจาะจงให้กับ Element ต่าง ๆ ในหน้าเว็บไซต์ โดยใช้คำสั่งของ Directive ที่ให้มาพร้อมกับ Vue.js หรือสร้าง Directive ของตัวเองได้เช่นกัน Directive ใน Vue.js มีชื่อเรียกว่า v-directive และสามารถใช้กับองค์ประกอบ HTML ในรูปแบบของแอตทริบิวต์ เพื่อกำหนดพฤติกรรมและการทำงานขององค์ประกอบนั้น ๆ ตามที่คุณต้องการ องค์ประกอบที่ใช้ Directive จะมีการผูกข้อมูล (data binding) และรับข้อมูลเข้าสู่ส่วนต่าง ๆ ขององค์ประกอบได้ง่ายดาย

Directive ของ Vue.js คืออะไร?

Directive ใน Vue.js คือกลุ่ม Element พิเศษที่ใช้กำหนดลักษณะบางอย่างให้แท็ก HTML ซึ่งที่ได้กล่าวไปใน Element ในกลุ่มนี้จะขึ้นต้นด้วย "v" ได้แก่ v-on, v-show เป็นต้น แต่ก็มีบางส่วนยังมีรูปแบบ Shorthand หรือก็คือการเขียนแบบย่อ โดย Directive ทั้งหมดของ Vue.js ทั้งแบบเต็มและแบบย่อ จะมีตั้วอย่างดังนี้

 ในส่วนของ v-on:<event> สามารถศึกษาได้ที่บทความนี้

การกำหนดข้อมูลด้วย v-text กับ v-html

v-text เป็นคำสั่งที่เอาไว้ทำการแทรกข้อมูลธรรมดาให้เป็นเนื้อหาของอิลิเมนต์เช่นเดียวกับ Mustache ดังตัวอย่างต่อไปนี้

<div id="app" class="m-5 text-center">
   <p v-text="message"></p>
   <p>{{message}}</p>
</div>
<script>
  Vue.createApp({
    data() {
        return {
            message : "Hello World."
        }
    },
  }).mount('#app');
</script>

อธิบายโค้ด ข้างบนสร้างแอปพลิเคชัน Vue ด้วย Vue.createApp() และกำหนดโครงสร้างข้อมูลที่มี message ใน data ของ Vue instance ซึ่งค่าเริ่มต้นของ message คือ "Hello World."

• ในส่วนของ HTML มีองค์ประกอบ <div> ที่มี id="app" และคลาส CSS m-5 และ text-center ซึ่งใช้สำหรับการจัดหน้าและการสไตล์ตัวองค์ประกอบ
• ใน <div> นี้มีองค์ประกอบ <p> สององค์ประกอบ อันแรกใช้ v-text="message" ซึ่งกำหนดให้เนื้อหาภายใน <p> เป็นค่าของ message ที่อยู่ใน Vue instance ผ่านการใช้งาน v-text directive
• อันที่สองใช้ {{message}} ซึ่งเป็นการแทรกข้อมูลด้วยเครื่องหมาย Mustache ({{ }}) ที่ระบุในตำแหน่งที่ต้องการให้ข้อมูล message แสดงผล
• เมื่อรันแอปพลิเคชัน Vue จะแสดงผลลัพธ์ในหน้าเว็บไซต์ว่า "Hello World." ในองค์ประกอบ <p> ทั้งสอง

ผลลัพธ์ที่ได้

v-html ใน Vue.js ใช้สำหรับแทรก HTML ในองค์ประกอบ HTML ตรงไปตรงมา โดยใช้ข้อมูลจาก Vue instance หรือส่วนข้อมูลอื่น ๆ ที่ได้กำหนดไว้ในโครงสร้างข้อมูล (data) ของ Vue component เมื่อใช้งาน v-html องค์ประกอบ HTML ที่มี v-html จะแสดงผลเป็น HTML ที่ถูกแทรกในตำแหน่งนั้น โดยไม่ถูกแสดงเป็นข้อความธรรมดา ซึ่งสามารถใช้งานส่วนหนึ่งของ Vue instance ที่มีแท็ก HTML, ภาษาตระกูล HTML, หรือโค้ด HTML อื่น ๆ ภายในได้ ซึ่งจะต่างกับ v-text ที่จะแสดงผลเป็นข้อความธรรมดาเท่านั้น ไม่สามารถแสดงผลเป็นแท็ก HTML ได้

ตัวอย่างการใช้งาน v-html:

<div id="app" class="m-5 text-center">
    <p v-html="htmlContent"></p>
    <p>{{htmlContent}}</p>
</div>
<script>
  Vue.createApp({
    data() {
        return {
            htmlContent : "<b>สวัสดี Vue.js</b>"
        }
    },
  }).mount('#app');
</script>

อธิบายโค้ด

• htmlContent ใน data ของ Vue instance ซึ่งค่าเริ่มต้นของ htmlContent คือ "<b>สวัสดี Vue.js</b>"
• ในส่วนของ HTML มีองค์ประกอบ <div> ที่มี id="app" และคลาส CSS m-5 และ text-center ซึ่งใช้สำหรับการจัดหน้าและการสไตล์ตัวองค์ประกอบ
• ใน <div> นี้มีองค์ประกอบ <p> สององค์ประกอบ อันแรกใช้ v-html="htmlContent" ซึ่งกำหนดให้เนื้อหาภายใน <p> เป็น HTML ที่อยู่ใน htmlContent ที่อยู่ใน Vue instance ผ่านการใช้งาน v-html directive
• อันที่สองใช้ {{htmlContent}} ซึ่งเป็นการแทรกข้อมูลด้วยเครื่องหมาย Mustache ({{ }}) ที่ระบุในตำแหน่งที่ต้องการให้ข้อมูล htmlContent แสดงผล
• เมื่อรันแอปพลิเคชัน Vue จะแสดงผลลัพธ์ในหน้าเว็บไซต์ว่า "สวัสดี Vue.js" โดยมีตัวหนา (bold) บนหน้าเว็บไซต์ใน <p> แรกและแสดงผลเป็นตัวอักษรทั่วไปในองค์ประกอบ <p>

การแสดงผลตามเงื่อนไข

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

การใช้ v-show

v-show คือคำสั่งสำหรับกำหนดเงื่อนไขที่จะแสดงอิลิลเมนต์ โดยเงื่อนไขเป็นจริง ก็จะแสดงผล แต่หากเป็นเท็จอิลิเมนต์นั้นจะถูกซ่อน

ตัวอย่างการใช้ v-show 

<div id="app" class="m-5 text-center d-inline-block">
    <div v-show="success" class="alert alert-success">
        <span>แสดงข้อมูล</span>
    </div>
    <div v-show="error" class="alert alert-danger">
        <span>เกิดข้อผิดพลาด</span>
    </div>
    <div class="input-group">
        <button @click="btnSuccess" class="btn btn-success form-control">
            กดแสดงข้อมูล
        </button>
            <button @click="btnError" class="btn btn-danger form-control">
            กดแสดง Error
        </button>
    </div>
</div>

<script>
  Vue.createApp({
    data() {
        return {
            success : false,
            error : false
        }
    },
    methods : {
        btnSuccess() {
            this.success = true;
            this.error = false;
        },
        btnError() {
            this.success = false;
            this.error = true;
        }
    }
  }).mount('#app');
</script>

อธิบายโค้ด

โค้ดส่วนของ HTML ที่มีการใช้งาน Vue.js เพื่อแสดงแอลเอ็มเอล (HTML element) ต่าง ๆ โดยอิงตามค่าของ success และ error ที่ถูกกำหนดใน Vue instance:

• <div id="app" class="m-5 text-center d-inline-block">: องค์ประกอบหลักของแอปพลิเคชัน Vue ที่มี id="app" เพื่อใช้ในการเชื่อมต่อกับ Vue instance และมีคลาส CSS m-5, text-center, และ d-inline-block เพื่อกำหนดการจัดหน้าและการแสดงผลตามลำดับ.
• <div v-show="success" class="alert alert-success">: องค์ประกอบ <div> ที่มีการใช้งาน v-show เพื่อตรวจสอบค่าของ success ถ้าเป็นจริง (true) จะแสดงองค์ประกอบนี้ มีคลาส CSS alert alert-success เพื่อเติมสีพื้นหลังและสไตล์ให้กับองค์ประกอบ.
• <span>แสดงข้อมูล</span>: องค์ประกอบ <span> ที่มีข้อความ "แสดงข้อมูล" ภายใน.
• <div v-show="error" class="alert alert-danger">: องค์ประกอบ <div> ที่มีการใช้งาน v-show เพื่อตรวจสอบค่าของ error ถ้าเป็นจริง (true) จะแสดงองค์ประกอบนี้ มีคลาส CSS alert alert-danger เพื่อเติมสีพื้นหลังและสไตล์ให้กับองค์ประกอบ.
• <span>เกิดข้อผิดพลาด</span>: องค์ประกอบ <span> ที่มีข้อความ "เกิดข้อผิดพลาด" ภายใน.
• <button @click="btnSuccess" class="btn btn-success form-control">กดแสดงข้อมูล</button>: องค์ประกอบ <button> ที่มีการใช้งาน @click เพื่อเชื่อมต่อกับเมธอด btnSuccess

โค้ด JavaScript ที่ใช้สร้างแอปพลิเคชัน Vue.js และกำหนดการทำงานของข้อมูลและเมธอดต่าง ๆ ดังนี้

• Vue.createApp({...}) ใช้สร้างแอปพลิเคชัน Vue โดยกำหนดคำสั่งภายในวงเล็บ {...} เป็นค่าที่กำหนดโครงสร้างข้อมูล (data) และเมธอด (methods) ของ Vue instance
• data() เป็นเมธอดที่ใช้สำหรับกำหนดค่าเริ่มต้นของข้อมูลใน Vue instance ซึ่งในตัวอย่างนี้กำหนดให้ success และ error เป็นค่าเริ่มต้นเป็น false
• methods เป็นอ็อบเจ็กต์ที่ใช้ในการกำหนดเมธอดใน Vue instance เพื่อให้สามารถจัดการกับเหตุการณ์และปรับแต่งค่าในข้อมูลได้ ในตัวอย่างนี้มีเมธอด btnSuccess() และ btnError() ซึ่งเมื่อถูกเรียกใช้จะเปลี่ยนค่าของ success และ error เพื่อแสดงหรือซ่อนองค์ประกอบ HTML ที่เกี่ยวข้อง
• mount('#app') เป็นเมธอดที่ใช้เชื่อมต่อแอปพลิเคชัน Vue กับองค์ประกอบ HTML ที่มี id เป็น "app" โดยที่ Vue จะเริ่มทำงานและทำให้ความสอดคล้องกับข้อมูลและเหตุการณ์ที่ถูกกำหนดใน Vue instance

ผลลัพธ์ที่ได้

การใช้ v-if, v-else และ v-else-if

v-if เป็นนคำสั่งที่ใช้กำหนดเงื่อนไขการแสดงเช่นเดียวกับ v-show แต่ต่างตรงที่ v-if สามารถทำเงื่อนไขหลาย ๆ อัน (v-if, v-else และ v-else-if) ได้ ซึ่งหลักการใช้จะคล้ายกับ v-show 

 แต่มีความแตกต่างกันของ  v-show และ v-if ก็คือ

• v-show เป็นตัวเลือกที่ใช้สำหรับแสดงหรือซ่อนส่วนของเนื้อหาขึ้นอยู่กับสถานะของค่าที่ถูกตั้งค่าไว้ใน Vue instance หรือ component นั้น โดยหากค่าที่ถูกตั้งค่าเป็น true ส่วนเนื้อหาจะถูกแสดงผล แต่ถ้าค่าเป็น false ส่วนเนื้อหาจะถูกซ่อนไว้ โดยที่ส่วนเนื้อหาที่ซ่อนจะยังคงอยู่ใน DOM และแค่ถูกตั้งค่าให้แสดงหรือซ่อนเท่านั้น
• v-if เป็นตัวเลือกที่ใช้สำหรับแสดงหรือซ่อนส่วนของเนื้อหาขึ้นอยู่กับเงื่อนไขที่ถูกตั้งค่า แต่ถ้าเงื่อนไขเป็นจริง (truthy) ส่วนเนื้อหาจะถูกแสดงผล และถ้าเงื่อนไขเป็นเท็จ (falsy) ส่วนเนื้อหาจะถูกนำออกจาก DOM นั่นหมายความว่าส่วนเนื้อหาจะถูกสร้างหรือทำลายขึ้นอย่างไดนามิกขึ้นอยู่กับเงื่อนไข

ตัวอย่างโค้ด

<div id="app" class="m-4 d-inline-block">
    <form v-if="!signined && forgutPassword != true" class="v-form row g-2 m-auto p-3 bg-success bg-opacity-25">
        <h4 class="col-12 fw-bold text-light text-center mb-3 mb-sm-4">
            สมาชิกเข้าสู่ระบบ
        </h4>
        <div class="col-12">
            <input type="email" ref="email" placeholder="Email" class="form-control form-control-sm">
        </div>
        <div class="col-12">
            <input type="password" ref="password" placeholder="Password" class="form-control form-control-sm">
        </div>
        <div class="col-12 text-center pt-2">
            <button class="btn btn-sm btn-primary" @click="btnSignClick">
                ตกลง
            </button><br>
            <a href="#" class="link-light mx-2" @click="forgotPassword = true">
                ลืมรหัสผ่าน
            </a>
        </div>
    </form>
    <form v-else-if="forgotPassword" class="v-form row g-2 m-auto p-3 bg-success bg-opacity-25">
        <h4 class="col-12 text-center mb-3 mb-sm-4">
            ระบุ Email ที่ใช้เป็น Login
        </h4>
        <div class="col-12">
            <input type="email" ref="email2" placeholder="Email" class="form-control form-control-sm">
        </div>
        <div class="col-12">
            <button @click="btnForgotPw_click" class="btn btn-sm btn-primary mb-2">
                ตกลง
            </button><br>
            <a href="#" class="link-light mx-2" @click="forgotPassword = false">
                ยกเลิก
            </a>
        </div>
    </form>
    <div v-else class="bg-info bg-opacity-25 p-4">
        <h5>
            ท่านเข้าสู่ระบบแล้ว
        </h5>
        <button @click="signined = false" class="btn btn-danger mt-4">
            ออกจากระบบ
        </button>
    </div>
</div>
<script>
  Vue.createApp({
    data() {
        return {
            signined : false,
            forgotPassword : false
        }
    },
    methods : {
        btnSignClick() {
            let em = this.$refs.email.value.trim()
            let pw = this.$refs.password.value.trim()
            if (em != '' && pw != '') {
                this.signined = true
            } else {
                this.signined = false
                alert('กรุณาใส่ Email และ Password')

            }
        },
        btnForgotPw_click() {
            if (this.$refs.email2.value.trim() != '') {
                alert('Password ถูกส่งไปตาม Email ที่ระบุแล้ว')
                this.forgotPassword = false
            } else {
                alert('กรุณาใส่ Email ที่ใช้เป็น Login')
            }
           
        }
    }
  }).mount('#app');
</script>

 ผลลัพธ์ที่ได้

การใช้ v-for แสดงรายการแบบวนลูป

v-for มีการ้คล้าน for ของ JavaScript ก็คือ การวนลูปเพื่อแสดงผลตามจำนวนรายการที่กำหนดเอาไว้ ซึ่งไม่ต้องเขียนโค้ดแต่ละรายการซ้ำ ๆ 

หลักการการใช้ของ v-for มีดังนี้

• ข้อมูลที่จะนำมาใช้สร้างรายการนั้น จะต้องเป็นข้อมูลที่อยู่ในรูปแบบอาร์เรย์หรือออบเจ็กต์นั้นเอง
• การกำหนด v-for จะใช้รูปแบบการเขียนเช่นเดียวกับ for-in ของ JavaScript 
  

  <div v-for="item in dataArray" ></div>
  <!-- หรือ  -->
  <div v-for="(item, index) in dataArray"></div>​

• item ใช้อ้างอิงถึงรายการของอาร์เรย์ในการวนลูปแต่ละรอบ
• datArray คือชื่ออาร์เรย์ที่ใช้เก็บรายการข้อมูล
• index เป็นการใช้ในกรณีที่เราต้องการอ้างอิงถึงเลขลำดับของอาร์เรย์
• ข้อมูลที่เป็นออบเจ็กต์ จะใช้รูปแบบดังนี้
  

  <div v-for="value in dataObject" ></div>
  <!-- หรือ  -->
  <div v-for="(value, property) in dataObject"></div>
  <!-- หรือ  -->
  <div v-for="(value, property, index) in dataObject"></div>​