5 Contoh Praktis Belajar Vue.js
Vue js merupakan salah satu framework JavaScript. Vue JS merupakan framework untuk kebutuhan front end dari sebuah project. Vue js juga telah mengumpulkan komunitas developer yang sangat antusias.
Filosofi dibalik vue js adalah menyediakan API yang paling sederhana untuk membuat data dua arah secara real-time, antara tampilan(HTML) dan model (objek JavaScript). Seperti yang akan Anda lihat pada contoh berikut, library memegang gagasan itu dan dapat bekerja dengan mudah dan menyenangkan tanpa mengorbankan apa pun.
Cara termudah untuk menginstall vuejs adalah dengan menyertakaj tag <script> di akhit body HTML Anda. Semua librari terletak dalam satu file JavaScript yang dapat Anda download dari situs resmi atau langsung masuk melalui CDN:
Jika Anda ingin menggunakan library di proyek Node.js, vue tersedia sebagai modul npm. Ada juga CLI resmi, yang memungkinkan pengguna untuk mengatur keseluruhan proyek dengan cepat berdasarkan kerangka pratinjau
Berikut adalah lima editor yang berisi contoh aplikasi yang telah disiapkan untuk Anda. Kode ini memiliki banyak komentar dan dipisahkan dalam tab untuk setiap file, sehingga sangat mudah untuk diikuti. Editor memiliki vue.js built-in jadi jangan takut untuk bereksperimen. Selain itu, Anda dapat mendownload arsip yang berisi semua contoh.
-
Menu Navigasi
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js Menu Navigasi</title>
<style>
*{
margin:0;
padding:0;
}
body{
font:15px/1.3 'Open Sans', sans-serif;
color: #5e5b64;
text-align:center;
}
a, a:visited {
outline:none;
color:#389dc1;
}
a:hover{
text-decoration:none;
}
section, footer, header, aside, nav{
display: block;
}
nav{
display:inline-block;
margin:60px auto 45px;
background-color:#5597b4;
box-shadow:0 1px 1px #ccc;
border-radius:2px;
}
nav a{
display:inline-block;
padding: 18px 30px;
color:#fff !important;
font-weight:bold;
font-size:16px;
text-decoration:none !important;
line-height:1;
text-transform: uppercase;
background-color:transparent;
-webkit-transition:background-color 0.25s;
-moz-transition:background-color 0.25s;
transition:background-color 0.25s;
}
nav a:first-child{
border-radius:2px 0 0 2px;
}
nav a:last-child{
border-radius:0 2px 2px 0;
}
nav.home .home,
nav.projects .projects,
nav.services .services,
nav.contact .contact{
background-color:#e35885;
}
p{
font-size:22px;
font-weight:bold;
color:#7d9098;
}
p b{
color:#ffffff;
display:inline-block;
padding:5px 10px;
background-color:#c4d7e0;
border-radius:2px;
text-transform:uppercase;
font-size:18px;
}
</style>
</head>
<body>
<div id="main">
<nav v-bind:class="active" v-on:click.prevent>
<a href="#" class="home" v-on:click="makeActive('home')">Home</a>
<a href="#" class="services" v-on:click="makeActive('service')">Service</a>
<a href="#" class="projects" v-on:click="makeActive('About')">About Us</a>
<a href="#" class="contact" v-on:click="makeActive('galeri')">Galeri</a>
<a href="#" class="contact" v-on:click="makeActive('news')">News</a>
</nav>
<p>Menu Pilihan Anda <b>{{active}}</b></p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
<script>
var demo = new Vue({
el: '#main',
data: {
active: 'home'
},
methods: {
makeActive: function(item){
this.active = item;
}
}
});
</script>
</body>
</html>
Pertama kita akan membangun bar navigasi sederhana. Ada beberapa komponen dasar yang hampir setiap aplikasi vue.js perlu miliki seperti sebagai berikut:
- Model atau dengan kata lain data aplikasi kami. Di vue.js, ini hanyalah sebuah objek JavaScript yang berisi variabel dan nilai awalnya
- Template HTML, istilah yang benar untuk tampilan. Disini kita bisa memilih apa yang akan ditampilkan, menambahkan event listener dan menganggapi penggunaan yang berbeda untuk model.
- ViewModel – contoh Vue yang mengikat model dan tampilan bersama, memungkinkan nya untuk berkomunikasi satu sama lain
Gagasan dibalik kata-kata ini adalah bahwa model dan tampilan akan selalu sinkron. Mengubah model akan langsung mengupdate tampilan dan sebaliknya. Pada contoh pertama kami ditunjukan dengan variabel aktif, yang mewakili item menu yang saat ini dipilih.
Seperti yang bisa Anda lihat bekerja dengan library cukup mudah. Vue.js melakukan banyak pekerjaan untuk kita dan memberikan sintaks yang akrab, simple dan mudah diingat.
- Objek JavaScript sederhana untuk semua pilihan
- {{double brackets}} untuk template
- Atribut inline v-something untuk menambahkan fungsionalitas secara langsung di HTML
-
Inline Editor
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js Inline Editor</title>
<style>
[v-cloak] {
display: none;
}
*{
margin:0;
padding:0;
}
body{
font:15px/1.3 'Open Sans', sans-serif;
color: #5e5b64;
text-align:center;
}
a, a:visited {
outline:none;
color:#389dc1;
}
a:hover{
text-decoration:none;
}
section, footer, header, aside, nav{
display: block;
}
.tooltip{
background-color:#5c9bb7;
background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
background-image:linear-gradient(top, #5c9bb7, #5392ad);
box-shadow: 0 1px 1px #ccc;
border-radius:3px;
width: 290px;
padding: 10px;
position: absolute;
left:50%;
margin-left:-150px;
top: 80px;
}
.tooltip:after{
content:'';
position:absolute;
border:6px solid #5190ac;
border-color:#5190ac transparent transparent;
width:0;
height:0;
bottom:-12px;
left:50%;
margin-left:-6px;
}
.tooltip input{
border: none;
width: 100%;
line-height: 34px;
border-radius: 3px;
box-shadow: 0 2px 6px #bbb inset;
text-align: center;
font-size: 16px;
font-family: inherit;
color: #8d9395;
font-weight: bold;
outline: none;
}
p{
font-size:22px;
font-weight:bold;
color:#6d8088;
height: 30px;
cursor:default;
}
p b{
color:#ffffff;
display:inline-block;
padding:5px 10px;
background-color:#c4d7e0;
border-radius:2px;
text-transform:uppercase;
font-size:18px;
}
p:before{
content:'✎';
display:inline-block;
margin-right:5px;
font-weight:normal;
vertical-align: text-bottom;
}
#main{
height:300px;
position:relative;
padding-top: 150px;
}
</style>
</head>
<body>
<div id="main" v-cloak v-on:click="hideTooltip">
<div class="tooltip" v-on:click.stop v-if="show_tooltip">
<input type="text" v-model="text_content" />
</div>
<p v-on:click.stop="toggleTooltip">{{text_content}}</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
<script>
var demo = new Vue({
el: '#main',
data: {
show_tooltip: false,
text_content: 'Edit me.'
},
methods: {
hideTooltip: function(){
this.show_tooltip = false;
},
toggleTooltip: function(){
this.show_tooltip = !this.show_tooltip;
}
}
})
</script>
</body>
</html>
Pada contoh sebelumnya, model kita hanya memiliki beberapa nilai yang telah ditentukan. Jika kita ingin memberi kemampuan untuk mengatur data apa pun, kita dapat melakukan pengikatan dua arah dan menghubungkan field masukan dengan properti model. Saat teks dimasukan, maka secara otomatis disimpan dalam model text_content, yang kemudian menyebabkan tampilan untuk diperbarui.
Hal lain yang perlu diperhatikan dalam kode diatas adalah atribut v-if. Menunjukan atau menyembunyikan keseluruhan elemen tergantung pada kebenaran variabe. Anda bisa membaca lebih banyak tentang itu disini.
-
Form Order
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js Form Order</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Cookie);
[v-cloak] {
display: none;
}
*{
margin:0;
padding:0;
}
body{
font:15px/1.3 'Open Sans', sans-serif;
color: #5e5b64;
text-align:center;
}
a, a:visited {
outline:none;
color:#389dc1;
}
a:hover{
text-decoration:none;
}
section, footer, header, aside, nav{
display: block;
}
form{
background-color: #61a1bc;
border-radius: 2px;
box-shadow: 0 1px 1px #ccc;
width: 400px;
padding: 35px 60px;
margin: 50px auto;
}
form h1{
color:#fff;
font-size:64px;
font-family:'Cookie', cursive;
font-weight: normal;
line-height:1;
text-shadow:0 3px 0 rgba(0,0,0,0.1);
}
form ul{
list-style:none;
color:#fff;
font-size:20px;
font-weight:bold;
text-align: left;
margin:20px 0 15px;
}
form ul li{
padding:20px 30px;
background-color:#e35885;
margin-bottom:8px;
box-shadow:0 1px 1px rgba(0,0,0,0.1);
cursor:pointer;
}
form ul li span{
float:right;
}
form ul li.active{
background-color:#8ec16d;
}
div.total{
border-top:1px solid rgba(255,255,255,0.5);
padding:15px 30px;
font-size:20px;
font-weight:bold;
text-align: left;
color:#fff;
}
div.total span{
float:right;
}
</style>
</head>
<body>
<form id="main" v-cloak>
<h1>Barang</h1>
<ul>
<li v-for="service in services" v-on:click="toggleActive(service)" v-bind:class="{ 'active': service.active}">
{{service.name}} <span>{{service.price | currency}}</span>
</li>
</ul>
<div class="total">
Total: <span>{{total() | currency}}</span>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
<script>
Vue.filter('currency', function (value) {
return 'Rp ' + value.toFixed(2);
});
var demo = new Vue({
el: '#main',
data: {
services: [
{
name: 'Buku Tulis',
price: 5000,
active:true
},{
name: 'Pensil',
price: 2500,
active:false
},{
name: 'Penghapus',
price: 1000,
active:false
},{
name: 'Ballpoint',
price: 3000,
active:false
}
]
},
methods: {
toggleActive: function(s){
s.active = !s.active;
},
total: function(){
var total = 0;
this.services.forEach(function(s){
if (s.active){
total+= s.price;
}
});
return total;
}
}
});
</script>
</body>
</html>
Contoh ini menggambarkan beberapa layanan dan total biaya. Karena layanan kami simpan didalam array, kita dapat memanfaatkan v-for directive untuk loop melalui semua entri dan menampilkannya. Jika elemen baru ditambahkan ke array atau elemen lama diubah, vue.js akan memperbarui dan menampilkan data baru secara otomatis.
Untuk menampilkan harga dalam format yang benar, kita harus mendefinisikan filter mata uang sederhana. Filter memungkinkan kita untuk malas memodifikasi atau memfilter data model. Untuk menentukan filter khusu kita harus menggunakan sintaks berikut:
Seperti yang Anda lihat, filternya cukup mudah, hanya menambahkan tanda dolar dan jumlah desimal yang tepat. Sama seperti pada filter sudut diterapkan dengan menggunakan | sintaks
-
Instant search
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js Instant Search</title>
<style>
[v-cloak] {
display: none;
}
*{
margin:0;
padding:0;
}
body{
font:15px/1.3 'Open Sans', sans-serif;
color: #5e5b64;
text-align:center;
}
a, a:visited {
outline:none;
color:#389dc1;
}
a:hover{
text-decoration:none;
}
section, footer, header, aside, nav{
display: block;
}
.bar{
background-color:#5c9bb7;
background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
background-image:linear-gradient(top, #5c9bb7, #5392ad);
box-shadow: 0 1px 1px #ccc;
border-radius: 2px;
width: 400px;
padding: 14px;
margin: 45px auto 20px;
position:relative;
}
.bar input{
background:#fff no-repeat 13px 13px;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkU5NEY0RTlFMTA4NzExRTM5RTEzQkFBQzMyRjkyQzVBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkU5NEY0RTlGMTA4NzExRTM5RTEzQkFBQzMyRjkyQzVBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTk0RjRFOUMxMDg3MTFFMzlFMTNCQUFDMzJGOTJDNUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTk0RjRFOUQxMDg3MTFFMzlFMTNCQUFDMzJGOTJDNUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4DjA/RAAABK0lEQVR42pTSQUdEURjG8dOY0TqmPkGmRcqYD9CmzZAWJRHVRIa0iFYtM6uofYaiEW2SRJtEi9YxIklp07ZkWswu0v/wnByve7vm5ee8M+85zz1jbt9Os+WiGkYdYxjCOx5wgFeXUHmtBSzpcCGa+5BJTCjEP+0nKWAT8xqe4ArPGEEVC1hHEbs2oBwdXkM7mj/JLZrad437sCGHOfUtcziutuYu2v8XUFF/4f6vMK/YgAH1HxkBYV60AR31gxkBYd6xAeF3VzMCwvzOBpypX8V4yuFRzX2d2gD/l5yjH4fYQEnzkj4fae5rJulF2sMXVrAsaTWttRFu4Osb+1jEDT71/ZveyhouTch2fINQL9hKefKjuYFfuznXWzXMTabyrvfyIV3M4vhXgAEAUMs7K0J9UJAAAAAASUVORK5CYII=);
border: none;
width: 100%;
line-height: 19px;
padding: 11px 0;
border-radius: 2px;
box-shadow: 0 2px 8px #c4c4c4 inset;
text-align: left;
font-size: 14px;
font-family: inherit;
color: #738289;
font-weight: bold;
outline: none;
text-indent: 40px;
}
ul{
list-style: none;
width: 428px;
margin: 0 auto;
text-align: left;
}
ul li{
border-bottom: 1px solid #ddd;
padding: 10px;
overflow: hidden;
}
ul li img{
width:60px;
height:60px;
float:left;
border:none;
}
ul li p{
margin-left: 75px;
font-weight: bold;
padding-top: 12px;
color:#6e7a7f;
}
</style>
</head>
<body>
<form id="main" v-cloak>
<div class="bar">
<input type="text" v-model="searchString" placeholder="Enter your search terms" />
</div>
<ul>
<li v-for="article in filteredArticles">
<a v-bind:href="article.url"><img v-bind:src="article.image" /></a>
<p>{{article.title}}</p>
</li>
</ul>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
<script>
var demo = new Vue({
el: '#main',
data: {
searchString: "",
articles: [
{
"title": "5 Alternatif Node.js untuk WordPress",
"url": "https://trustme.co.id/5-alternatif-node-js-untuk-wordpress/",
"image": "https://trustme.co.id/wp-content/uploads/2017/11/Screenshot_26.png"
},
{
"title": "Perbandingan Umum Antara Dua Framework Kontemporer : AngularJS vs Vue.js",
"url": "https://trustme.co.id/perbandingan-umum-antara-dua-framework-kontemporer-angularjs-vs-vue-js/",
"image": "https://trustme.co.id/wp-content/uploads/2017/03/a-vs-v.png"
},
{
"title": "Tutorial SQL",
"url": "https://trustme.co.id/tutorial-sql/",
"image": "https://trustme.co.id/wp-content/uploads/2017/04/AAEAAQAAAAAAAAeiAAAAJDRhZGUzMWRhLTI4ODMtNDc1OS1hMDc5LTQwODAwZGI2OTdlMg.png"
},
{
"title": "Bahasa Apa Sajakah yang Harus Dipelajari untuk Web Developer",
"url": "https://trustme.co.id/bahasa-apa-sajakah-yang-harus-dipelajari-untuk-web-developer/",
"image": "https://trustme.co.id/wp-content/uploads/2016/11/web-dev.jpg"
},
{
"title": "Pure.css Menawarkan Alternatif dari Bootstrap",
"url": "https://trustme.co.id/pure-css-menawarkan-alternatif-dari-bootstrap/",
"image": "https://trustme.co.id/wp-content/uploads/2016/07/get-started.jpg"
},
{
"title": "5 Framework PHP Terbaik untuk Developer",
"url": "https://trustme.co.id/5-framework-php-terbaik-untuk-developer/",
"image": "https://trustme.co.id/wp-content/uploads/2017/04/top10.png"
}
]
},
computed: {
filteredArticles: function () {
var articles_array = this.articles,
searchString = this.searchString;
if(!searchString){
return articles_array;
}
searchString = searchString.trim().toLowerCase();
articles_array = articles_array.filter(function(item){
if(item.title.toLowerCase().indexOf(searchString) !== -1){
return item;
}
})
return articles_array;;
}
}
});
</script>
</body>
</html>
Disini kita akan membuat sebuah aplikasi yang menampilkan beberapa artikel di website kami aplikasi ini juga akan memiliki field pencarian teks yang memungkinkan kita untuk memfilter artikel yang mana yang akan ditampilkan. Semua artikel akan disimpan dalam array artikel, dan artikel yang sesuai dengan query penelusuran akan berada dalam properti yang dihitung disebut filteredArticles.
Field input terikat pada model searchString. Saat teks yang dimasukan, model ini langsung diperbarui dan rangkaian filteredArtices yang dihitung akan dihasilkan lagi. Dengan cara ini kita bisa membuat pencarian real-time tanpa harus khawatir rendering atau setting event listener – vue.js menangani semua itu
-
Switchable Grid
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js Switchable Grid</title>
<style>
[v-cloak] {
display: none;
}
*{
margin:0;
padding:0;
}
body{
font:15px/1.3 'Open Sans', sans-serif;
color: #5e5b64;
text-align:center;
}
a, a:visited {
outline:none;
color:#389dc1;
}
a:hover{
text-decoration:none;
}
section, footer, header, aside, nav{
display: block;
}
.bar{
background-color:#5c9bb7;
background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
background-image:linear-gradient(top, #5c9bb7, #5392ad);
box-shadow: 0 1px 1px #ccc;
border-radius: 2px;
width: 580px;
padding: 10px;
margin: 45px auto 25px;
position:relative;
text-align:right;
line-height: 1;
}
.bar a{
background:#4987a1 center center no-repeat;
width:32px;
height:32px;
display:inline-block;
text-decoration:none !important;
margin-right:5px;
border-radius:2px;
cursor:pointer;
}
.bar a.active{
background-color:#c14694;
}
.bar a.list-icon{
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYzNkFCQ0ZBMTBCRTExRTM5NDk4RDFEM0E5RkQ1NEZCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYzNkFCQ0ZCMTBCRTExRTM5NDk4RDFEM0E5RkQ1NEZCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjM2QUJDRjgxMEJFMTFFMzk0OThEMUQzQTlGRDU0RkIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjM2QUJDRjkxMEJFMTFFMzk0OThEMUQzQTlGRDU0RkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7h1bLqAAAAWUlEQVR42mL8////BwYGBn4GCACxBRlIAIxAA/4jaXoPEkMyjJ+A/g9MDJQBRhYg8RFqMwg8RJIUINYLFDmBUi+ADQAF1n8ofk9yIAy6WPg4GgtDMRYAAgwAdLYwLAoIwPgAAAAASUVORK5CYII=);
}
.bar a.grid-icon{
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBEQkMyQzE0MTBCRjExRTNBMDlGRTYyOTlBNDdCN0I4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjBEQkMyQzE1MTBCRjExRTNBMDlGRTYyOTlBNDdCN0I4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MERCQzJDMTIxMEJGMTFFM0EwOUZFNjI5OUE0N0I3QjgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MERCQzJDMTMxMEJGMTFFM0EwOUZFNjI5OUE0N0I3QjgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4MjPshAAAAXklEQVR42mL4////h/8I8B6IGaCYKHFGEMnAwCDIAAHvgZgRyiZKnImBQsACxB+hNoDAQyQ5osQZIT4gH1DsBZABH6AB8x/JaQzEig++WPiII7Rxio/GwmCIBYAAAwAwVIzMp1R0aQAAAABJRU5ErkJggg==);
}
.bar input{
background:#fff no-repeat 13px 13px;
border: none;
width: 100%;
line-height: 19px;
padding: 11px 0;
border-radius: 2px;
box-shadow: 0 2px 8px #c4c4c4 inset;
text-align: left;
font-size: 14px;
font-family: inherit;
color: #738289;
font-weight: bold;
outline: none;
text-indent: 40px;
}
ul.list{
list-style: none;
width: 500px;
margin: 0 auto;
text-align: left;
}
ul.list li{
border-bottom: 1px solid #ddd;
padding: 10px;
overflow: hidden;
}
ul.list li img{
width:120px;
height:120px;
float:left;
border:none;
}
ul.list li p{
margin-left: 135px;
font-weight: bold;
color:#6e7a7f;
}
ul.grid{
list-style: none;
width: 570px;
margin: 0 auto;
text-align: left;
}
ul.grid li{
padding: 2px;
float:left;
}
ul.grid li img{
width:280px;
height:280px;
object-fit: cover;
display:block;
border:none;
}
</style>
</head>
<body>
<form id="main" v-cloak>
<div class="bar">
<a class="list-icon" v-bind:class="{ 'active': layout == 'list'}" v-on:click="layout = 'list'"></a>
<a class="grid-icon" v-bind:class="{ 'active': layout == 'grid'}" v-on:click="layout = 'grid'"></a>
</div>
<ul v-if="layout == 'grid'" class="grid">
<li v-for="a in articles">
<a v-bind:href="a.url" target="_blank"><img v-bind:src="a.image.large" /></a>
</li>
</ul>
<ul v-if="layout == 'list'" class="list">
<li v-for="a in articles">
<a v-bind:href="a.url" target="_blank"><img v-bind:src="a.image.small" /></a>
<p>{{a.title}}</p>
</li>
</ul>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
<script>
var demo = new Vue({
el: '#main',
data: {
layout: 'grid',
articles: [{
"title": "5 Alternatif Node.js untuk WordPress",
"url": "https://trustme.co.id/5-alternatif-node-js-untuk-wordpress/",
"image": {
"large": "https://trustme.co.id/wp-content/uploads/2017/11/Screenshot_26.png",
"small": "http://localhost/learning-vue-js/1.png"
}
},
{
"title": "Perbandingan Umum Antara Dua Framework Kontemporer : AngularJS vs Vue.js",
"url": "https://trustme.co.id/perbandingan-umum-antara-dua-framework-kontemporer-angularjs-vs-vue-js/",
"image": {
"large": "https://trustme.co.id/wp-content/uploads/2017/03/a-vs-v.png",
"small": "http://localhost/learning-vue-js/4.png"
}
},
{
"title": "Tutorial SQL",
"url": "https://trustme.co.id/tutorial-sql/",
"image": {
"large": "https://trustme.co.id/wp-content/uploads/2017/04/AAEAAQAAAAAAAAeiAAAAJDRhZGUzMWRhLTI4ODMtNDc1OS1hMDc5LTQwODAwZGI2OTdlMg.png",
"small": "http://localhost/learning-vue-js/3.png"
}
},
{
"title": "Bahasa Apa Sajakah yang Harus Dipelajari untuk Web Developer",
"url": "https://trustme.co.id/bahasa-apa-sajakah-yang-harus-dipelajari-untuk-web-developer/",
"image": {
"large": "https://trustme.co.id/wp-content/uploads/2016/11/web-dev.jpg",
"small": "http://localhost/learning-vue-js/2.png"
}
},
{
"title": "Pure.css Menawarkan Alternatif dari Bootstrap",
"url": "https://trustme.co.id/pure-css-menawarkan-alternatif-dari-bootstrap/",
"image": {
"large": "https://trustme.co.id/wp-content/uploads/2016/07/get-started.jpg",
"small": "http://localhost/learning-vue-js/5.png"
}
},
{
"title": "5 Framework PHP Terbaik untuk Developer",
"url": "https://trustme.co.id/5-framework-php-terbaik-untuk-developer/",
"image": {
"large": "https://trustme.co.id/wp-content/uploads/2017/04/top10.png",
"small": "http://localhost/learning-vue-js/6.png"
}
}]
}
});
</script>
</body>
</html>
Dalan contoh terakhir ini, kami akan menunjukan skenario umum dimana halaman memiliki layout yang berbeda. Sama seperti di aplikasi sebelumnya kita akan menampilkan daftar artikel trustme.co.id yang tersimpan dalam array.
