An OverVue

Vue.js is relatively new, yet competent contender in the JavaScript MVC arena. Andrew Willis will take us through debugging your Vue components, consuming APIs with Vue Resource, and the newly released Vue.js 2.0.

Transcript

1. An OverVue By Andrew Willis
2. A Brief History Vue.js was created by Evan You Former Google and Meteor employee Started building Vue.js while at Google Found Angular too opinionated / unsuitable for some projects Built Vue.js to be simpler and less opinionated than Angular Built it to be able to grow with your project
3. What is Vue.js? Vue.js describes itself as a "Progressive JavaScript Framework" So... What does that mean?
4. What is Vue.js? Vue.js is an adaptable framework which is suited to a variety of different use-cases and can grow with your project, from a small interactive component, through a full page of nested components, all the way up to a single-page app.
5. Why do I use it?
6. The Vue Instance <div id="app"> <p> {{ greeting }} </p> </div> new Vue({ el: '#app', data: { greeting: 'hello', } }); HTML JavaScript
7. <div id="app"> <some-component></some-component> </div> // app.js import Vue from 'vue'; import SomeComponent from 'SomeComponent.vue'; new Vue( el: "#app", components: { SomeComponent } ) // SomeComponent.vue <template> <div class="some-component"> <p>{{ greeting }}</p> </div> </template> <script> export default { data() { return { greeting: "Hello from Some Component" } } } </script>
8. // SomeComponent.vue <template> <div class="some-component"> <input type="text" :value="greeting" @input="update"> <p>{{ greeting }}</p> <span class="greeting-length">{{ greetingLength }}</span> </div> </template> <script> export default { data() { return { greeting: "Hello from Some Component" } }, computed: { greetingLength() { return this.greeting.length } }, methods: { update: _.debounce(function (e) { this.greeting = e.target.value }, 100) } } </script>
9. // SmallerComponent.vue <template> <div class="smaller-component"> <p>Boo</p> </div> </template> // SomeComponent.vue <template> <div class="some-component"> <smaller-component></smaller-component> <input type="text" :value="greeting" @input="update"> <p>{{ greeting }}</p> <span class="greeting-length">{{ greetingLength }}</span> </div> </template> <script> import SmallerComponent from 'SmallerComponent.vue' export default { ... components: { SmallerComponent } } </script>
10. The Vue Ecosystem Vue.js has a whole bunch of plugins and resources: vuex vue-router vue-devtools vue-resource vue-validator vue-strap github.com/vuejs/awesome-vue
11. Vuex Manage the state of your app between components Components should be independent Can abstract persistence away from your components Inspired by Flux architecture Tailored to Vue.js
12. Vue Router Routes each page to a component Used to build Single Page Apps import Vue from 'vue' import VueRouter from 'vue-router' import SomePage from 'SomePage.vue' const router = new VueRouter({ routes: { path: '/some-page', component: SomePage } }) const app = new Vue({ router }).$mount('#app') <div id="app"> <nav> <router-link to="/some-page"> Some Page </router-link> </nav> <router-view></router-view> </div> HTML JavaScript
13. Vue Devtools Allows you to see and modify your active Vue components Works with Vuex, allows you to travel back through changes
14. Putting it all together github.com/vuejs/vue-hackernews-2.0