Sage-Code Laboratory
index<--

Introduction to Vue.js

Vue.js is an approachable, versatile, performant and progressive JavaScript framework that help you build maintainable and testable dynamic websites. It was created by Evan You who worked for Google using AngularJS.

Some people say Angular was over-engineered and is now difficult to use in applications. For some even React is too complex, so here it is Vue that is simplified and distinct. We look forward to use this library in some of our projects.

Notes:

Architecture

Vue.js implements model-view-view-model architecture: MVVM. This facilitate the separation of development for graphical user interface (view) from the development of business logic (the model). The ViewModel is an intermediary component that convert data elements from model to visual components to be display in view. You can read more about this architecture here: Wikipedia MVVM

Components Vue components are custom HTML element that encapsulate code. The code represents behavior that makes the HTML element dynamic. That is it can change it's display properties and content. The HTML element is identified by Vue using an attribute: id="name". This is similar to React.

Templates Vue uses HTML template syntax. Templates can use JSX syntax. This enable applications to be created using CBD (Component Based Development) methodology. Using reusable components with templates you can improve your productivity to create complex apps.

Reactivity Vue is a reactive system. That means each component keeps track of its dependencies. So the system knows when to re-render a component. This is the secret of a reactive webpage. It refresh itself without the need for you to press the refresh button. This feature is also one of the goals of modern web applications.

Transition Vue enable animation effects to be used for components. That means when a new component is created or removed, it is not displayd immediately but it can have an effect, for example: fading, sliding. These operations can use CSS or custom JavaScript libraries such as velocity.js

Routing Vue provides an interface to change what is displayed on the page based on the current URL path. That means you can make applications that enable creation of bookmarks. This is cool because a SPA (Single Page Application) usually have a single page. And the URL do not change when you do something in that page. Vue doesn't come with front-end routing. But the open source "vue-router" package provides an API to update application's URL.

References

You have not learned Vue just yet. So far you know what Vue is and what it can do. Next you must visit project homepage, follow the Vue free video lectures and red Vue documentation. Then you can join Vue discord group and start your first project. Do not be afraid to ask questions on Discord about Vue. This community is very responsive.

Project:

Tools

They say ember is used by many well known companies. This list is impressive. Probably if you want to apply for one of these companies you should study a little bit more about Ember.

Examples

For examples, watch my Twitch streaming channel. One of next sessions I will use JavaScript frameworks so you can learn from my videos. Until then, have fun reading other tutorials that I have posted and check-out my examples on codepen.io website.

rs.google.com/web/tools/chrome-devtools" rel="nofollow noopener noreferrer" target="_blank"> Devtools: Browser devtools extension for debugging Vue.js applications
  • Vue CLI: Standard Tooling for rapid Vue.js development
  • Vue Loader: Webpack loader that allows Vue Single-File Components (SFCs)

    • Libraries

    Read next: Server Side JS

    Svelte Framework