Downloaded 702 times
![<ul id=“list"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul>
new Vue({ el: '#list', data: { parentMessage: ‘Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) Loops](https://image.slidesharecdn.com/davidlicenvuejs-slides-170526074856/75/VueJS-Introduction-26-2048.jpg)
VueJS Introduction
- 1. Vue.JSThe progressive JavaScriptFramework
- 2. Yet Another JSFramework Or Is it?
- 3. David Ličen, FreelanceFront-End Developer Twitter: @davision Blog: davidlicen.com
- 5.
- 6. The Founder Evan You •Previously worked as a Creative Technologist at Google • Core Dev at Meteor • From 2016 working full-time on Vue.JS framework. —> patreon.com/evanyou
- 7. History • Started inlate 2013 • First release Feb. 2014 (v0.6) • v1.0.0 Evangelion Oct. 2015 • Latest release v2.3.3
- 9. VueJS gets intoin Laravel 5.3 Optional
- 10. Today (on 24.5.2017) vs.AngularJS vs. React
- 11. Today (on 24.5.2017) vs.Ruby ;)
- 12. Today (on 24.5.2017) 562Kdownloads/month
- 13. Who is usingit? • GitLab https://about.gitlab.com/2016/10/20/why-we-chose-vue/ • Weex https://weex.apache.org/ Maintained by Alibaba Group • Baidu Chinese search engine
- 14. How does itwork? Technical stuff
- 15. How it works? •Inspired by Model–view– viewmodel (MVVM) architectural pattern • Uses Declarative Rendering • Dependency tracking system with getter/setters
- 16. The Vue Instance •Vue Constructor function • Properties and Methods (data / events) • Instance Lifecycle Hooks var vm = new Vue({ // options })
- 17. The Vue InstanceLifecycle
- 19. var vm =new Vue({ data: { a: 1 }, created: function () { // `this` points to the vm instance console.log('a is: ' + this.a) } }) vm.$watch('a', function (newVal, oldVal) { // this callback will be called when `vm.a` changes })
- 20. Let see somecode examples Practical stuff
- 21. <!DOCTYPE html> <html lang="en"> <head> <metacharset="UTF-8"> <title>Vue.js</title> <script src="vue.js"></script> </head> <body> <div id="selector"> <h1>{{ message }}</h1> </div> </body> </html> // Define a plain JSON // object to hold the data var data = { message: "Hello" }; // Instantiate Vue on an element new Vue ({ el: "#selector", data: data }) // Works since getters/setters // are now proxied data.message = "Hi";
- 22. Directives v-bind <!-- full syntax--> <a v-bind:href="url"></a> <!-- shorthand --> <a :href="url"></a> v-on <!-- full syntax --> <a v-on:click="doSomething"></a> <!-- shorthand --> <a @click="doSomething"></a>
- 23. <div :class="{ 'active': isActive, 'text-danger':HasError } "> </div> data: { isActive: true, hasError: false } Binding HTML Classes
- 24. <div id="events"> <button v-on:click="counter+= 1”> Add +1</button> <p>You clicked {{ counter }}</p> <button @click=“say(‘what')"> Say what</button> </div> new Vue ({ el: '#events', data: { counter: 0 }, methods: { say: function (message) { alert(message) } } }) Event handling
- 25. <div v-if="type ==='A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> Conditional Rendering
- 26. <ul id=“list"> <li v-for="(item,index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> new Vue({ el: '#list', data: { parentMessage: ‘Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) Loops
- 27. <!-- the clickevent's propagation will be stopped --> <a @click.stop="oThis"></a> <!-- the submit event will no longer reload the page --> <form @submit.prevent="onSubmit"></form> <!-- modifiers can be chained --> <a @click.stop.prevent="doThat"></a> <!-- also available .tab, .delete, .esc, .space, ...--> <input @keyup.enter="submit"> Event & Key Modifiers
- 28.
- 29. Single File Components Introducing Madeby Webpack (or Browserify)
- 30. Now we get •Complete syntax highlighting • CommonJS modules • Component-scoped CSS • Use of preprocessors (Pug, Babel, Stylus, Sass…)
- 32. new Vue ({ el:"#selector", data: { message: 'Hello' } }) export default { data () { return { message: 'Hello' } } } Mind the difference
- 33. Let’s do some💩 and build our first VueJS app
- 34. npm install --globalvue-cli
- 35. vue init webpackmy-project
- 36. ? Project namevue-webpack ? Project description A Vue.js project ? Author davidlicen <david@artnetik.si> ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Airbnb ? Setup unit tests with Karma + Mocha? No ? Setup e2e tests with Nightwatch? No We’re packed!
- 37. cd my-project npm install npmrun dev yarn anyone?
- 40.
- 42.
- 43. Some say… • Vueinitiated by a single developer • The community is not yet as large as the ones of Angular or React • Currently, there’s not so many libraries for Vue…
- 44.
- 45.
- 46. WROCŁAW, POLAND •JUNE 21-23, 2017
- 47.