var vue = new Vue();
:
el: #app
data
để cung cấp cho giao diện (view)
hiển thị (render định dạng HTML) ra màn hìnhcomponent
, để có thể tái sử dụng lại code. Ví dụ: cùng 1 slider nhưng có thể hiển thị ở nhiều trang khác nhau (Trang chủ, Trang giới thiệu, Trang Quảng bá Sản phẩm, ...)
template
và vài chỗ đã đục lỗ sẵn placeholder
để khi cần sử dụng sẽ truyền dữ liệu vào.vuejs | index.html <- Trang chủ | +---css <- Thư mục chứa các file CSS dùng trong dự án (tự mình viết) | app.css +---img <- Thư mục chứa các ảnh dùng trong dự án | ... | +---js <- Thư mục chứa các file JS dùng trong dự án (tự mình viết) | app.js | +---pages <- Thư mục chứa các file HTML (Trang web con); được tố chức theo thư mục để tiện quản lý | | about.html <- Trang Giới thiệu | | contact.html <- Trang Liên hệ | | | \---news <- Các trang Tin tức | cuoc-song-ict.html | hanh-trinh-di-chung-taxi-ve-que.html | hien-thuc-hoa-y-tuong.html | \---vendor <- Thư mục chứa các Thư viện bên thứ 3 (3rd party) dùng trong thiết kế giao diện Frontend +---bootstrap <- Bootstrap | +---css | \---js | +---jquery <- JQuery | jquery.min.js | \---vuejs <- VueJS vue.js
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Học VueJS | Nền tảng .vn</title> <!-- Liên kết CSS Bootstrap --> <link href="vendor/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" /> <style> .news-item-img { min-height: 200px; height: 200px; } </style> </head> <body> <!-- Khung chứa (container) xử lý render của VueJS --> <div id="app"> <h1 class="text-center">Xin chào {{ message }}</h1> <!-- Sử dụng vòng lặp v-for để lặp in ra tất cả các Tin tức có trong mảng (array) `listNews` --> <div class="container"> <div class="row row-cols-1 row-cols-md-3"> <div class="col" v-for="item in listNews"> <news-item v-bind:obj="item" v-bind:key="item.id"></news-item> </div> </div> </div> </div> <!-- Liên kết Jquery --> <script src="vendor/jquery/jquery.min.js"></script> <!-- Liên kết Bootstrap --> <script src="vendor/bootstrap/js/bootstrap.min.js"></script> <!-- Liên kết VueJS --> <script src="vendor/vuejs/vue.js"></script> <!-- Code xử lý Trang web bằng VueJS --> <script src="js/app.js"></script> </body> </html>
// Khởi tạo thành phần Trình diễn giao diện (Template) cho từng mẫu Tin tức Vue.component('news-item', { props: ['obj'], template: ` <div class="card h-100 shadow-sm"> <img :src="obj.feature_image" alt="" class="card-img-top news-item-img"> <div class="card-body"> <h5 class="card-title">{{ obj.title }}</h5> <p class="card-text">{{ obj.description }}</p> </div> <div class="card-footer text-center"> <a :href="obj.link">Xem thêm</a> </div> </div> ` }) // Khởi tạo đối tượng (instance) Vue var vue = new Vue({ el: '#app', data: { message: 'VueJs - Nền Tảng.vn!', listNews: [{ id: 1, feature_image: 'img/marketing-1.png', title: '[VTV1] Chia sẻ lộ trình với người khác', description: 'Hiện thực hóa 1 ý tưởng đã thành công không dễ khi thị trường có nhiều sự khác biệt. Cùng tìm hiểu ngay!', link: '/pages/news/hien-thuc-hoa-y-tuong.html' }, { id: 2, feature_image: 'img/marketing-2.png', title: 'Hành trình đi chung taxi về quê', description: 'Chương trình "Hành trình 24h" được phát xong (12h55) ngày 03/02/2016 đề cập đến vấn đề đi chung taxi về quê.', link: '/pages/news/hanh-trinh-di-chung-taxi-ve-que.html' }, { id: 3, feature_image: 'img/slider-1.jpg', title: '[VTC2] Phóng sự đi chung xe taxi Nội Bài', description: 'Đi chung xe ngoài việc giảm ùn tắc, tiết kiệm chi phí, bảo vệ môi trường, đi chung xe còn là cơ hội để tìm kiếm bạn bè, đối tác...', link: '/pages/news/cuoc-song-ict.html' }, ] } });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- Liên kết CSS của Bootstrap --> <link href="vendor/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" /> <link href="vendor/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet" /> <style> .box1 { border: 1px solid red; } </style> </head> <body> <div id="app"> <h1>Danh sách Dánh giá</h1> <div v-for="dg in listDanhGia"> <danhgia-item v-bind:obj="dg" v-bind:key="dg.id"></danhgia-item> </div> </div> <!-- Liên kết JS Jquery --> <script src="vendor/jquery/jquery.min.js"></script> <!-- Liên kết JS Bootstrap --> <script src="vendor/bootstrap/js/bootstrap.min.js"></script> <!-- Models --> <script src="vendor/vuejs/vue.js"></script> <script> // Khởi tạo thành phần Trình diễn giao diện (Template) cho từng mẫu Tin tức Vue.component('danhgia-item', { props: ['obj'], template: ` <div class="card h-100 shadow-sm"> <div class="card-header d-flex justify-content-between"> <div> <i class="fa fa-star text-primary" v-for="n in obj.sosao"></i> </div> <div> {{ obj.ngaydang }} </div> </div> <div class="card-body"> {{ obj.mota }} </div> <div class="card-footer text-right"> {{ obj.tacgia }} </div> </div> ` }); var vue = new Vue({ el: '#app', data: { listDanhGia: [ { id: 1, sosao: 5, ngaydang: '04/09/2020', mota: 'mô tả ngắn gọn 1', tacgia: 'Nguyễn văn đánh giá 1' }, { id: 2, sosao: 4, ngaydang: '05/09/2020', mota: 'mô tả ngắn gọn 2', tacgia: 'Nguyễn văn đánh giá 2' }, { id: 3, sosao: 3, ngaydang: '02/09/2020', mota: 'mô tả ngắn gọn 3', tacgia: 'Nguyễn văn đánh giá 3' }, ] } }); </script> </body> </html>
Cùng nhau học tập, khám phá các kiến thức nền tảng về Lập trình web, mobile, database nhé.
Nền tảng kiến thức - Hành trang tới tương lai hân hạnh phục vụ Quý khách!
Khám phá, trải nghiệm ngay
Vui lòng đăng nhập để gởi bình luận!
Đăng nhậpChưa có bình luận nào!