{"id":1082,"date":"2021-04-06T17:17:26","date_gmt":"2021-04-06T10:17:26","guid":{"rendered":"https:\/\/www.marketenterprise.vn\/blog\/?p=1082"},"modified":"2021-12-20T19:22:31","modified_gmt":"2021-12-20T12:22:31","slug":"vuejs-la-gi","status":"publish","type":"post","link":"https:\/\/www.marketenterprise.vn\/blog\/vuejs-la-gi.html","title":{"rendered":"VueJS l\u00e0 g\u00ec?"},"content":{"rendered":"<div style=\"text-align: justify;\">\n<h2>Server-side rendering v\u00e0 Client-side rendering:<\/h2>\n<div>\n<div>\u0110\u1ea7u ti\u00ean, ch\u00fang ta h\u00e3y n\u00f3i qua v\u1ec1 2 kh\u00e1i ni\u1ec7m l\u00e0 &#8220;server-side rendering&#8221; v\u00e0 &#8220;client-side rendering&#8221;.<\/div>\n<div><\/div>\n<h3>Server-side rendering:<\/h3>\n<div>L\u00e0 c\u01a1 ch\u1ebf \u0111\u00e3 t\u1ed3n t\u1ea1i v\u00e0 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng t\u1eeb r\u1ea5t r\u1ea5t l\u00e2u tr\u01b0\u1edbc \u0111\u00e2y. Khi g\u1ecdi &#8220;server-side&#8221; c\u00f3 ngh\u0129a l\u00e0 ph\u1ea7n l\u1edbn logic s\u1ebd \u0111\u01b0\u1ee3c x\u1eed l\u00fd \u1edf server. Ta s\u1ebd n\u00f3i s\u01a1 v\u1ec1 c\u01a1 ch\u1ebf ho\u1ea1t \u0111\u1ed9ng c\u1ee7a server-side render nh\u01b0 sau:<\/div>\n<ul>\n<li>Khi ng\u01b0\u1eddi d\u00f9ng truy c\u1eadp v\u00e0o trang web tr\u00ean tr\u00ecnh duy\u1ec7t, n\u00f3 s\u1ebd g\u1eedi m\u1ed9t y\u00eau c\u1ea7u (request) \u0111\u1ebfn server \u0111\u1ec3 y\u00eau c\u1ea7u x\u1eed l\u00fd t\u00e1c v\u1ee5 c\u1ee7a ng\u01b0\u1eddi d\u00f9ng (hi\u1ec3n th\u1ecb m\u1ed9t trang n\u00e0o \u0111\u00f3, kh\u1edfi t\u1ea1o m\u1ed9t c\u00e1i g\u00ec \u0111\u00f3&#8230;).<\/li>\n<li>Ti\u1ebfp theo, server sau khi nh\u1eadn \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u s\u1ebd th\u1ef1c hi\u1ec7n m\u1ed9t chu\u1ed7i c\u00e1c x\u1eed l\u00fd logic v\u00e0 l\u1ea5y d\u1eef li\u1ec7u.<\/li>\n<li>Cu\u1ed1i c\u00f9ng, server s\u1ebd th\u1ef1c hi\u1ec7n render ra th\u00e0nh HTML \u0111\u1ec3 tr\u1ea3 v\u1ec1 cho tr\u00ecnh duy\u1ec7t hi\u1ec3n th\u1ecb k\u1ebft qu\u1ea3 cho ng\u01b0\u1eddi d\u00f9ng.<\/li>\n<\/ul>\n<div><\/div>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1085 size-full\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2021\/04\/06145551\/server-side-rendering.png\" alt=\"server-site rendering - Marketenterprise VN\" width=\"497\" height=\"280\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2021\/04\/06145551\/server-side-rendering.png 497w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2021\/04\/06145551\/server-side-rendering-300x169.png 300w\" sizes=\"auto, (max-width: 497px) 100vw, 497px\" \/><\/div>\n<\/div>\n<div><\/div>\n<div><\/div>\n<p>&nbsp;<\/p>\n<blockquote style=\"margin-left: 1rem; border-left: 0.25rem solid #f08300; padding-left: 0.5rem;\"><p>V\u1eady v\u1ea5n \u0111\u1ec1 c\u1ee7a c\u01a1 ch\u1ebf n\u00e0y l\u00e0 g\u00ec? Khi server ph\u1ea3i x\u1eed l\u00fd qu\u00e1 nhi\u1ec1u logic cho nhi\u1ec1u ng\u01b0\u1eddi d\u00f9ng kh\u00e1c nhau th\u00ec s\u1ef1 qu\u00e1 t\u1ea3i l\u00e0 vi\u1ec7c kh\u00f4ng th\u1ec3 tr\u00e1nh kh\u1ecfi. Ngo\u00e0i ra, vi\u1ec7c refesh v\u00e0 load l\u1ea1i nhi\u1ec1u l\u1ea7n khi th\u1ef1c hi\u1ec7n c\u00e1c t\u00e1c v\u1ee5 nh\u01b0 chuy\u1ec3n trang, submit m\u1ed9t form n\u00e0o \u0111\u00f3 s\u1ebd t\u1ea1o ra s\u1ef1 kh\u00f3 ch\u1ecbu cho ng\u01b0\u1eddi s\u1eed d\u1ee5ng. B\u0103ng th\u00f4ng s\u1eed d\u1ee5ng khi tr\u1ea3 v\u1ec1 m\u00e3 HTML s\u1ebd r\u1ea5t l\u1edbn.<\/p><\/blockquote>\n<div>\n<div><\/div>\n<h3>Client-side rendering:<\/h3>\n<div>Khi k\u1ef9 thu\u1eadt ch\u1ebf t\u1ea1o ph\u1ea7n c\u1ee9ng ph\u00e1t tri\u1ec3n, ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 s\u1edf h\u1eefu \u0111\u01b0\u1ee3c nh\u1eefng chi\u1ebfc m\u00e1y t\u00ednh r\u1ea5t m\u1ea1nh m\u1ebd, c\u00f9ng v\u1edbi vi\u1ec7c gi\u1ea3i quy\u1ebft c\u00e1c v\u1ea5n \u0111\u1ec1 c\u1ee7a c\u01a1 ch\u1ebf server-side rendering. Ng\u01b0\u1eddi ta \u0111\u1eb7t ra c\u00e2u h\u1ecfi &#8220;t\u1ea1i sao kh\u00f4ng t\u1eadn d\u1ee5ng s\u1ee9c m\u1ea1nh ph\u1ea7n c\u1ee9ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng th\u1ef1c hi\u1ec7n vi\u1ec7c x\u1eed l\u00fd logic v\u00e0 render m\u00e3 HTML d\u00f9ng \u0111\u1ec3 hi\u1ec3n th\u1ecb&#8221;.<\/div>\n<div><\/div>\n<div>T\u1eeb \u0111\u00f3, c\u01a1 ch\u1ebf client-side rendering ra \u0111\u1eddi \u0111\u1ec3 c\u00f3 th\u1ec3 t\u1eadn d\u1ee5ng \u0111\u01b0\u1ee3c s\u1ee9c m\u1ea1nh ph\u1ea7n c\u1ee9ng t\u1eeb ph\u00eda client \u0111\u1ec3 gi\u1ea3m t\u1ea3i cho m\u00e1y ch\u1ee7 server. Ngo\u00e0i ra, k\u1ebft h\u1ee3p v\u1edbi vi\u1ec7c giao ti\u1ebfp th\u00f4ng qua c\u01a1 ch\u1ebf API (Application Programming Interface) ng\u01b0\u1eddi ta l\u1ea1i ph\u00e1t tri\u1ec3n th\u00e0nh m\u1ed9t kh\u00e1i ni\u1ec7m m\u1edbi l\u00e0 SPA (Single Page Application).<\/div>\n<\/div>\n<div><\/div>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1084 size-full\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2021\/04\/06145100\/client-side-render.png\" alt=\"Client-side render - Marketenterprise VN\" width=\"800\" height=\"418\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2021\/04\/06145100\/client-side-render.png 800w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2021\/04\/06145100\/client-side-render-300x157.png 300w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2021\/04\/06145100\/client-side-render-768x401.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/div>\n<div><\/div>\n<div>\n<div><\/div>\n<blockquote style=\"margin-left: 1rem; border-left: 0.25rem solid #f08300; padding-left: 0.5rem;\"><p>Vi\u1ec7c ra \u0111\u1eddi c\u1ee7a c\u01a1 ch\u1ebf client-side rendering v\u00e0 SPA (Single Page Application) \u0111\u00e3 gi\u1ea3i quy\u1ebft \u0111\u01b0\u1ee3c v\u1ea5n \u0111\u1ec1 gi\u1ea3m t\u1ea3i cho m\u00e1y ch\u1ee7 server, gi\u1ea3m l\u01b0\u1ee3ng b\u0103ng th\u00f4ng s\u1eed d\u1ee5ng v\u00ec server ch\u1ec9 tr\u1ea3 v\u1ec1 ki\u1ec3u d\u1eef li\u1ec7u json ho\u1eb7c xml. Ngo\u00e0i ra, v\u00ec kh\u00f4ng c\u1ea7n ph\u1ea3i load l\u1ea1i trang khi th\u1ef1c hi\u1ec7n c\u00e1c t\u00e1c v\u1ee5 s\u1ebd \u0111em l\u1ea1i m\u1ed9t tr\u1ea3i nghi\u1ec7m t\u1ed1t h\u01a1n cho ng\u01b0\u1eddi d\u00f9ng.<\/p><\/blockquote>\n<h2>VueJs<\/h2>\n<div>Sau khi \u0111\u00e3 bi\u1ebft v\u1ec1 server-side rendering v\u00e0 client-side rendering, ta \u0111\u00e3 hi\u1ec3u \u0111\u01b0\u1ee3c v\u00ec sao c\u00e1c Framework Js l\u1ea1i tr\u1edf th\u00e0nh &#8220;hot trend&#8221; r\u1ed3i ph\u1ea3i kh\u00f4ng. V\u00e0 h\u00f4m nay, m\u00ecnh mu\u1ed1n nh\u1eafc \u0111\u1ebfn m\u1ed9t trong nh\u1eefng Framework Js kh\u00e1 th\u00f4ng d\u1ee5ng v\u00e0 \u01b0u chu\u1ed9ng hi\u1ec7n nay l\u00e0 VueJS.<\/div>\n<h3><strong>T\u00edch h\u1ee3p v\u00e0o d\u1ef1 \u00e1n<\/strong><\/h3>\n<div>VueJs \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf theo h\u01b0\u1edbng ti\u1ebfp c\u1eadn t\u00edch h\u1ee3p d\u1ea7n d\u1ea7n. V\u00ec v\u1eady ta c\u00f3 th\u1ec3 t\u00edch h\u1ee3p VueJs v\u00e0o d\u1ef1 \u00e1n theo nhi\u1ec1u c\u00e1ch kh\u00e1c nhau tu\u1ef3 thu\u1ed9c v\u00e0o nhu c\u1ea7u s\u1eed d\u1ee5ng. Hi\u1ec7n t\u1ea1i c\u00f3 4 c\u00e1ch ch\u00ednh \u0111\u1ec3 ta c\u00f3 th\u1ec3 t\u00edch h\u1ee3p VueJs v\u00e0o d\u1ef1 \u00e1n:<\/div>\n<ol>\n<li>&nbsp;Ta ch\u1ec9 c\u1ea7n th\u00eam m\u1ed9t \u0111o\u1ea1n m\u00e3 nh\u00fang m\u1ed9t g\u00f3i CDN (Content Delivery Network &#8211; m\u1ea1ng ph\u00e2n ph\u1ed1i n\u1ed9i dung) v\u00e0o source code c\u1ee7a m\u00ecnh.<\/li>\n<\/ol>\n<\/div>\n<div>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"beyond\">&lt;script src=\"https:\/\/unpkg.com\/vue@next\"&gt;&lt;\/script&gt;<\/pre>\n<\/div>\n<div>\n<p>&nbsp; &nbsp; &nbsp;2. N\u1ebfu b\u1ea1n kh\u00f4ng mu\u1ed1n s\u1eed d\u1ee5ng CDN v\u00ec m\u1ed9t s\u1ed1 l\u00fd do n\u00e0o \u0111\u00f3 (\u0111\u01b0\u1eddng truy\u1ec1n kh\u00f4ng \u1ed5n \u0111\u1ecbnh, &#8230;) b\u1ea1n c\u00f3 th\u1ec3 download c\u00e1c file c\u00f3 extension .js v\u1ec1 tr\u00ean m\u00e1y ch\u1ee7 v\u00e0 th\u00eam n\u00f3 v\u00e0o b\u1eb1ng th\u1ebb &#8220;script&#8221; t\u01b0\u01a1ng t\u1ef1 v\u1edbi CDN.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"beyond\">&lt;script src=\"link-to-js-file\"&gt;&lt;\/script&gt;<\/pre>\n<div>&nbsp; &nbsp; &nbsp;3. VueJs \u0111\u1ec1 ngh\u1ecb r\u1eb1ng, b\u1ea1n n\u00ean s\u1eed d\u1ee5ng [npm](https:\/\/www.npmjs.com\/) \u0111\u1ec3 x\u00e2y d\u1ef1ng c\u00e1c \u1ee9ng d\u1ee5ng c\u00f3 quy m\u00f4 l\u1edbn. N\u1ebfu s\u1eed d\u1ee5ng c\u00e1ch n\u00e0y, ta c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c ch\u1ee9c n\u0103ng k\u1ebft h\u1ee3p v\u1edbi c\u00e1c module bundlers (c\u00e1c tool d\u00f9ng \u0111\u1ec3 qu\u1ea3n l\u00fd c\u00e1c g\u00f3i c\u00e0i \u0111\u1eb7t JS) nh\u01b0 [webpack](https:\/\/webpack.js.org\/).<\/div>\n<div><\/div>\n<p>&nbsp;<\/p>\n<div>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"beyond\">npm install vue@next<\/pre>\n<\/div>\n<div>&nbsp; &nbsp; 4. Cu\u1ed1i c\u00f9ng, Vue cung c\u1ea5p m\u1ed9t c\u00f4ng c\u1ee5 ch\u00ednh th\u1ee9c <a href=\"https:\/\/github.com\/vuejs\/vue-cli\" target=\"_blank\" rel=\"noopener\">vue-cli <\/a>\u0111\u1ec3 t\u1ea1o m\u1edbi m\u1ed9t c\u00e1ch nhanh ch\u00f3ng m\u1ed9t \u1ee9ng d\u1ee5ng SPA(Single Page Application). vue-cli cung c\u1ea5p cho ch\u00fang ta r\u1ea5t nhi\u1ec1u ti\u1ec7n d\u1ee5ng trong vi\u1ec7c l\u1eadp tr\u00ecnh nh\u01b0 t\u1ef1 \u0111\u1ed9ng reload khi c\u00f3 s\u1ef1 thay \u0111\u1ed5i m\u00e3, v\u00e0 c\u1ea3 ti\u1ec7n d\u1ee5ng trong vi\u1ec7c tri\u1ec3n khai s\u1ea3n ph\u1ea9m.<\/div>\n<p>&nbsp;<\/p>\n<div><\/div>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"beyond\">yarn global add @vue\/cli\n# OR\nnpm install -g @vue\/cli<\/pre>\n<div><\/div>\n<div>\n<h3><strong>C\u1ea5u tr\u00fac th\u01b0 m\u1ee5c<\/strong><\/h3>\n<div>Trong b\u00e0i vi\u1ebft n\u00e0y m\u00ecnh s\u1ebd t\u1eadp trung v\u00e0o ph\u01b0\u01a1ng ph\u00e1p \u0111\u1ec3 build 1 SPA (Single Page Application) s\u1eed d\u1ee5ng vue-cli.<\/div>\n<div><\/div>\n<div>M\u1ed9t SPA g\u1ed3m c\u00f3 c\u00e1c th\u01b0 m\u1ee5c ch\u00ednh sau:<\/div>\n<ul>\n<li>&nbsp;public: l\u00e0 th\u01b0 m\u1ee5c ch\u1ee9a file index.html c\u1ee7a ch\u00fang ta, \u0111\u00e2y l\u00e0 file ch\u00ednh \u0111\u1ec3 webserver c\u00f3 th\u1ec3 truy c\u1eadp v\u00e0o source code.<\/li>\n<li>src: l\u00e0 th\u01b0 m\u1ee5c ch\u1ee9a c\u00e1c ph\u1ea7n li\u00ean quan \u0111\u1ebfn x\u1eed l\u00fd logic, c\u00e1c resources.<br \/>\n&#8211; components: \u0111\u00e2y l\u00e0 th\u01b0 m\u1ee5c m\u00e0 ta s\u1ebd ch\u1ee9a c\u00e1c component (th\u00e0nh ph\u1ea7n) tr\u00ean \u1ee9ng d\u1ee5ng c\u1ee7a ch\u00fang ta.<br \/>\n&#8211; assets: l\u00e0 th\u01b0 m\u1ee5c ch\u1ee9a c\u00e1c file t\u0129nh (static) nh\u01b0 c\u00e1c file h\u00ecnh \u1ea3nh.<br \/>\n&#8211; App.vue: \u0111\u00e2y l\u00e0 Component ch\u00ednh c\u1ee7a ch\u00fang ta (hay c\u00f2n \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 main component), c\u00f3 th\u1ec3 xem l\u00e0 component \u0111\u01b0\u1ee3c truy c\u1eadp \u0111\u1ea7u ti\u00ean khi ta v\u00e0o m\u1ed9t SPA.<br \/>\n&#8211; main.js: \u0111\u00e2y l\u00e0 file js m\u00e0 Vue d\u00f9ng \u0111\u1ec3 load \u0111\u1ea7u ti\u00ean nh\u1ea5t. Trong file n\u00e0y s\u1ebd c\u00f3 ph\u1ea7n kh\u1edfi t\u1ea1o m\u1ed9t Vue Application v\u00e0 config cho Vue Application. Ngo\u00e0i ra, ta c\u00f3 th\u1ec3 vi\u1ebft c\u00e1c \u0111o\u1ea1n m\u00e3 m\u00e0 ta mu\u1ed1n load \u0111\u1ea7u ti\u00ean, th\u1eadm ch\u00ed l\u00e0 tr\u01b0\u1edbc khi Vue Application \u0111\u01b0\u1ee3c kh\u1edfi t\u1ea1o. V\u00ed d\u1ee5 nh\u01b0 load c\u00e1c th\u01b0 vi\u1ec7n c\u1ee7a b\u00ean th\u1ee9 3, ki\u1ec3m tra tr\u1ea1ng th\u00e1i n\u00e0o \u0111\u00f3 \u0111\u1ec3 x\u1eed l\u00fd.<\/li>\n<\/ul>\n<ul>\n<li>dist: \u0111\u00e2y l\u00e0 th\u01b0 m\u1ee5c ch\u1ee9a source code sau khi th\u1ef1c hi\u1ec7n build c\u00e1c \u0111o\u1ea1n m\u00e3 VueJS th\u00e0nh Javascript thu\u1ea7n, t\u1eaft \u0111i c\u00e1c c\u1ea3nh b\u00e1o (warning) hay b\u1ea5t c\u1ee9 ch\u1ebf \u0111\u1ed9 debug \u0111\u1ec3 ph\u1ee5c v\u1ee5 cho vi\u1ec7c tri\u1ec3n khai s\u1ea3n ph\u1ea9m m\u1ed9t c\u00e1ch ch\u1ec9n chu nh\u1ea5t.<\/li>\n<li>&nbsp;vue.config.js: \u0111\u00e2y l\u00e0 file d\u00f9ng \u0111\u1ec3 config m\u1ed9t s\u1ed1 option tu\u1ef3 ch\u1ecdn trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng. C\u00e1c b\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o th\u00eam \u1edf [<a href=\"https:\/\/cli.vuejs.org\/config\/\" target=\"_blank\" rel=\"noopener\">\u0111\u00e2y<\/a>]<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1089 size-full\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2021\/04\/06145622\/struct.png\" alt=\"C\u1ea5u tr\u00fac c\u1ee7a m\u1ed9t d\u1ef1 \u00e1n VueJS - MEVN\" width=\"443\" height=\"371\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2021\/04\/06145622\/struct.png 443w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2021\/04\/06145622\/struct-300x251.png 300w\" sizes=\"auto, (max-width: 443px) 100vw, 443px\" \/><\/div>\n<div><\/div>\n<p>&nbsp;<\/p>\n<h3><strong>Kh\u1edfi t\u1ea1o m\u1ed9t Component<\/strong><\/h3>\n<div>M\u00ecnh s\u1ebd kh\u1edfi t\u1ea1o m\u1ed9t component c\u00f3 ch\u1ee9c n\u0103ng in ra t\u00ean v\u00e0 \u0111\u1ecbnh d\u1ea1ng khi ta nh\u1eadp t\u00ean \u0111\u00f3 v\u00e0o m\u1ed9t \u00f4 input.<\/div>\n<div>Trong th\u01b0 m\u1ee5c \/src\/components ta t\u1ea1o file PrintName.vue.<\/div>\n<div>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"beyond\">&lt;template&gt;\n  &lt;div&gt;Your Name is: {{ display }}&lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\nexport default {\n  name: \"PrintName\",\n  props: ['name'],\n  computed: {\n    display: function () {\n      let name = this.name.toLowerCase();\n      return name.charAt(0).toUpperCase() + name.slice(1);\n    }\n  }\n}\n&lt;\/script&gt;\n\n&lt;style scoped&gt;\n\n&lt;\/style&gt;<\/pre>\n<\/div>\n<div>\u1ede \u0111\u00e2y ta s\u1ebd s\u1eed d\u1ee5ng m\u1ed9t kh\u00e1i ni\u1ec7m l\u00e0 props (c\u00f3 th\u1ec3 hi\u1ec3u n\u00f4m na l\u00e0 truy\u1ec1n 1 bi\u1ebfn t\u1eeb component cha v\u00e0o component con). \u1ede \u0111\u00e2y m\u00ecnh truy\u1ec1n 1 bi\u1ebfn t\u00ean l\u00e0 &#8220;name&#8221; t\u1eeb ngo\u00e0i v\u00e0o component PrintName.<\/div>\n<div><\/div>\n<div>Trong template, ta c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c bi\u1ec3u th\u1ee9c m\u1ed9t c\u00e1ch ti\u1ec7n l\u1ee3i v\u00e0 nhanh ch\u00f3ng, nh\u01b0ng \u0111\u00f3 l\u00e0 v\u1edbi nh\u1eefng bi\u1ec3u th\u1ee9c \u0111\u01a1n gi\u1ea3n v\u00e0 ng\u1eafn. V\u1edbi c\u00e1c bi\u1ec3u th\u1ee9c c\u1ef1c k\u1ef3 ph\u1ee9c t\u1ea1p, vue cung c\u1ea5p cho ta m\u1ed9t thu\u1ed9c t\u00ednh &#8220;computed&#8221; \u0111\u1ec3 ta c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n c\u00e1c bi\u1ec3u th\u1ee9c logic ph\u1ee9c t\u1ea1p m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng. Nh\u01b0 tr\u00ean \u0111o\u1ea1n code tr\u00ean, m\u00ecnh th\u1ef1c hi\u1ec7n vi\u1ec7c bi\u1ebfn gi\u00e1 tr\u1ecb c\u1ee7a bi\u1ebfn &#8220;name&#8221; th\u00e0nh t\u1ea5t c\u1ea3 ch\u1eef th\u01b0\u1eddng, sau \u0111\u00f3 th\u1ef1c hi\u1ec7n vi\u1ebft hoa ch\u1eef c\u00e1i \u0111\u1ea7u ti\u00ean.<\/div>\n<div>V\u00ec v\u1eady, b\u1ea5t k\u1ef3 gi\u00e1 tr\u1ecb n\u00e0o \u0111\u01b0\u1ee3c truy\u1ec1n v\u00e0o \u0111\u1ec1u s\u1ebd \u0111\u01b0\u1ee3c format l\u1ea1i v\u1edbi ch\u1eef c\u00e1i \u0111\u1ea7u vi\u1ebft hoa v\u00e0 c\u00e1c ch\u1eef c\u00e1i ti\u1ebfp theo vi\u1ebft th\u01b0\u1eddng.<\/div>\n<p>&nbsp;<\/p>\n<div>Ta s\u1eeda l\u1ea1i file \/src\/App.vue<\/div>\n<\/div>\n<div>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"beyond\">&lt;template&gt;\n&lt;div id=\"app\"&gt;\n&lt;div class=\"form\"&gt;\n&lt;input type=\"text\" v-model=\"name\"&gt;\n&lt;\/div&gt;\n&lt;div class=\"display\"&gt;\n&lt;!-- s\u1eed d\u1ee5ng component--&gt;\n&lt;PrintName :name=\"name\" \/&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script&gt;\nimport PrintName from \"@\/components\/PrintName\";\nexport default {\nname: 'App',\ndata: function() {\nreturn {\n\/\/ khai b\u00e1o bi\u1ebfn name\nname: '',\n}\n},\ncomponents: {\n\/\/ khai b\u00e1o component\nPrintName\n}\n}\n&lt;\/script&gt;\n&lt;style&gt;\n#app {\nfont-family: Avenir, Helvetica, Arial, sans-serif;\n-webkit-font-smoothing: antialiased;\n-moz-osx-font-smoothing: grayscale;\ntext-align: center;\ncolor: #2c3e50;\nmargin-top: 60px;\n}\n&lt;\/style&gt;<\/pre>\n<\/div>\n<div>\n<div>\u1ede \u0111\u00e2y ta s\u1ebd th\u1ef1c hi\u1ec7n import component &#8220;PrintName&#8221; m\u00e0 ta m\u1edbi vi\u1ebft v\u00e0o v\u00e0 khai b\u00e1o \u1edf thu\u1ed9c t\u00ednh components.<\/div>\n<div>Ta s\u1ebd s\u1eed d\u1ee5ng [<a href=\"https:\/\/vuejs.org\/v2\/api\/#v-model\" target=\"_blank\" rel=\"noopener\">v-model<\/a>] \u0111\u1ec3 g\u00e1n gi\u00e1 tr\u1ecb \u0111\u01b0\u1ee3c nh\u1eadp v\u00e0o t\u1eeb input v\u00e0o bi\u1ebfn name \u0111\u00e3 khai b\u00e1o \u1edf tr\u00ean <strong>v-model=&#8221;name&#8221;<\/strong>.<\/div>\n<div>K\u1ebft qu\u1ea3 ta s\u1ebd \u0111\u01b0\u1ee3c:<\/div>\n<p>&nbsp;<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1086 size-full\" style=\"padding: 20px; background-color: gray;\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2021\/04\/06145607\/demo-1.png\" alt=\"V\u00ed d\u1ee5 v\u1ec1 VueJS - MEVN\" width=\"374\" height=\"150\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2021\/04\/06145607\/demo-1.png 374w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2021\/04\/06145607\/demo-1-300x120.png 300w\" sizes=\"auto, (max-width: 374px) 100vw, 374px\" \/><\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1087 size-full\" style=\"padding: 20px; background-color: gray;\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2021\/04\/06145619\/demo-2.png\" alt=\"V\u00ed d\u1ee5 v\u1ec1 VueJS - MEVN\" width=\"373\" height=\"148\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2021\/04\/06145619\/demo-2.png 373w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2021\/04\/06145619\/demo-2-300x119.png 300w\" sizes=\"auto, (max-width: 373px) 100vw, 373px\" \/><\/div>\n<p>&nbsp;<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1088 size-full\" style=\"padding: 20px; background-color: gray;\" src=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2021\/04\/06145620\/demo-3.png\" alt=\"V\u00ed d\u1ee5 v\u1ec1 VueJS - MEVN\" width=\"377\" height=\"149\" srcset=\"https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2021\/04\/06145620\/demo-3.png 377w, https:\/\/mevn-public.s3-ap-southeast-1.amazonaws.com\/marketenterprise.vn\/wp-images\/2021\/04\/06145620\/demo-3-300x119.png 300w\" sizes=\"auto, (max-width: 377px) 100vw, 377px\" \/><\/div>\n<p>&nbsp;<\/p>\n<h2><strong>T\u1ed5ng k\u1ebft<\/strong><\/h2>\n<div>Qua b\u00e0i vi\u1ebft n\u00e0y, m\u00ecnh \u0111\u00e3 gi\u1edbi thi\u1ec7u v\u1edbi c\u00e1c b\u1ea1n v\u1ec1 VueJs, c\u00e1ch \u0111\u1ec3 t\u00edch h\u1ee3p VueJs v\u00e0o d\u1ef1 \u00e1n c\u1ee7a m\u00ecnh c\u0169ng nh\u01b0 c\u1ea5u tr\u00fac v\u00e0 c\u00e1ch vi\u1ebft m\u1ed9t component \u0111\u01a1n gi\u1ea3n. Ngo\u00e0i ra m\u00ecnh \u0111\u00e3 nh\u1eafc l\u1ea1i v\u1ec1 c\u00e1c kh\u00e1i ni\u1ec7m server-side rendering v\u00e0 client-side rendering. Nh\u01b0ng \u0111\u00e2y ch\u1ec9 l\u00e0 ph\u1ea7n gi\u1edbi thi\u1ec7u s\u01a1 l\u01b0\u1ee3c nh\u1ea5t v\u1ec1 VueJs, v\u00ec v\u1eady n\u1ebfu c\u00f3 h\u1ee9ng th\u00fa v\u1edbi Framework Js n\u00e0y, c\u00e1c b\u1ea1n h\u00e3y tham kh\u1ea3o th\u00eam tr\u00ean trang [<a href=\"https:\/\/v3.vuejs.org\/guide\/introduction.html\" target=\"_blank\" rel=\"noopener\">t\u00e0i li\u1ec7u<\/a>] c\u1ee7a n\u00f3 \u0111\u1ec3 hi\u1ec3u th\u00eam m\u1ed9t c\u00e1ch chi ti\u1ebft v\u1ec1 n\u00f3 nh\u00e9. xin c\u1ea3m \u01a1n c\u00e1c b\u1ea1n.<\/div>\n<div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>N\u1ebfu l\u00e0 m\u1ed9t l\u1eadp tr\u00ecnh vi\u00ean ho\u1eb7c ho\u1ea1t \u0111\u1ed9ng trong l\u0129nh v\u1ef1c k\u1ef9 thu\u1eadt h\u1ea7u nh\u01b0 ai trong ch\u00fang ta \u0111\u1ec1u bi\u1ebft, c\u00e1c framework js \u0111ang l\u00ean ng\u00f4i v\u00e0 g\u1ea7n nh\u01b0 l\u00e0 &#8220;hot trend&#8221; trong xu h\u01b0\u1edbng k\u1ef9 thu\u1eadt t\u1ea1i th\u1eddi \u0111i\u1ec3m hi\u1ec7n t\u1ea1i. C\u00e1c b\u1ea1n \u0111\u00e3 t\u1eebng \u0111\u1eb7t ra c\u00e2u h\u1ecfi, t\u1ea1i sao l\u1ea1i c\u00f3 xu h\u01b0\u1edbng nh\u01b0 v\u1eady, framework js c\u00f3 \u0111i\u1ec3m g\u00ec \u0111\u1eb7c bi\u1ec7t? Ch\u00fang ta h\u00e3y c\u00f9ng nhau t\u00ecm hi\u1ec3u \u1edf n\u1ed9i dung b\u00e0i vi\u1ebft n\u00e0y nh\u00e9.<\/p>\n","protected":false},"author":30,"featured_media":1090,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[34,22],"class_list":["post-1082","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-marketenterprise-vietnam","tag-technical"],"_links":{"self":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts\/1082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/comments?post=1082"}],"version-history":[{"count":0,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/posts\/1082\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/media\/1090"}],"wp:attachment":[{"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/media?parent=1082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/categories?post=1082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.marketenterprise.vn\/blog\/wp-json\/wp\/v2\/tags?post=1082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}