Introduction to Vue JS

Transcript

1. Introduction to Vue JS Brandon Hawkes @brandonhawkes
2. vue js! Incrementally adoptable JavaScript framework Fast & small
3. "I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved" Evan You Creator of Vue JS
4. github stats vuejs/vue angular/angular angular/angular.js facebook/react facebook/react-native 2017?
5. Browser Support •All modern browsers •Internet Explorer 9+
6. Getting Started HTML Javascript <div id="app"> </div> var vm = new Vue({ el:"#app" }); vue constructor
7. {{ }}
8. {{ }} HTML Javascript <div id="app"> {{message}} </div> var vm = new Vue({ el:"#app", data:{ message:"Hello World" } }); Output Hello World text interpolation
9. {{ }} HTML Javascript {{message + '.'}} {{message.toUpperCase()}} {{message.slice(0,5)}} var vm = new Vue({ el:""#app, data:{ message:"Hello World" } }); Output Hello World. HELLO WORLD Hello text interpolation
10. filters
11. filters HTML Javascript {{message | reverse}} var vm = new Vue({ el:"#app", data:{ message:"Hello World" }, filters:{ reverse:function(input){ return input.split("").reverse().join(""); } } }); output dlroW olleH adjust things
12. showing and hiding content
13. v-show & v-if HTML output conditional rendering <div> A </div> <div style="display:none"> B <div> <div> C </div> <div v-show="true"> A </div> <div v-show="false"> B </div> <div v-if="true"> C </div> <div v-if="false"> D </div>
14. v-else-if & v-else HTML output show/hide content <div> C </div> <div v-if="false"> A </div> <div v-else-if="false"> B </div> <div v-else> C </div>
15. injecting html from js
16. v-html HTML <div v-html="rawHtml"> </div> output render html string vue data object data:{ rawHtml:"<h1>raw html</h1>" } raw html
17. repeating stuff
18. v-for HTML vue data object <ul> <li v-for="person in people"> {{person}} </li> </ul> data:{ people:[ "Adam", "Ben", "Calvin" ] } output • Adam • Ben • Calvin looping arrays
19. v-for HTML <ul> <li v-for="(person, index) in people"> {{index}} - {{person}} </li> </ul> output • 0 - Adam • 1 - Ben • 2 - Calvin arrays with index data:{ people:[ "Adam", "Ben", "Calvin" ] } data
20. v-for HTML vue data object <ul> <li v-for="person in people"> {{person}} </li> </ul> data:{ people:[ "Adam":{ age:20 }, "Ben":{ age:40 }, "Calvin":{ age:30 } ] } output • {"age":20} • {"age":40} • {"age":30} looping objects
21. v-for HTML <ul> <li v-for="(key, value, index) in people"> {{key}} is {{value.age}} </li> </ul> output • Adam is 20 • Ben is 40 • Calvin is 30 objects - (key, value, index)
22. v-for HTML <ul> <li v-for="n in 10"> {{n}} </li> </ul> Output • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 generate a list from number
23. dynamic attributes
24. v-bind HTML <a v-bind:href="page"> link to cat page </a> <a :href="page"> link to cat page </a> Output bind data to attributes vue data object data:{ page:"/cats" } link to cat page <a href="/cats">link to cat page</a>
25. v-bind HTML vue data object <img :src="file" :alt="desc"/> <img v-bind="{src: file, alt: desc}"/> data:{ file:"cat.jpg", desc:"Picture of a cat" } multiple binds output <img src="cat.jpg" alt="Picture of a cat">
26. dynamic classes
27. classes dynamic css classes object :class="{className:someBoolean}" array :class="[classVarA,'classNameB']" string v-bind:class="'classString'" ternary :class="bool ? 'active' : 'inactive'" method :class="classNameReturningFunction()" variable :class="classNameVariable"
28. dynamic styles
29. v-style dynamic css inline object <div v-bind:style="{background:"red",color:"#0f0"}"> <div v-bind:style="styleObject"> as a variable <div v-bind:style="styleMethod(i)"> as a method vue data object data:{ styleObject:{ background:"red", color:"#0f0" } }
30. dom events
31. v-on & methods HTML Javascript <a v-on:click="makeAlert()"> click here </a> <a @click="makeAlert()"> click here </a> var vm = new Vue({ el:"#app", data:{}, methods:{ makeAlert:function(event){ alert("click"); } } }); react to things
32. other events HTML <a @click="counter+=1"> add 1 </a> <a @click="currentPage='home'"> homepage </a> <a @click.prevent="currentPage='home'"> homepage </a> <img @load.once="alert('cats!')" src="/cat.jpg"/> <input @keyup.enter="submit()"> react to things
33. computed
34. computed HTML Javascript {{upperCaseMessage}} var vm = new Vue({ el:"#app", data:{ message:"Hello World" }, computed:{ upperCaseMessage:function(){ return this.message.toUpperCase(); } } }); output HELLO WORLD adjusted data
35. v-model
36. v-model two way binding - text HTML <input v-model="formField" placeholder="edit me"> vue data object data:{ formField:"form input" }
37. v-model radio and checkbox HTML <input type="radio" v-model="picked" value="a"> <input type="radio" v-model="picked" value="b"> <input type="radio" v-model="picked" value="c"> <input type="checkbox" v-model="toggle"> vue data object data:{ picked:"a", toggle:true }
38. v-model select & options HTML <select v-model="selected"> <option v-for="option in options" :value="option.value"> {{ option.text }} </option> </select> vue data object data:{ selected:"optionValue" options:[ {value:a, text:"option a"}, {value:b, text:"option b"} {value:b, text:"option c"} ] }
39. api example
40. loading json example Javascript var vm = new Vue({ el:"#app", data:{ dataLoaded:false, apiReply:{} }, methods:{ loadData:function(){ fetch('/api').then(function(response) { return response.json(); }).then(function(reply) { vm.apiReply = reply; vm.dataLoaded = true; }); } }, created:function(){ this.loadData(); } }); define data
41. loading json example Javascript var vm = new Vue({ el:"#app", data:{ dataLoaded:false, apiReply:{} }, methods:{ loadData:function(){ fetch('/api').then(function(response) { return response.json(); }).then(function(reply) { vm.apiReply = reply; vm.dataLoaded = true; }); } }, created:function(){ this.loadData(); } }); method & fetch api
42. loading json example Javascript var vm = new Vue({ el:"#app", data:{ dataLoaded:false, apiReply:{} }, methods:{ loadData:function(){ fetch('/api').then(function(response) { return response.json(); }).then(function(reply) { vm.apiReply = reply; vm.dataLoaded = true; }); } }, created:function(){ this.loadData(); } }); created function
43. loading json example v-cloak & output HTML <div id="app" v-cloak> <pre v-if="dataLoaded"> {{apiReply | json}} </pre> <pre v-else> loading data... </pre> </div> CSS [v-cloak]{display:none;}
44. vue components reusable useful bits Javascript var vm = new Vue({ el:"#app" }); Vue.component('my-component', { template: '<div>A custom component!</div>' }); HTML <my-component></my-component> output <div>A custom component!</div>
45. vue components has its own data object Javascript Vue.component('my-component', { template: '<div>{{message}}</div>', data: function () { return { message:"component's message" } } }); HTML <my-component></my-component> output <div>component's message</div>
46. vue components passing data to component Javascript data:{"message":"message from parent scope"} Vue.component('my-component', { template: '<div>{{message}}</div>', props: ['message'] }); HTML <my-component :message="message"></my-component> output <div>message from parent scope</div>
48. vue components emit data back to parent Javascript data:{"message":"message from parent scope"} Vue.component('my-component', { template: '<div>{{message}}</div>', props: ['message'], watch:{ message:function(val){ this.$emit('update:message', val) } } }); HTML <my-component :message.sync="message"></my-component>
49. more stuff! vuex server side rendering automated tests transitions & animations watch router emit
50. github.com/vuejs/awesome-vue things to check out github.com/vuejs/vue vuejs.org/v2/guide
51. •0.9.0 Animatrix •0.10.0 Blade Runner •0.11.0 Cowboy Bebop •0.12.0 Dragon Ball •1.0.0 Evangelion •1.1.0 cancelled •2.0.0 Ghost in the Shell •2.1.0 Hunter x Hunter •2.2.0 Initial D •2.3.0 JoJo's Bizarre Adventure bonus slide