CheatSheetsHub / vue

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

vue

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

Menu

EXPRESSIONS Binding

EXPRESSIONS

I have a {{ product }}

{{ product + 's' }}

{{ isWorking ? 'YES' : 'NO' }}

{{ product.getSalePrice() }}

Binding

... Shorthand syntax ...

True or false will add or remove attribute ... If isActive is truthy, the class ‘active’ will appear

... Style color set to value of activeColor

Directives

Element inserted/removed based on truthiness

{{ product }}

...

...

Toggles the display: none CSS property

...

Two-way data binding v-model.lazy="..." Syncs input after change event v-model.number="..." Always returns a number v-model.trim="..." Strips whitespace

Actions/Events

Calls addToCart method on component

... Shorthand syntax <button @click="addToCart">...

Arguments can be passed <button @click="addToCart(product)">... To prevent default behavior (e.g. page reload)

... Only trigger once ... .stop Stop all event propagation .self Only trigger if event.target is element itself Keyboard entry example Call onCopy when control-c is pressed

List rendering

The :key is always recommended

{{ item }}

To access the position in the array

... To iterate through objects

... Using v-for with a component

Component

Component anatomy

Vue.component('my-component', { components: { // Components that can be used in the template ProductComponent, ReviewComponent }, props: { // The parameters the component accepts message: String, product: Object, email: { type: String, required: true, default: "none" validator: function (value) { // Should return true if value is valid } } }, data: function() { // data must be a function return { firstName: 'Vue', lastName: 'Mastery' } }, computed: { // Return cached values until dependencies change fullName: function () { return this.firstName + ' ' + this.lastName } }, watch: { // Called when firstName changes value firstName: function (value, oldValue) { ... } }, methods: { ... }, template: '{{ message }}', // Can also use backticks in template for multi-line })

Lifecycle hooks

beforeCreate After the instance has been initialized # created After the instance is created # beforeMount Before the first render # mounted After the instance has been mounted # beforeUpdate When data changes, before the DOM is patched # updated After a data change # beforeDestroy Before the instance is destroyed # destroyed After a Vue instance has been destroyed #

Custom events

Set listener on component, within its parent Inside parent component methods: { incWithVal: function (toAdd) { ... } } Inside button-counter template this.$emit( 'incrementBy', // Custom event name 5 // Data sent up to parent ) Use props to pass data into child components, custom events to pass data to parent elements.

Single file components

Single file

{{ greeting }} World!

<script> module.exports = { data: function () { return { greeting: 'Hello' } } } </script> <style scoped> p { font-size: 2em; text-align: center; } </style>

Separation

This will be pre-compiled

<script src="./my-component.js"></script> <style src="./my-component.css"></style>

Slots

Using a single slot

Component template

I'm a title

Only displayed if no slot content

Use of component with data for slot

This will go in the slot

Multiple slots

Component template

Default content

Use of component with data for slots

Page title

the main content.

Contact info