สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com

Tutorial Web Programming

A01 JavaScript01 HelloWorld A02 JavaScript02 HelloWorld by Class A03 JavaScript03 Object A04 JavaScript04 Prototype A05 JavaScript05 Closure A06 NodeJS01 HelloWorld A07 npm01 Intro A08 React01 HelloWorld A09 AngularJS01 HelloWorld A10 VueJS01 HelloWorld A11 webpack01 Intro A12 ASPNET01 HelloWorld A13 Flask01 HelloWorld A14 Windows CommandLine A15 GoogleCloudPlatform Product A16 GoogleAppEngine01 HelloWorld A17 WhatIs01 WebServer A18 WhatIs02 API A19 WhatIs03 Linux A20 Linux CommandLine A21 Android01 HelloWorld A22 Android02 Gradle A23 Maven HelloWorld A24 Nancy HelloWorld A25 WhatIs04 Protocol A26 HowTo01 Install Ubuntu Desktop A27 HowTo02 Install WebServer on Ubuntu

VueJS01_HelloWorld

Vue.js คืออะไร

Vue อ่านออกเสียงเหมือนคำว่า view เป็น JavaScript Framework ตัวหนึ่งที่เราสามารถเพิ่มเข้าไปในหน้า HTML ได้เลย โดยใส่ไว้ใน tag script คล้ายกับ AngularJS ในบทความก่อนหน้านี้

ประโยชน์ของ Vue.js

จุดเด่นของ Vue คือเป็น Progressive Framework ที่มีขนาดเล็ก ออกแบบมาสำหรับสร้าง User interface โดยเฉพาะ ช่วยให้ผู้ใช้งานสามารถเขียนหน้าเว็บที่แสดงผลซับซ้อนได้อย่างง่ายดาย และเหมาะมากสำหรับ Single-page application เมื่อใช้ร่วมกับ modern tooling[2] และ supporting libraries[3]

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

ประวัติ Vue.js

หลังจากผู้อ่านอ่านหัวข้อ ประโยชน์ของ Vue.js จบ ผู้อ่านบางท่านที่ยังจำบทความก่อนหน้านี้ได้อาจจะกำลังคิดว่า เอ๊ะ! นี่มัน copy ข้อความของ AngularJS มาหรือเปล่าเนี่ย?

ที่ทั้งสองตัวนี้มันคล้ายกันก็เพราะ Vue.js ถูกสร้างโดย Evan You หรือชื่อจีนคือ 尤雨溪 ซึ่งเคยทำงานที่ Google ในตอนนั้นเขาต้องใช้ AngularJS ในหลายๆโปรเจกต์ ถึงแม้เขาจะชอบในหลายๆเรื่องของ AngularJS แต่เขาก็รู้สึกว่ามันหนักไปสำหรับโปรเจกต์ของเขาในตอนนั้น เขาเคยให้สัมภาษณ์ไว้ว่า 

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved? I was also curious as to how its internal implementation worked. I started this experiment just trying to replicate this minimal feature set, like declarative data binding. That was basically how Vue started.”[4]

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

Project Hello world

ตัวอย่างต่อไปนี้จะทำเหมือนกับ AngularJS ในบทความที่แล้วคือ เราจะทำหน้าเว็บที่แสดงข้อความ Hello World, ตามด้วยข้อความที่กรอกลงไปในช่องออกมาทันที สำหรับการติดตั้ง Vue.js นั้นทำได้หลายวิธี แต่ในบทความนี้จะขอใช้วิธีที่ง่ายสุดๆเพื่อให้ผู้อ่านทำตามได้ทันที นั่นคือวิธีเพิ่มเข้าไปใน tag script นั่นเองครับ

1. เริ่มจากสร้างไฟล์นามสกุล .html ที่เราจะใช้เขียนโค้ดขึ้นมาก่อน โดยการคลิกขวาในโฟลเดอร์ที่เราต้องการแล้วเลือก New > Text Document จากนั้นเปลี่ยนชื่อและนามสกุลไฟล์ ในที่นี้ตั้งชื่อว่า vue_hello01.html ถ้าไม่เข้าใจให้ย้อนไปดูบทความก่อนๆหน้านี้ (หัวข้อ JavaScript01_HelloWorld นะครับ)

2. เปิดไฟล์ด้วยโปรแกรมทีี่สามารถแก้ไขข้อความในไฟล์ได้ เช่น Notepad หรือ Notepad++ จากนั้นพิมพ์โค้ดต่อไปนี้ลงไป แล้วกด Save

อธิบายโค้ด
บรรทัดที่ 3: เป็นการ load ไฟล์ Vue.js เพื่อให้ใช้งาน Vue.js ในหน้าเว็บนี้ได้
บรรทัดที่ 6: กำหนด id ของ element นี้ว่า "app"
บรรทัดที่ 7: v-model directive จะเป็นผูกค่าของ input field กับข้อมูล message ใน Vue object (two-way binding)
บรรทัดที่ 8: {{ }} เป็น Syntax ของ Vue ซึ่งจะแสดงค่าของข้อมูลที่กำหนดหลังจาก render แล้ว ในที่นี้คือข้อมูล message
บรรทัดที่ 12 - 15 ***ก้อนนี้ต้องอยู่ใน tag script นะครับ!: เป็นการสร้าง Vue object ขึ้นมา โดยกำหนด
- property el: ให้ผูกกับ HTML element ที่มี id="app" ทำให้ HTML element นี้จะเปลี่ยนเมื่อ Vue object มีการเปลี่ยนแปลง
- property data: ให้มีข้อมูล message ซึ่งในที่นี้กำหนดค่าเริ่มต้นเป็น String ว่าง

3. ดับเบิ้ลคลิกที่ไฟล์ vue_hello01.html ที่เราเขียนโค้ดไว้แล้วในขั้นตอนที่ 2 จะเห็นว่ามีข้อความ Hello World, ปรากฏขึ้นมาในหน้าเว็บ และเมื่อลองกรอกข้อความลงไปในช่อง ข้อความนั้นก็จะแสดงออกทางหน้าเว็บทันที

เท่านี้เราก็จะสามารถเขียนโค้ด JavaScript เพื่อแสดงข้อความ Hello World พร้อมทั้งข้อความที่ผู้ใช้งานกรอกโดยใช้ Vue.js ได้แล้ว ไม่ยากเกินไปใช่ไหมครับ?

พื้นฐานที่ควรมีก่อนเรียนรู้ Vue.js

การใช้งาน Vue.js จำเป็นต้องใช้ความรู้การเขียนโปรแกรมเรื่อง HTML, CSS และ JavaScript ครับ

ถ้าผู้อ่านยังไม่มีพื้นฐานเหล่านี้หรือมีแล้วแต่อยากเรียนรู้เพิ่มเติมอย่างลึกซึ้ง นำไปใช้ต่อยอดได้จริง ก็ขอแนะนำคอร์ส Web Programming ของทาง EPT ครับ สามารถดูรายละเอียดคอร์สได้โดยคลิกที่นี่หรือติดต่อได้ที่ 085-350-7540

แล้วพบกันใหม่บทความหน้านะครับ

 

ที่มาและเว็บไซต์อ้างอิง

[1] สามารถเข้าไปดู Document และ Tutorial ที่เขียนไว้ได้ดีมากๆที่ https://vuejs.org/v2/guide/
[2] https://vuejs.org/v2/guide/single-file-components.html
[3] https://github.com/vuejs/awesome-vue#components--libraries
[4] https://web.archive.org/web/20170603052649/https://betweenthewires.org/2016/11/03/evan-you/



ไม่อยากอ่าน Tutorial อยากมาเรียนเลยทำอย่างไร?

สมัครเรียน ONLINE ได้ทันทีที่ https://elearn.expert-programming-tutor.com

หรือติดต่อ

085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM

แผนที่ ที่ตั้งของอาคารของเรา

Python

L16 PYTHON SIMPLE ARITHMETIC
L40 PYTHON TUTORIAL INTRO
L41 PYTHON GETTING STARTED
L42 PYTHON SYNTAX
L43 PYTHON COMMENTS
L44 PYTHON VARIABLES
L45 PYTHON DATATYPE
L46 PYTHON NUMBERS
L47 PYTHON CASING
L48 PYTHON STRINGS
L49 PYTHON BOOLEANS
L50 PYTHON OPARETORS
L51 PYTHON LISTS
L52 PYTHON TUPELS
L53 PYTHON SETS
L54 PYTHON DICTIONARY
L55 PYTHON IF ELSE
L56 PYTHON WHILE LOOP
L57 PYTHON FOR LOOP
L58 PYTHON FUNCTION
L59 PYTHON LAMBDA
L60 PYTHON ARRAYS
L61 PYTHON CLASSSES OBJECTS
L62 PYTHON INHERITANCE
L63 PYTHON ITERATORS
L63 PYTHON SCOPE
L64 PYTHON MODULES
L65 PYTHON DATETIME
L66 PYTHON JSON
L67 PYTHON REGEX
L68 PYTHON PIP
L69 PYTHON TRY EXCAPE
L70 PYTHON USER INPUT
L71 PYTHON FILE OPEN
L73 PYTHON STRING FORMATTING
L74 PYTHON READ FILE
L75 PYTHON WRILE CREATE FILE
L76 PYTHON DELETE FILE
L90 PYTHON POISSON DISTRIBUTION
L90 PYTHON RANDOM INTRODUCTION
L91 PYTHON CHI SQUARE DISTRIBUTION
L91 PYTHON EXPONENTIAL DISTRIBUTION
L92 PYTHON RAYLEIGH DISTRIBUTION
L93 PYTHON PARETO DISTRIBUTION
L94 PYTHON ZIPF DISTRIBUTION
L96 PYTHON RANDOM PERMUTATIONS
L97 PYTHON SEABORN
L98 PYTHON NORMAL DISTRIBUTION
L99 PYTHON DISTRIBUTION
L99 PYTHON LOGISTIC DISTRIBUTION
L99 PYTHON MULTINOMIAL DISTRIBUTION
L99 PYTHON NUMPY SPLITTING ARRAY
L99 PYTHON NUMPY UFUNCS
L99 PYTHON UNIFORM DISTRIBUTION
LM60PYTHON BUILT IN FUNCTIONS
LM61PYTHON STRING METHODS
LM62PYTHON LIST ARRAY METHODS
LM63PYTHON DICTIONARY METHODS
LM64PYTHON TUPLE METHODS
LM65PYTHON SET METHODS
LM66PYTHON FILE METHODS
LM67PYTHON KEYWORD
LM68PYTHON BUILT IN EXCAPTION
LM69PYTHON RANDOM MODULE
LM70PYTHON MATH MODULE
LM70PYTHON REQUSTS MODULE
LM72PYTHON CMATH MODULE
LM73PYTHON HOWTO REMOVE DUPLICATES FROM A PYTHON LIST
LM74PYTHON HOW TO REVERSE A STRING IN PYTHON
LM75PYTHON HOW TO ADD TWO NUMBERS IN PYTHON
LM95PYTHON RANDOM DATA DISTRIBUTION


แผนผังการเรียนเขียนโปรแกรม

Link อื่นๆ

Allow sites to save and read cookie data.
Cookies are small pieces of data created by sites you visit. They make your online experience easier by saving browsing information. We use cookies to improve your experience on our website. By browsing this website, you agree to our use of cookies.

Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com

ติดต่อเราได้ที่

085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
แผนที่ ที่ตั้งของอาคารของเรา