1. VueJS 2: Khởi tạo Vue và Component
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html> <html lang="en"> <body> <div id="app1">1. Vue2 mount by "el"</div> <div id="app2">2. Vue2 mount by "$mount"</div> <div id="app3">3. Dữ liệu sẽ bị thay thế</div> <div id="app4"> <component1></component1> <component2></component2> </div> <script> //1. Có 2 cách Vue mount vào element: dùng "el" hoặc dùng "$mount" let app1 = new Vue({ el: "#app1", }); let app2 = new Vue({ }).$mount("#app2"); //2. Khi dùng "template" Vue sẽ replace hoàn toàn dữ liệu của element có id được chỉ định let app3 = new Vue({ template: `<p>3. Vue2 use template</p>` }).$mount("#app3"); //3. Khai báo component dạng global Vue.component("component1", { template: "<div>This is component 1</div>" }); //4. Khai báo component dạng local let app4 = new Vue({ el: "#app4", components: { component2: { template: "<div>This is component 2</div>" } } }); </script> </body> </html> |
