Introduction to VueJS & The WordPress REST API
-
Upload
josh-pollock -
Category
Software
-
view
145 -
download
5
Transcript of Introduction to VueJS & The WordPress REST API
@TwitterHandle [change in Slide > Edit Master]
Introduction To VueJS & The WordPress REST API
Josh Pollock | CalderaLabs.org
@Josh412
CalderaLabs.org
Hi I'm JoshFounder/ Lead Developer/ Space Astronaut Grade 3:
Caldera LabsI make WordPress plugins @calderaformsI teach about WordPress @calderalearnI wrote a book about the WordPress REST APII wrote a book about PHP object oriented programing.I am core contributor to WordPressI am a member of The WPCrowd @thewpcrowd
@Josh412
What We're Covering Today
A little background on Josh + JavaScript FrameworksWhy VueJS Is Really CoolSome Basics On VueJSSome Things That Are Not So Cool About VueJSHow To Go Further With VueJS
@Josh412
CalderaLearn.com
0.Josh + VueJS
Didn’t You Talk About Angular Last Year?
@Josh412
CalderaLabs.org
@Josh412
NG1 Is Cool
@Josh412
React and NG2 Are More Than I Need
@Josh412
VueJS Is A Good Balance
@Josh412
CalderaLabs.org
BONUS LINK #1calderalearn.com/wcmia-js-frameworks
@Josh412
CalderaLearn.com
1.Why VueJS Is Really Cool
Simple, Reactive, Lightweight
@Josh412
VueJS: Simplicity
Fast StartWorks with ES5
Better with ES6Reusable ComponentsFamiliar SyntaxHTML(ish) Templates18kB
@Josh412
Reactive !== ReactJS
@Josh412
Reactive Seems Familiar
VueJS Lifecycle Diagram
vuejs.org/images/lifecycle.png
@Josh412
CalderaLabs.org
@Josh412
We’re Used To Event-Based Systems
@Josh412
Event-Based SystemsLike WordPress Hooks
@Josh412
VueJS Doesn’t Include But Has Official Packages
HTTPRouterFlux/ Redux State Manager
@Josh412
CalderaLearn.com
2.VueJS + WordPress Basics
Enough To Get Started
@Josh412
A Few Notes Before We Look At Code
All of this is ES5You should use ES6
We’re using jQuery.ajax()Read the docs for install
Just need one CDN link
@Josh412
CalderaLabs.org
Example Onecalderalearn.com/wcmia-example-1
@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>
@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", } } }});
@Josh412
CalderaLabs.org
Example Twocalderalearn.com/wcmia-example-2
@Josh412
Adding AJAX
@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 } });});
@Josh412
Data Attributes
@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>
@Josh412
CalderaLabs.org
Example Threecalderalearn.com/wcmia-example-3
@Josh412
Form Inputs
@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>
@Josh412
Event Handlinghttps://vuejs.org/v2/guide/events.html
@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>
@Josh412
Methods
@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 ); } ); } } }); }});
@Josh412
CalderaLabs.org
Example Fourcalderalearn.com/wcmia-example-4
@Josh412
ComponentsLet’s Make Our Code More Reusable!
@Josh412
App HTML
<div id="app"> <post-list></post-list></div>
@Josh412
TemplatesWe Could Have Used A Template Before
@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>
@Josh412
Instantiating Components
@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 );
@Josh412
Components
Improve code reuse.Can be shared between vue instances.The Vue Router can switch components based on state.
@Josh412
CalderaLearn.com
3.Downsides To VueJS
It’s Cool But...
@Josh412
VueJS Downsides
Super minimalSmall, but you’re going to need other things
Less popularLess tutorialsLess developersLess Packages
Never going to be in WordPress core
@Josh412
CalderaLabs.org
Slides, Links & More:CalderaLearn.com/wcmia
CalderaLabs.org
Thanks!
JoshPress.net
CalderaLearn.comCalderaForms.com
CalderaLabs.org@Josh412
Slides, Links & More:CalderaLearn.com/wcmia