Online Mind Mapping and Brainstorming

Create your own awesome maps

Online Mind Mapping and Brainstorming

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account? Log In

Vue (Instance) by Mind Map: Vue (Instance)
5.0 stars - 24 reviews range from 0 to 5

Vue (Instance)

Special Attributes

key

ref

slot

Global Config (Vue.config)

silent

Suppress all Vue logs and warnings.

optionMergeStrategies

devtools

Configure whether to allow vue-devtools inspection. This option’s default value is true in development builds and false in production builds. You can set it to true to enable inspection for production builds.

errorHandler

Assign a handler for uncaught errors during component render and watchers. The handler gets called with the error and the Vue instance

ignoredElements

Vue.config.ignoredElements = [  'my-custom-web-component', 'another-web-component'] Make Vue ignore custom elements defined outside of Vue (e.g., using the Web Components APIs). Otherwise, it will throw a warning about an Unknown custom element, assuming that you forgot to register a global component or misspelled a component name.

keyCodes

Define custom key alias(es) for v-on. Vue.config.keyCodes = {  v: 86,  f1: 112,  mediaPlayPause: 179,  up: [38, 87]}

Directives

v-text

v-html

v-show

v-if

v-else

v-else-if

v-for

v-on

v-bind

v-model

v-pre

v-cloak

v-once

Options

Assets

Misc

Lifecycle Hooks

DOM

Data

Components

Usage

Templates

Options { }

Composition

Custom Form Inputs

Example: v-model="price"> The events interface can also be used to create more unusual inputs. For example, imagine these possibilities: "question">"gesture">"retinalImage">

Content Distribution ( Slots )

Dynamic Components

You can use the same mount point and dynamically switch between multiple components using the reserved element and dynamically bind to its is attribute. e.g. var vm = new Vue({  el: '#example',  data: {    currentView: 'home'  },  components: {    home: { /* ... */ },    posts: { /* ... */ },    archive: { /* ... */ }  }}) v-bind:is="currentView"> 

Naming Convencions

// in a component definitioncomponents: {  // register using kebab-case  'kebab-cased-component': { /* ... */ },  // register using camelCase  'camelCasedComponent': { /* ... */ },  // register using TitleCase  'TitleCasedComponent': { /* ... */ }}

API

API

VNode Interface

Server-Side Rendering

Built-In Components

Instance

Global API

options { }

data { }

template

methods

lifecycle hooks

Properties

Each Vue instance proxies all the properties found in its data object

Reactivity

Own properties $

$on(eventName)

$emit(eventName)

Directives

v-bind

Example with argument and modifier: v-bind:sumbit.prevent The argument is the event to listen to. The modifier indicate that the directive should be bound in some special way. e.g. .prevent tells v-on directive to call event.preventDefault()

v-show

v-on

key

Controlling reusable elements

v-for

v-on:submit.prevent

Watchers

The reactivity of watchers is most useful when you want to perform asynchronous or expensive operations in response to changing data.

Computed Properties

Computed properties are meant for simple operations.They are cached based on their dependencies. A computed property will only re-evaluate when some of its dependencies have changed. In comparison, a method invocation will always run the function whenever a re-render happens.

Computed vs Watched

Vue does provide a more generic way to observe and react to data changes on a Vue instance: watch properties. When you have some data that needs to change based on some other data, it is tempting to overuse watch - especially if you are coming from an AngularJS background.

setters

Computed properties are by default getter-only, but you can also provide a setter when you need it: // ...computed: {  fullName: {    // getter    get: function () {      return this.firstName + ' ' + this.lastName    },    // setter    set: function (newValue) {      var names = newValue.split(' ')      this.firstName = names[0]      this.lastName = names[names.length - 1]    }  }}// ...

Event Handling

v-directive:param="value"e.g v-on:click="greet">Greet

param

value

Advanced Topics

Components

Reactivity

Transitions and Effects

Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM.

Transition State

Render function

Example: Vue.component('anchored-heading', {  render: function (createElement) {    return createElement(      'h' + this.level,   // tag name      this.$slots.default // array of children    )  },  props: {    level: {      type: Number,      required: true    }  }})

Form Input Binding

two-way data bindings

Directives

angular transclude/ Slots

Authoring reusable components

Reusable components should define a clean public interface and make no assumptions about the context it’s used in. e.g  :foo="baz"  :bar="qux"  @event-a="doThis"  @event-b="doThat">    Hello!