Successfully reported this slideshow.
Your SlideShare is downloading. ×

Introduction to VueJS & The WordPress REST API

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 46 Ad

Introduction to VueJS & The WordPress REST API

Download to read offline

Slides from Josh Pollock's WordCamp Miami 2017 talk. This is a basic introduction to using VueJS with the WordPress REST API.

For live code examples and more: https://learn.calderalabs.org/josh-wordcamp-miami-vuejs

Slides from Josh Pollock's WordCamp Miami 2017 talk. This is a basic introduction to using VueJS with the WordPress REST API.

For live code examples and more: https://learn.calderalabs.org/josh-wordcamp-miami-vuejs

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Advertisement

Similar to Introduction to VueJS & The WordPress REST API (20)

More from Caldera Labs (19)

Advertisement

Introduction to VueJS & The WordPress REST API

  1. 1. @TwitterHandle [change in Slide > Edit Master] Introduction To VueJS & The WordPress REST API Josh Pollock | CalderaLabs.org
  2. 2. @Josh412 CalderaLabs.org Hi I'm Josh Founder/ Lead Developer/ Space Astronaut Grade 3: Caldera Labs I make WordPress plugins @calderaforms I teach about WordPress @calderalearn I wrote a book about the WordPress REST API I wrote a book about PHP object oriented programing. I am core contributor to WordPress I am a member of The WPCrowd @thewpcrowd
  3. 3. @Josh412 What We're Covering Today A little background on Josh + JavaScript Frameworks Why VueJS Is Really Cool Some Basics On VueJS Some Things That Are Not So Cool About VueJS How To Go Further With VueJS
  4. 4. @Josh412 CalderaLearn.com 0. Josh + VueJS Didn’t You Talk About Angular Last Year?
  5. 5. @Josh412 CalderaLabs.org
  6. 6. @Josh412 NG1 Is Cool
  7. 7. @Josh412 React and NG2 Are More Than I Need
  8. 8. @Josh412 VueJS Is A Good Balance
  9. 9. @Josh412 CalderaLabs.org BONUS LINK #1 calderalearn.com/wcmia-js-frameworks
  10. 10. @Josh412 CalderaLearn.com 1. Why VueJS Is Really Cool Simple, Reactive, Lightweight
  11. 11. @Josh412 VueJS: Simplicity Fast Start Works with ES5 Better with ES6 Reusable Components Familiar Syntax HTML(ish) Templates 18kB
  12. 12. @Josh412 Reactive !== ReactJS
  13. 13. @Josh412 Reactive Seems Familiar VueJS Lifecycle Diagram vuejs.org/images/lifecycle.png
  14. 14. @Josh412 CalderaLabs.org
  15. 15. @Josh412 We’re Used To Event-Based Systems
  16. 16. @Josh412 Event-Based Systems Like WordPress Hooks
  17. 17. @Josh412 VueJS Doesn’t Include But Has Official Packages HTTP Router Flux/ Redux State Manager
  18. 18. @Josh412 CalderaLearn.com 2. VueJS + WordPress Basics Enough To Get Started
  19. 19. @Josh412 A Few Notes Before We Look At Code All of this is ES5 You should use ES6 We’re using jQuery.ajax() Read the docs for install Just need one CDN link
  20. 20. @Josh412 CalderaLabs.org Example One calderalearn.com/wcmia-example-1
  21. 21. @Josh412 Vue Templates <div id="post"> <article> <header> <h1 class="post-title"> {{post.title.rendered}} </h1> </header> <div class="entry-content"> {{post.content.rendered}} </div> </article> </div>
  22. 22. @Josh412 The Vue Instance var ex1 = new Vue({ el: '#post', data: { post: { title: { rendered: 'Hello World!' }, content: { rendered: "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>n", } } } });
  23. 23. @Josh412 CalderaLabs.org Example Two calderalearn.com/wcmia-example-2
  24. 24. @Josh412 Adding AJAX
  25. 25. @Josh412 The Vue Instance /** You should use wp_localize_script() to provide this data dynamically */ var config = { api: 'https://calderaforms.com/wp-json/wp/v2/posts/45218', }; /** GET post and then construct Vue instance with it **/ var ex2; $.get({ url: config.api }).success( function(r) { ex2 = new Vue({ el: '#post', data: { post: r } }); });
  26. 26. @Josh412 Data Attributes
  27. 27. @Josh412 Vue Templates <div id="post"> <article> <header> <h1 class="post-title"> {{post.title.rendered}} </h1> </header> <div class="entry-content" v-html="post.content.rendered"></div> </article> </div>
  28. 28. @Josh412 CalderaLabs.org Example Three calderalearn.com/wcmia-example-3
  29. 29. @Josh412 Form Inputs
  30. 30. @Josh412 Vue Templates <div id="post"> <form v-on:submit.prevent="save"> <div> <label for="post-title-edit"> Post Title </label> <input id="post-title-edit" v-model="post.title.rendered"> </div> <div> <label for="post-content-edit"> Post Content </label> <textarea id="post-content-edit" v-model="post.content.rendered"></textarea> </div> <input type="submit" value="save"> </form> <article> <header> <h1 class="post-title"> {{post.title.rendered}} </h1> </header> <div class="entry-content" v-html="post.content.rendered"></div> </article> </div>
  31. 31. @Josh412 Event Handling https://vuejs.org/v2/guide/events.html
  32. 32. @Josh412 Vue Templates <div id="post"> <form v-on:submit.prevent="save"> <div> <label for="post-title-edit"> Post Title </label> <input id="post-title-edit" v-model="post.title.rendered"> </div> <div> <label for="post-content-edit"> Post Content </label> <textarea id="post-content-edit" v-model="post.content.rendered"></textarea> </div> <input type="submit" value="save"> </form> <article> <header> <h1 class="post-title"> {{post.title.rendered}} </h1> </header> <div class="entry-content" v-html="post.content.rendered"></div> </article> </div>
  33. 33. @Josh412 Methods
  34. 34. @Josh412 The Vue Instance var ex3; jQuery.ajax({ url: config.api, success: function(r) { ex3 = new Vue({ el: '#post', data: { post: r }, methods: { save: function(){ var self = this; $.ajax( { url: config.api, method: 'POST', beforeSend: function ( xhr ) { xhr.setRequestHeader( 'X-WP-Nonce', config.nonce ); }, data:{ title : self.post.title.rendered, content: self.post.content.rendered } } ).done( function ( response ) { console.log( response ); } ); } } }); } });
  35. 35. @Josh412 CalderaLabs.org Example Four calderalearn.com/wcmia-example-4
  36. 36. @Josh412 Components Let’s Make Our Code More Reusable!
  37. 37. @Josh412 App HTML <div id="app"> <post-list></post-list> </div>
  38. 38. @Josh412 Templates We Could Have Used A Template Before
  39. 39. @Josh412 Template HTML <script type="text/html" id="post-list-tmpl"> <div id="posts"> <div v-for="post in posts"> <article v-bind:id="'post-' + post.id"> <header> <h2 class="post-title"> {{post.title.rendered}} </h2> </header> <div class="entry-content" v-html="post.excerpt.rendered"></div> </article> </div> </div> </script>
  40. 40. @Josh412 Instantiating Components
  41. 41. @Josh412 Vue Instance (function($){ var vue; $.when( $.get( config.api.posts ) ).then( function( d ){ Vue.component('post-list', { template: '#post-list-tmpl', data: function () { return { posts: d } }, }); vue = new Vue({ el: '#app', data: { } }); }); })( jQuery );
  42. 42. @Josh412 Components Improve code reuse. Can be shared between vue instances. The Vue Router can switch components based on state.
  43. 43. @Josh412 CalderaLearn.com 3. Downsides To VueJS It’s Cool But...
  44. 44. @Josh412 VueJS Downsides Super minimal Small, but you’re going to need other things Less popular Less tutorials Less developers Less Packages Never going to be in WordPress core
  45. 45. @Josh412 CalderaLabs.org Slides, Links & More: CalderaLearn.com/wcmia
  46. 46. CalderaLabs.org Thanks! JoshPress.net CalderaLearn.com CalderaForms.com CalderaLabs.org @Josh412 Slides, Links & More: CalderaLearn.com/wcmia

×