components

components Type: Object Details: A hash of components to be made available to the Vue instance. See also: Components

Components

What are Components? Components are one of the most powerful features of Vue.js. They help you extend basic HTML elements to encapsulate reusable code. At a high level, Components are custom elements that Vue.js’ compiler would attach specified behavior to. In some cases, they may also appear as a native HTML element extended with the special is attribute. Using Components Registration We’ve learned in the previous sections that we can create a component constructor using Vue.extend(): var M

component

component Attributes: is Param Attributes: keep-alive transition-mode Usage: Alternative syntax for invoking components. Primarily used for dynamic components with the is attribute: <!-- a dynamic component controlled by --> <!-- the `componentId` property on the vm --> <component :is="componentId"></component> See also: Dynamic Components

compiled

compiled Type: Function Details: Called after the compilation is finished. At this stage all directives have been linked so data changes will trigger DOM updates. However, $el is not guaranteed to have been inserted into the document yet. See also: Lifecycle Diagram

Comparison with Other Frameworks

Angular There are a few reasons to use Vue over Angular, although they might not apply for everyone: Vue.js is much simpler than Angular, both in terms of API and design. You can learn almost everything about it really fast and get productive. Vue.js is a more flexible, less opinionated solution. That allows you to structure your app the way you want it to be, instead of being forced to do everything the Angular way. It’s only an interface layer so you can use it as a light feature in pages

Class and Style Bindings

A common need for data binding is manipulating an element’s class list and its inline styles. Since they are both attributes, we can use v-bind to handle them: we just need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Vue.js provides special enhancements when v-bind is used for class and style. In addition to Strings, the expressions can also evaluate to Objects or Arrays. Binding HTML Classes Althou

capitalize

capitalize Example: {{ msg | capitalize }} ‘abc’ => ‘Abc’

Building Large-Scale Apps

NEW: Get up and running with single file Vue components, hot-reload, lint-on-save and unit testing in minutes with vue-cli! The Vue.js core library is designed to be focused and flexible - it’s just a view layer library that doesn’t enforce any application-level architecture. While this can be great for integrating with existing projects, it could be a challenge for those with less experience to build larger scale applications from scratch. The Vue.js ecosystem provides a set of tools and lib

beforeDestroy

beforeDestroy Type: Function Details: Called right before a Vue instance is destroyed. At this stage the instance is still fully functional. See also: Lifecycle Diagram

beforeCompile

beforeCompile Type: Function Details: Called right before the compilation starts. See also: Lifecycle Diagram