Vue notes

Vue build version

Full: compiler and runtime
Runtime-only: responsible for creating Vue instances, rendering and patching virtual DOM etc. Basically everything except the compiler
CommonJS & ES Module: for self-defined build & package with tools like webpack & browserify
Runtime + Compiler vs Runtime-only: If you need to compile templates on the fly (parsing string in template option or mounting the template), you need the compiler and thus full build. If you provide render function, then you could just use the runtime version

Development vs production

In development mode, Vue will log relative warnings and errors for debug, while such helper functions are removed in production mode for performance and light-weight build. By default, Vue runs in development mode. The production mode is determined by process.env.NODE_ENV inside Vue’s source code. Build tools provide ways to overwrite the value to enable production mode (webpack): to set process.env.NODE_ENV or to define plugin by new webpack.definePlugin({ “process.env”: { “NODE_ENV”: “production” }}).

Vue-cli

Vue-cli provide scafford for project setup. It will be convinient for those developer who has been annoied by configurations. With Vue-cli you could start your development in minutes.

Built-in directives

v-bind (:): interpolation for HTML attributes
v-on (@): event binding
v-for: array or object iteration
v-if: insertion or removal of template
v-model: two-way data binding
v-once: interpret and render once
v-html: binding raw html
v-show: to display the target element

Interpolation (expression)

Mustache (double curly braces): {{ expression }}
Mustache does not work inside HTML attributes, use v-bind instead

Filter

for Text fomatting. Filters could be used in mustache interpolation & v-bind expression

Components

Component is an abstract of small parts in applications. We could think it in the way that any application could be divided into small components. Some of them are self-defined, some of them are unique and some of them are reusable. All components are organized into a tree, making up of the application.

Vue instance

• Creating instance by new Vue() with constructor
• Extending constructor by Vue.extend()
• Proxing all properties defined in data
• Instance lifecycle

Computed properties and watchers

Computed properties will be updated when the dependent properties are changed in data (the getter methods defined in computed are executed).
Computed properties will be cached based on their dependencies. A computed property will only re-evaluate when some of its dependencies have changed. But method invocation ({{ prop() }} instead of {{ prop }}) will always run when ever a re-render happens.
Use computed setter when in need, use watchers when necessary.
Never overuse Watchers, use computed properties instead.

Class and style binding

…

Event handling

Event handlers in methods
Event modifiers
Key modifiers

Form input

v-model
checkbox
radio
select (single & multiple)
Modifiers (.lazy, .number, .trim)

Components

DOM template parsing caveat: use is attribute for <ol> <ul> <table> <select> which has strict HTML syntax for their children.
data must be a function. Since Vue initializes intances with the returned value of data function.
Composing components: props down, events up. The parent passes data down to the child via props, and the child send messages to the parent via events. But where the data should belong to and who should update them? The answer is, data lies in the scope the component contains it, and only the component which owns the data should modify it. The child component or parent component have effects to data states, emit or broadcast events to notify the target component to update it.
Passing data with props: every component has its own isolated scope. This means you can not and should not directly reference parent data in a child component’s template. Instead, you could pass data down to the child component by using props.
Literal vs dynamic: By default, all values in props are strings, no matter you pass in a number or boolean or object, e.g, pass in “obj.property”, Vue just treat it as string “obj.property”. Vue will interpret each value as string. For dynamic binding, you should use v-bind (:), which will evaluate the value or expression.
One-way data flow: All props form a one-way down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. Every time the parent component is updated, all props in the child component will be refreshed with the latest value. You should not attempt to mutate a prop inside a child component. Vue will warn you in the console if do that.
There are usually two cases where it’s tempting to mutate a prop:
1. The prop is used to pass in as a initial value, the child component wants to use it as a local data property afterwards. You could define a local data property in the child component initialized with props value passed down.
2. The prop is pass in as a row value and needs to be transformed. You can define a computed property for the prop’s value for transformation.
Note that objects and arrays are passed by reference in javascript. If you mutate the property inside them, it will affect the parent’s state.
Prop validation: always validate value in props. Validation helps you avoid situations that invalid props make your code broken. Always follow defensive programming rules.
Vue event system: Vue event system implements an events interface, which means it can listen to an event using $on(eventName)(you could only use v-on directive) and trigger an event using $emit(eventName). Vue event system is seperate from browser’s event API.
Binding native events to components using .native.
Content distribution: slot
Slot: content distribution. Content in parent scope will be inserted at the position of the child slot, replacing the slot element completely. name property could be set for multiple slots inside a component (otherwise the only one is as default).
Compilation scope: Everything in parent template is compiled in parent scope. Everything in child template is compiled in child scope.
Single slot: parent content will be discarded unless the child component template contains at least one <slot> outlet. When there is only one slot without attributes, the entire content fragment will be inserted as its position in the DOM, replacing the slot itself. Anything originally inside the slot tag is considered fallback content. Fallback content is compiled in the child scope and and will be only display if the hosting element is empty and has no content to be inserted.
Name slot: name property could be used to customize how content should be distributed. Multiple slots could be set with different names, which will match the elements with corresponding slot property value. There still could be a unnamed slot as a default one for any other unmatched content.
Scope slot: scope slot allow to access props and data in child component when writing parent template. By adding <template> inside child component directive (e.g. <child><template scope="scope"></template></child>), then the attributes defined in the child component slot could be accessed (e.g. <slot :text="text"></slot>)

Transition

Vue provides a transition wrapper component, allowing you to add entering/leaving transition for any element or component in the following context:

• Conditional rendering (v-if)
• Conditional display (v-show)
• Dynamic components
• Component root nodes

When an element wrapped in a transition component is inserted or removed, this is what happens:

1. Vue will automatically sniff whether the target element has CSS transitions or animations applied. If it does, CSS transition classes will be added/removed at appropriate timings.
2. If the transition component Javascript hooks, these hooks will be called at appropriate timings.
3. If no CSS transitions/animations are detected and no Javascript hooks are provided, the DOM operations for insertion and/or removal will be executed immediately on next frame (This is the browser animation frame, different from Vue’s concept of nextTick)

Transition classes

CSS transitions and animations could be applied for insertion and removal. And besides, Vue supports custom transtion classes. You can specifiy custom transition classes by providing the following attributes

- enter-class- enter-active-class- enter-to-class- leave-class- leave-active-class- leave-to-class

Javascript hooks

……

State management

Vue offers vuex for state management to avoid states scattered across multiple components.

For scratch, Vue apply store pattern to store data shared across components. The store provides interface (or handlers for events) for data access and mutation.

Mixins

Mixins are a flexble way to distribute reusable functionalities for Vue components. A mixin can contain any component options (e.g. methods, computed, props). When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.

let mixins = {    created () {        this.hello()    },    methods: {        hello () {            console.log('hello')        }    }}// home.vueexport default {    mixins: [mixins],    data () {    }}

Tips

1. Every single-file component (.vue) must export a default object that serves as the component instance.
2. Template could only contain one child element (due to createElement function’s argument in render function. The first argument must be a html tag. If you pass in multiple html tags, it does not know how to create VNODE).
3. For css import with alias route, prepend ~, e.g. @import “~@examples/assets/styles/base.css”
4. .native modifier could help you listen to native dom event. Because for those dom element (e.g. div, p, span), vue doesn’t implement the native dom events on them, therefore, they are not in the vue context when native dom event are fired. For example, if you click on <div @click="handleClick">handle click</div>, nothing will happen. That’s why .native come to save. We could listen to native dom event with it.