Membahas dasar penggunaan jQuery dan Vuejs dan teknik ajax

1. Belajar Ajax dengan jQuery dan VueJs
By : Edi Santoso
Events :
Workshop teknis javascript
7 November 2015
SMK Telkom Sandhy Putra Malang

2. About me...
Nothing special …
Backend Developer
PHP (Laravel Framework & Ruby On Rails)
Frontend Developer
(jQuery, Vue.js, AngularJs, Bootstrap and
Material Design)

3. Javascript Frameworks...

4. The preparation (source code)...
Clone the repo
https://github.com/cyberid41/belajar-ajax-dengan-
jquery-dan-vuejs

5. The preparation (dev tools)...

6. jQuery...
● memanipulasi DOM
● Memisahkan JavaScript dan HTML
● Syntax Singkat dan Jelas
● Mengatasi masalah kompatibilitas
antar-browser
● Ekstensibel
http://ekajogja.com/jquery-definisi-fitur-penggunaan
-jquery-dalam-pengembangan-website/

7. .val()
function displayValue() {
var name = $("#name").val();
$("#display-text").text(name);
console.log(name);
}

8. .text() .removeClass .addClass()
function changeClass() {
var name = $("#class-name").val();
$("#display-class-
name").text(name).removeClass('help-
block').addClass("text-success");
console.log(name);
}

9. .attr()
function addAttr() {
var name = $("#name1").val();
$("#display-
text1").text(name).attr("title", name);
console.log(name);
}

10. .removeClass() .addClass()
// remove class hide
function showForm() {
$("#myForm").removeClass("hide");
}
// add class hide
function hideForm() {
$("#myForm").addClass("hide");
}

11. .onkeyup()
// Event key up
function eventKeyUp(val) {
console.log(val);
$("#display-cari").text(val);
}
// html
<input id="cari" class="form-control"
onkeyup="eventKeyUp(this.value)">

12. .onkeypress()
// Event key down
function eventKeyDown(val) {
console.log(val);
$("#display-cari1").text(val);
}
// html
<input id="cari1" class="form-control"
onkeypress="eventKeyDown(this.value)">

13. Some cool stuff...
.append()
.html()
.bind()
.hide()
.show()

14. VueJs...
● Simple
● Reactive
● Components
● Compact
● Fast
● Package ready
http://vuejs.org/

15. instance...
new Vue({
el: '#hello',
data: {
message: 'Hello Vue.js!'
}
});

16. Two way data binding...
// js
new Vue({
el: '#way',
data: {
message: 'Hello Vue.js!'
}
});
// html
<div class="form-group" id="way">
<label>Text Input</label>
<input class="form-control" v-model="message">
<p class="help-block">{{ message }}</p>
</div>

17. Render a list...
// Menampilkan list data
new Vue({
el: '#list',
data: {
todos: [
{text: 'Learn JavaScript'},
{text: 'Learn Vue.js'},
{text: 'Build Something Awesome'}
]
}
});
// html
<div class="panel-body" id="list">
<ul class="list-group">
<li class="list-group-item" v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>

18. Render a list (part 1)...
new Vue({
el: '#app',
data: {
newTodo: '',
todos: [
{text: 'Add some todos'}
]
},
methods: {
addTodo: function () {
var text = this.newTodo.trim()
if (text) {
this.todos.push({text: text})
this.newTodo = ''
}
},
removeTodo: function (index) {
this.todos.splice(index, 1)
}
}
})

19. Render a list (part 2)...
<div class="form-group" id="app">
<input class="form-control" v-model="newTodo" v-on:keyup.enter="addTodo">
<span class="clearfix"><hr></span>
<ul class="list-group">
<li class="list-group-item" v-for="todo in todos">
{{ todo.text }}
<span class="pull-right">
<button v-on:click="removeTodo($index)"
class="btn btn-danger fa fa-trash-o">
</button></span>
</li>
</ul>
</div>

20. Some cool stuff...
Vue.directive
Vue.filter
Vue.component
Methods
Data
El
Created
Ready
Components
V-text
V-html
V-if
V-show
V-show
V-else
V-on
V-model
capitalize
uppercase
lowercase
currency
pluralize
json
debounce
limitBy
filterBy
orderBy

21. Our Community
Malang PHP
https://www.facebook.com/groups/mphug/
MalangJs
https://www.facebook.com/groups/malangjs/
Meetup & event
http://www.meetup.com/Malang-Js
Official sites
http://malangphp.org/

22. Thank's you...
@cyberid41
fb.com/cyberid41
id.linkedin.com/in/cyberid41
http://github.com/cyberid41
●
Stay in touch