Vuejs for Angular developers
9 likes5,730 views
Vue.js is a modern JavaScript framework for building UI on the web. It managed to combine hipster virtual DOM approach with API well known to any Angular developer. Components, SSR, CLI, state management, dev tools and much more. Besides it has smallest footprint (23kb gziped) and provides great developer experience. Those are the reasons the community and the adoption was growing rapidly last year.We'll have an intro to vue.js API and usage.
![Vue component
// register
Vue.component('my-component', {
el: '#counter-event-example',
template: '<div>A custom component!</div>',
props: ['message'],
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
Solid template - github.com/posva/vue-plugin-template
Online generator - changjoo-park.github.io/vue-component-generator/](https://image.slidesharecdn.com/vuejspresentation-170120140736/85/Vuejs-for-Angular-developers-26-320.jpg)
![Vue router
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
routes // short for routes: routes
})
// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make
the
// whole app router-aware.
const app = new Vue({
router
}).$mount('#app')
<!-- use router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- <router-link> will be rendered as an `<a>` tag by
default -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
https://router.vuejs.org/en/essentials/getting-started.html](https://image.slidesharecdn.com/vuejspresentation-170120140736/85/Vuejs-for-Angular-developers-27-320.jpg)
![第一次用 Vue.js 就愛上 [改]](https://cdn.slidesharecdn.com/ss_thumbnails/vuejs-160518081021-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Viewers also liked (6)
Similar to Vuejs for Angular developers (20)
More from Mikhail Kuznetcov (8)
Recently uploaded (20)
Vuejs for Angular developers
- 2. About me Mikhail Kuznetcov Sr. Frontend developer at Wolters Kluwer Twitter: @legkoletat Github: github.com/shershen08
- 3. Vue.js
- 4. One of the frontend trends in 2016
- 5. Project started in 2013 A progressive, incrementally-adoptable JavaScript framework for building UI on the web.
- 6. v 1.0 released 10.2015 v 2.0 released in 09.2016 with major changes & improvements Current stable: v 2.1.10 History https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8
- 8. Developer adoption rate 100s plugins UI packages, tooling, etc. Tons of videos and posts * - As of 12 Jan 2017
- 9. Business usage Alibaba, Baidu, Xiaomi, Optimizely, Expedia, Nintendo, DJI, Hunliji, GitLab, etc.
- 12. 23k-framework, srsly ?! https://gist.github.com/Restuta/cda69e50a853aa64912d
- 13. What utility libs you’re using in your current projects? Vue.js has approx same size as one of those: ● Lodash v.4 ● MomentJS (with locales) ● jQuery v.3
- 15. You want the API a human can master https://angular.io/docs/ts/latest/api/
- 16. How does this all work together?
- 17. Clear guidance ● Lightweight, transparent API ● No 1.x, 2.0-rc, 2.0-rc1…, 2.1, 3.0, 4.x etc version mess ● Up to date and detailed docs
- 18. Comprehensive developer experience ● Vue-devtools, vue-cli ● Tooling for all major build systems ● Syntax highlighting and snippets for <favorite-editor-name>
- 19. Dev tools ● Components tree and properties exploration ● Time-travel debugging
- 20. 3. Syntax you already know (and love)
- 22. Template syntax <div v-html="rawHtml"></div> <p v-if="seen">Now you see me</p> <a v-on:click="doSomething"></a> <a @click="doSomething"></a> <div v-bind:class="{ active: isActive }"></div> And so on...
- 23. Similar concepts Template expressions Directives (built-in and custom) Filters Events ($on, $off, $emit, $once) Watchables $render function <slot> (like ng-transclude)
- 24. But today’s webapp is more complex than just code snippets
- 25. App code samples
- 26. Vue component // register Vue.component('my-component', { el: '#counter-event-example', template: '<div>A custom component!</div>', props: ['message'], methods: { incrementTotal: function () { this.total += 1 } } }) Solid template - github.com/posva/vue-plugin-template Online generator - changjoo-park.github.io/vue-component-generator/
- 27. Vue router const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. Create the router instance and pass the `routes` option // You can pass in additional options here, but let's // keep it simple for now. const router = new VueRouter({ routes // short for routes: routes }) // 4. Create and mount the root instance. // Make sure to inject the router with the router option to make the // whole app router-aware. const app = new Vue({ router }).$mount('#app') <!-- use router-link component for navigation. --> <!-- specify the link by passing the `to` prop. --> <!-- <router-link> will be rendered as an `<a>` tag by default --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> https://router.vuejs.org/en/essentials/getting-started.html
- 28. Vuex import store from './store' import App from './components/App.vue' new Vue({ store, // inject store to all children el: '#app', render: h => h(App) }) //in the component methods this.$store.commit('addTodo', { text }) //mutation example export const mutations = { addTodo (state, { text }) { state.todos.push({ text, done: false }) }, https://vuex.vuejs.org/en/structure.html
- 29. Other highlights ● Handful of UI libraries (material, bootstrap, mobile) ● SSR (e.g. nuxt.js or prerender plugin) ● State management (Redux clone vux, Event Bus) ● Lazy component loading (eg. vue-lazy-component) ● Form handling
- 31. Setup starter project $ npm install vue-cli -g $ vue init webpack my-nice-project $ cd my-nice-project $ npm install $ npm i mint-ui axios vue-online --save $ npm run dev
- 32. Live coding plan ● Install stuff ● Connect to http://pokeapi.co/ using axios ● Create components to output + some UI with mint-ui https://github.com/shershen08/vue-pokemon-app-demo
- 33. Do or Don’t?
- 34. Points to be aware of ● Vue.js SSR is bounded to NodeJS only env ● No monster corporation behind ● Ecosystem is still 10x smaller than React / Angular
- 35. Why you should start now ● Mental bridge from ‘Angular’ to ‘React’ world ● Can start immediately if you comfortable with Angular ● No opinionation (how you handle network requests or structure your modules) ● So small so you can start with a fragment of your UI
- 36. Check out the links ● Introduction mini-book (PDF + github repo) ● Awesome list: https://github.com/vuejs/awesome-vue ● Newsletter: https://www.getrevue.co/profile/vuenewsletter ● Twitter: https://twitter.com/vuejs and #vuejs tag ● Stackoverflow: http://stackoverflow.com/tags/vue.js/info ● Chats: https://gitter.im/vuejs/vue, http://telegram.me/vuejs_ru