Commit 83af1888 authored by Spectre's avatar Spectre 💬

Update

parent a91110fa
......@@ -2,23 +2,18 @@ var app = new Vue({ //object
el: '#app', //element #app
//Script Lainnya diletakkan disini
data: {
pesan:'belajar VueJS'
pesan:'belajar vue.JS',
},
filters:{
kapital(value){
if (!value) return''
value = value.toString()
return value.toUpperCase()
},
kecil(value){
terbalik(value){
if (!value) return ''
value = value.toString()
return value.toLowerCase()
return value.split('').reverse().join('')
},
besarawal: function (value) {
terbalik2(value){
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
return value.split(' ').reverse().join(' ')
}
}
});
\ No newline at end of file
......@@ -12,15 +12,11 @@
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<div id="app">
Normal :
<b>{{pesan}}</b><br>
Huruf Kapital Semua :
<b>{{pesan | kapital}}</b><br>
Huruf Kecil Semua :
<b>{{pesan | kecil}}</b><br>
Huruf Kapital Awal :
<b>{{pesan | besarawal}}</b>
Text Aslinya : <b>{{ pesan }}</b><br>
Jika hurufnya terbalik menjadi :
<b>{{ pesan | terbalik }}</b><br>
Jika katanya dibalik akan menjadi :
<b>{{ pesan | terbalik2 }}</b>
</div>
<!-- Jika Menggunakan library Javascript vue.js yang terdapat di local-->
<!--<script src="vue.min.js"></script>-->
......
// Define a new component called button-counter
Vue.component('tebal', {
template: `<b>Ini tulisan tebal menggunakan component</b>`
})
new Vue({ el: '#app' })
<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>Belajar Vue JS</title>
</head>
<body>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- production version, optimized for size and speed -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<div id="app">
<tebal></tebal>
</div>
<!-- Jika Menggunakan library Javascript vue.js yang terdapat di local-->
<!--<script src="vue.min.js"></script>-->
<!--Memanggil javascript apps-->
<script src="apps.js"></script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
// Define a new component called button-counter
Vue.component('tebal', {
template: `<b>Ini tulisan tebal menggunakan component</b>`
})
new Vue({ el: '#app' })
<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>Belajar Vue JS</title>
</head>
<body>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- production version, optimized for size and speed -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<div id="app">
<tebal></tebal>
</div>
<!-- Jika Menggunakan library Javascript vue.js yang terdapat di local-->
<!--<script src="vue.min.js"></script>-->
<!--Memanggil javascript apps-->
<script src="apps.js"></script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
// Define a new component called button-counter
Vue.component("multi", {
template: `
<div>
<b>Ini tulisan tebal menggunakan component</b><br>
<i>Ini tulisan tebal menggunakan component</i><br>
<u>Ini tulisan tebal menggunakan component</u>
</div>
`
});
new Vue({ el: '#app' })
<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>Belajar Vue JS</title>
</head>
<body>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- production version, optimized for size and speed -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<div id="app">
<multi></multi>
</div>
<!-- Jika Menggunakan library Javascript vue.js yang terdapat di local-->
<!--<script src="vue.min.js"></script>-->
<!--Memanggil javascript apps-->
<script src="apps.js"></script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
vue.component ('daftar', {
template: `<div><siswa v-for="s in daftarsiswa"> {{s.nama}} kelas {{s.kelas}}</siswa></div>`,
data: function () {
return {
daftarsiswa: [
{ nama: 'gatot', kelas: 'X' },
{ nama: 'juwang', kelas: 'XI' },
{ nama: 'dedi', kelas: 'X' }
]
};
}
});
vue.component('siswa', {
template: `<li><slot></slot></li>`
});
var app = new Vue ({
el: '#app'
});
\ No newline at end of file
<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>Belajar Vue JS</title>
</head>
<body>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- production version, optimized for size and speed -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<div id="app">
<daftar></daftar>
</div>
<!-- Jika Menggunakan library Javascript vue.js yang terdapat di local-->
<!--<script src="vue.min.js"></script>-->
<!--Memanggil javascript apps-->
<script src="apps.js"></script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment