A Point of Vue

In this talk, Nathan will be giving us an overview of Vue.js, how you can use it in your project and how it works in comparison to other JS frameworks.

Transcript

1. A point of Vue @nathanjdunn
2. What is Vue? • “The Progressive JavaScript Framework” • Incrementally adoptable • Can also be used for SPAs • “Friendlier” choice for front-ends
3. Companies using Vue
4. Installing Vue • NPM • vue-cli • CDN
5. What is a component? • Isolated part of your application • Reusable • More reuse should mean less code to maintain • Control behaviour with props and events
6. What is a component? - continued
7. Vue Components <div id="root"> <message /> </div> Vue.component('message', { template: '<p>My name is: {{ name }}</p>', data: () => ({ name: ‘Nathan’, }) });
8. Data Binding • Vue supports two-way data binding • The local state is held in data • You can add v-model to form elements to update the state in the component
9. Templating • Vue has its own templating language • Uses {{ }} syntax for displaying data • v-if, v-else-if, v-else • v-for
10. Templating - v-if <div id="root"> <input type="checkbox" v-model="show" /> <div v-if="show">Now you see me...</div> <div v-else>Now you don't...</div> </div> new Vue({ el: "#root", data: { show: false, } })
11. Templating - v-for <div id="root"> <div v-for="organiser in organisers">{{ organiser }}</div> </div> new Vue({ el: "#root", data: { organisers: [ 'Jason', 'Ricky', 'Graeme' ] } })
12. Events Props
13. Props Vue.component('message', { props: ['name'], template: `<div>Hello, {{ name }}</div>`, }) new Vue({ el: "#root", })
14. Props Validation Vue.component('message', { props: { name: { type: String, required: true }, }, template: `<div>Hello, {{ name }}</div>`, })
15. Sending Events Vue.component('message', { template: `<div> <button @click="sendMessage">Click me!</button> </div>`, methods: { sendMessage() { this.$emit('message', 'Hello JSNE!') } } })
16. Receiving Events <div id="root"> <message @message="announce" /> </div> new Vue({ el: "#root", methods: { announce(message) { alert(message); } } })
17. Computed Properties new Vue({ el: '#root', data: { message: 'Hello JSNE!', }, computed: { reversedMessage() { return this.message.split('').reverse().join('') } } })
18. Single File Components <template> <div>Hello, {{ name }}</div> </template> <script> export default { props: ['name'], } </script> <style> h1 { font-size: 1.5rem; } </style>
19. Vuex • Vue’s version of Redux • Provides a “single source of truth” (state) for your application’s data • Allows components stay up-to-date without props and events
20. Vuex - continued
21. “Flux libraries are like glasses: you’ll know when you need them.”
22. Vue Devtools
23. Demo
24. Next Steps • http://vuejs.org • https://router.vuejs.org • http://vuecasts.com • https://github.com/vuejs/awesome-vue • https://bootstrap-vue.js.org • https://codepen.io/nathandunn
25. Conclusion • It’s an exciting time to be using Vue! • Expanding community • Growing beyond the web... • Vue.js 3