A guide to give you a working mental model in areas of core importance to Vue.js. You won't become an expert but it should give you a foundation to build on.
Quick notes on Vue.js
<div id="app">
{{ message}}
</div>var app = new Vue({
el: '#app',
data: {
message: 'Hello world!'
}
})Output
<div id="app">
Hello World!
</div>A Vue instance is created by invoking new Vue() and passing in an object with certain properties defined.
The el property specifices whate element on the page Vue should bind to. In this simple example, Vue uses the existing HTML at this location as its template.
The data property holds the local state of this instance. Properties of this data can be referenced in the template (HTML generally) or in Javascript. For example, the {{ message }} in the HTML above will be replaced with the contents of message
Data properties are reactive. That means if the message property is updated, the HTML rendered at {{ message }} will be updated as well.
There are some limitations to how this works, and understanding those limits is an important part of using Vue.
On a Vue object you might see something like
...,
computed: {
message() {
return `Hello ${this.name}!`
}
},
...This is a computed property. Computed properties are implemented as functions that return a value.
They are accessed just like you would access a normal data property. Computed properties are only reevaluated when the underlying data changes (this.name in this case).
Computed properties should be used instead of methods wherever possible.
Some more complex things about Vue
Vue can't track property additions or deletions at runtime,
nor does Vue allow you to dynamically add new root level properties (i.e. data.property).
If you must add a property to a nested object, you'll need to use Vue.set to make it reactive.
...
data() {
return {
nestedObj: {
a: 'Apple',
b: 'Bannana'
}
}
},
methods: {
addOrange() {
Vue.set(this.nestedObj, 'o', 'Orange')
}
}https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
Vue does some stuff with buffering changes. We can pass a callback function to be executed after the changes are written to the DOM like so:
this.$nextTick(function() {})We should avoid this wherever possible. But it might be necessary, particularly in the text editing component.
https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue
A collection of ES6 features that might be unusual if you've mostly worked with older Javascript
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
A shortcut for assigning variables to object properties when you're assigning variables to an object property with the same name.
let name = 'Jake'
let language = 'Javascript'
let obj = {
name,
language
}
// is equivalent to
obj = {
name: name,
language: language
}A shorthand for defining methods on an object.
let obj = {
doTheThing() {
// Method implmentation
},
// is equivalent to
doTheOtherThing: function() {
// Method implementation
}
}Let's you set a property name that will be determined by a variable or expression at runtime.
let propName = 'TheThing'
var obj = {
[propName]: 'The key for this property will be "TheThing"',
['Also' + propName]: 'The key for this property will be "AlsoTheThing"',
['do' + propName]() {
// This is the doTheThing function
}
}
obj.TheThing
obj.AlsoTheThing
obj.doTheThing()https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
Similar to Python Lambdas and C# LINQ expressions.
A shorthand for declaring Javascript functions.
// One line arrow functions have an implicit return, i.e. the result of the expression will be returned
let doTheThing = (firstname, lastname) => firstname + lastname
doTheThing = () => 'Whatever'
doTheThing = _ => 'Whatever'
doTheThing = param1 => param1.name
doTheThing = aParam => {
let bReturn = aParam * 2
return bReturn
}
// Usage on object methods is not recommended in normal Javascript but okay in Vue/Vuex
// Related to potential confusion with binding 'this'
const getters = {
fullname: state => state.firstname + state.lastname
}Be mindful of your {} and () if you're doing a one liner with implicit return.
// The brackets here get interpreted as block brackets not object brackets
let doTheThing = (firstname, lastname) => { fullname: firstname + lastname }Unlike other Javascript functions, arrow functions don't bind this. This is less relevant when dealing with functions on Vue objects, e.g. in the methods property since Vue binds this for us behind the scenes. If we end up using prototypes or other forms of this in our library code then it might be relevant.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
Pull properties out of objects.
This is an example of what you might see in Vuex. When Vuex calls an action method, the first parameter is a context object (https://vuex.vuejs.org/en/actions.html).
The context object has all of the vuex modules properties and commit (commit, state, getters, and actions)
const actions = {
doTheThing({ commit }) {
// The commit function will be available here but not the rest of context
commit('MY_MUTATION', payload)
},
// is equivalent to
doTheOtherThing(context) {
context.commit('MY_MUTATION', payload)
}
}This is probably the most complicated thing on this page. The way we use it in Vue is pretty straight forward though. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
Export makes code available to other files/modules
Import brings in code from other files/modules
// File: thing.js
let thisIsAThing = param => param*2
export default {
doTheThing() {
// Do something
},
name: 'The Thing',
thisIsAThing
}// File: client.js (or whatever)
// Since we used export default, you can call it whatever you want,
// in this case I've chosen TheThing
import TheThing from 'thing.js'
TheThing.name
TheThing.doTheThing()
TheThing.thisIsAThing(5)// File: things.js
export const NAME = 'The Thing'
export function doTheThing() {
// Do something
}
export let x = 5// File: client.js (or whatever)
import { NAME, doTheThing, x } from 'things'
NAME
// 'The Thing'
doTheThing()
// Executes function
x
// 5https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
A way to do string interpolation.
Uses ` (backticks) as quotes.
Instances of ${...} will be evaluated as an expression and inserted into the string (e.g. a variable will have its value inserted).
let firstName = 'Jake'
let jsVersion = 'ES6'
let greeting = `Hello ${firstName}! Welcome to ${jsVersion}.`Is equivalent to
var firstName = 'Jake'
var jsVersion = 'ES5'
var greeting = 'Hello ' + firstName + '! Welcome to ' + jsVersion + '!'
(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
A collection of Vue resources to reference
All of the Vue projects have very well written and useful documentation.