Workshop Teknis Javascript SMK Telkom Sandhy Putra Malang
?
2 likes?702 views
Membahas dasar penggunaan jQuery dan Vuejs dan teknik ajax
![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>](https://image.slidesharecdn.com/workshopjavascriptsmktelkomsandhyputra-151107061046-lva1-app6891/85/Workshop-Teknis-Javascript-SMK-Telkom-Sandhy-Putra-Malang-17-320.jpg)
![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)
}
}
})](https://image.slidesharecdn.com/workshopjavascriptsmktelkomsandhyputra-151107061046-lva1-app6891/85/Workshop-Teknis-Javascript-SMK-Telkom-Sandhy-Putra-Malang-18-320.jpg)
Workshop Teknis Javascript SMK Telkom Sandhy Putra Malang
- 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)
- 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)">
- 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>
- 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/