Today i finished from Vuejs documentation and i summarised it as a tags to review it quickly.
The data and the DOM are now linked, and everything is now reactive.
Directive: are prefixed with v- to indicate that they are special attributes provided by Vue and they apply special reactive behavior to the rendered DOM.
v-bind directive, EX:: v-bind:title to bind data into title attribute for element.
Conditionl:: v-if directive
Iterative: v-for directive from array.
interact with your app by v-on directive(update the dom without touching the DOM), ex: v-on:click.
all DOM manipulations are handled by Vue, and the code you write is focused on the underlying logic.
v-model directive that makes two-way binding between form input and app state a breeze.
The component system allows us to build large-scale applications composed of small, self-contained, and often reusable components.
Vue components are very similar to Custom Elements.
Vue components implement the Slot API.
new Vue :: root Vue instance.
all Vue components are also Vue instances.
If you know you’ll need a property later, you’ll need to set some initial value.
$ prefixed to differentiate properties and methods from user-defined properties.
initialization steps when iVue instance created:: set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes.
lifecycle hooks:: created hook/method (run code after an instance is created), mounted, updated, and destroyed.
All lifecycle hooks are called with their this context pointing to the Vue instance invoking it.
All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
Vue compiles the templates into Virtual DOM render functions.
v-once directive:: one-time interpolations that do not update on data change.
v-html:: to output real HTML and replaced with current tag and you cant compose template partials// data bindings are ignored.
Vue is not a string-based templating engine.
Vue supports the full power of JavaScript expressions inside all data bindings but can only contain one single expression.
Modifiers:: special postfixes denoted by a dot.
Shorthands(optional):: examples: v-bind:href=> :href, v-on:click=>@click.
Computed Properties:: to reduce complexity logic// methond in the Vue instance.
differnce between put your function in computed or methods is caching so the computed properties are cached based on their dependencies.
a method invocation will always run the function whenever a re-render happens.
watch properties:: to observe and react to data changes on a Vue instance.
Computed properties are by default getter-only, but you can also provide a setter when you need it.
watch option allows us to perform an asynchronous operation (accessing an API).
Binding Inline Styles:: by v-bind:style but it’s a JavaScript object.
Conditional Rendering:: conditional block in template {{#if}}, v-if, v-else
Controlling Reusable Elements with “key” attribute.
conditionally displaying an element (another option): v-show and its rely on display so its render in the page.
v-if: destroyed and re-created during toggles.
Generally speaking, v-if has higher toggle costs while v-show has higher initial render costs.
v-for has a higher priority than v-if.
Replacing an Array (filter, concat, slice) always return a new array.
Vue cannot detect the following changes to an array: 1. (set an item with the index),ex: vm.items[indexOfItem] = newValue. 2. (length),ex: vm.items.length = newLength, solution by splice.
Vue cannot detect property addition or deletion
It is recommended to provide a key with v-for whenever possible, to give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements.
Vue.set(object, key, value) method, to add reactive properties to a nested object.
Object.assign(), to assign a number of new properties to an existing object.
We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered.
event modifiers for v-on: .stop, .prevent, .capture, .self, .once, and modifiers can be chained.
key modifiers for v-on, ex: v-on:keyup.13 or by alias, v-on:keyup.enter
v-model will ignore the initial value, checked or selected attributes found on any form elements, and it automatically picks the correct way to update the element based on the input type.
Componenets: to extend basic HTML elements to encapsulate reusable code.
Vue can only retrieve the template content after the browser has parsed and normalized it.
the parent-child component relationship can be summarized as props down, events up.
Every component instance has its own isolated scope.
All props form a one-way-down binding between the child property and the parent one.
you may use “two-way binding” for a prop by using .sync
v-model on a component uses value as the prop and input as the event.
content distribution/transclusion:: a way to interweave the parent “content” and the component’s own template using
Anything originally inside the tags is considered fallback content.
Dynamic Components:: by using element and dynamically bind to its is attribute.
Vue component comes in three parts – props, events, and slots.
reference ID to the child component using “ref”, you should avoid using $refs in templates or computed properties.
the factory function when the component actually needs to be rendered and will cache the result for future re-renders.
The content distribution API is a very useful mechanism when designing components that are meant to be composed together.
When registering components (or props), you can use kebab-case, camelCase, or PascalCase.
Within HTML templates though, you have to use the kebab-case equivalents.
inline-template special attribute is present on a child component, the component will use its inner content as its template, rather than treating it as distributed content.
v-once directive:: to evaluate HTML content (static) once and then cached.