Belajar Ajax dengan jQuery dan VueJs

By : Edi Santoso

Events :Workshop teknis javascript7 November 2015SMK Telkom Sandhy Putra Malang

About me...Nothing special …

Backend DeveloperPHP (Laravel Framework & Ruby On Rails)

Frontend Developer(jQuery, Vue.js, AngularJs, Bootstrap and

Material Design)

Javascript Frameworks...

The preparation (source code)...

Clone the repohttps://github.com/cyberid41/belajar-ajax-dengan-jquery-dan-vuejs

The preparation (dev tools)...

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/

.val()

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

console.log(name);}

.text() .removeClass .addClass()

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

console.log(name);}

.attr()

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

console.log(name);}

.removeClass() .addClass()

// remove class hidefunction showForm() { $("#myForm").removeClass("hide");}

// add class hidefunction hideForm() { $("#myForm").addClass("hide");}

.onkeyup()

// Event key upfunction eventKeyUp(val) { console.log(val); $("#display-cari").text(val);}

// html

<input id="cari" class="form-control" onkeyup="eventKeyUp(this.value)">

.onkeypress()

// Event key downfunction eventKeyDown(val) { console.log(val); $("#display-cari1").text(val);}

// html

<input id="cari1" class="form-control" onkeypress="eventKeyDown(this.value)">

Some cool stuff...

.append().html().bind().hide().show()

VueJs...

● Simple

● Reactive

● Components

● Compact

● Fast

● Package ready

http://vuejs.org/

instance...

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

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>

Render a list...// Menampilkan list datanew 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>

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) } }})

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>

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

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/

Thank's you...

@cyberid41

fb.com/cyberid41

id.linkedin.com/in/cyberid41

http://github.com/cyberid41

●Stay in touch