Vue.js is a rapidly growing front-end framework for JavaScript, inspired by Angular.js, Reactive.js, and Rivets.js that offers simplistic user-interface design, manipulation, and deep reactivity.
It is described as a MVVM patterned framework, Model-View View-Model, which is based on the concept of two-way binding data to components and views. It is incredibly fast, exceeding speeds of other top-tier JS frameworks, and very user friendly for easy integration and prototyping.
In Component(s):
props is an array of string literals or object references used to pass data from parent component. It can also be in object form when it is desired to have more fine grained control like specifying default values, type of data accepted, whether it is required or optional
data has to be a function which returns an object instead of a plain object. It is so because we require each instance of the component to have its own data for re-usability purpose.
events is an object containing listeners for events to which the component can respond by behavioral change
methods object containing functions defining the behavior associated with the component
computed properties are just like watchers or observables, whenever any dependency changes the properties are recalculated automatically and changes are reflected in DOM instantly if DOM uses any computed properties
ready is a Vue instance's life-cycle hook
The main use-case difference for the data and computed properties of a Vue instance is dependent on the potential state or probability of changing of the data. When deciding what category a certain object should be, these questions might help:
When defining the names of your props, always remember that HTML attribute names are case-insensitive. That means if you define a prop in camel case in your component definition...
Vue.component('child', {
props: ['myProp'],
...
});
...you must call it in your HTML component as my-prop.
It is very important to remember the difference between v-if and v-show. While their uses are almost identical, an element bound to v-if will only render into the DOM when it's condition is true for the first time. When using the v-show directive, all elements are rendered into the DOM but are hidden using the display style if the condition is false!
Important! Slots after render don't guarantee order for positions for slots. Slot, which was the first, may have a different position after render.
<component> is a reserved component element, don't be confused with components instance.
v-bind is a directive. Directives are prefixed with v- to indicate that they are special attributes provided by Vue.
In most cases you will need to explicitly tell Vue to use a plugin
// calls `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
To pass options
Vue.use(MyPlugin, { someOption: true })
The configurations described above, the example using a non-sstandardised function will work on "internet explorer" and npm test will pass.
To have v-model on a component you need to fulfil two conditions.
input event with the value expected by the parent components.<component v-model='something'></component>
is just syntactic sugar for
<component
:value="something"
@input="something = $event.target.value"
>
</component>
Use vuex if your application has a lot of components requiring the data of each other.