My cheat sheet for vue.js most basic stuff. The goal wasn't to make another Vue documentation, because the official one is already badass. Big thank you to boussadjra for making this cheat sheet available as a website
Contributions and PRs are very welcome.
"You must type each of these exercises in, manually. If you copy and paste, you might as well not even do them. The point of these exercises is to train your hands, your brain, and your mind in how to read, write, and see code. If you copy-paste, you are cheating yourself out of the effectiveness of the lessons." - Zed A.
Sources:
Useful Chrome extensions:
Stuff that might get handy in almost every Vue.js project:
<html> <head> <meta charset="utf8"> <title>VueJS example</title> <link href="style.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="vue-app"> <p> {{ hello() }} </p> <p> {{ name }} </p> <p> {{ age + 1 }} </p> <p> {{ age < 18 ? "Youngster" : "Adult"}} </p> </div> <script src="app.js"></script> </body> </html>new Vue({ el: '#vue-app', // contoled element data: { name: "Matej", age: 27, sleepy: true }, methods: { hello: function () { return "Hello"; }, computed:{} } });
where available is a boolean variable in the js
<div v-show="available">Stuff</div>where available is a boolean variable in the js
<div v-show="available = !available">Stuff</div>where available is a boolean variable in the js
<div v-if="available">Stuff</div> <div v-else>Smth else</div>Remember to check if the element exists with v-if before looping over it
<ul> <li v-for="(element, index) in elements">{{index}} {{element}}</li> </ul><ul> <li v-if="employee" v-for="employee in employees">{{employee.name}} - {{employee.age}}</li> </ul><table> <tr> <th>Amount</th> <th>Asset</th> <th>Created</th> </tr> <template v-for="u in users"> <tr v-for="t in u.transfers">> <td>{{ t.amount }}</td> <td>{{ t.asset }}</td> <td>{{ t.timestamp }}</td>> </tr> </template> </table><li v-for="id in users" :key="id" :set="item = getUserData(id)"> <img :src="item.avatar" /><br /> {{ item.name }}<br /> {{ item.homepage }} </li><span v-text="name"></span><span v-html="name"></span><input v-model="name" type="text" /> <p>My name is: {{name}}</p>... data:{ name: "" } ...Computed properties are cached, and only re-computed on reactive dependency changes. Note that if a certain dependency is out of the instance’s scope (i.e. not reactive), the computed property will not be updated. In other words, imagine a computed property as a method (but it's not really a method) in the
data()that always returns a value. That "method" will be called whenever a property (variable fromdata()) used in that method is changed.
<html> <head> <meta charset="utf8"> <title>VueJS example</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="vue-app"> <button v-on:click="a++">Counter 1++</button> <button v-on:click="a--">Counter 1--</button> <button v-on:click="b++">Counter 2++</button> <p>Counter 1: {{ a }}</p> <p>Counter 2: {{ b }}</p> <!--The result() method is invoked whenever the Counter 1 button is clicker or the Counter 2 button is clicked--> <!--The output() method is invoked only when the Counter 2 button is clicked--> <p>Result: {{ result() }} | {{ output }}</p> </div> <script src="main.js"></script> </body> </html>new Vue({ el: '#vue-app', data: { a: 0, b: 0 }, methods: { result: function () { // this function is not interested in the "b" variable, yet it runs every time when the result needs to be changed console.log("methods"); return this.a < 0 ? "Negative" : "Positive"; } }, computed: { // these methods are invoked like attributes, without () // this method runs only when the "a" variable is changed output: function () { console.log("computed"); return this.a < 0 ? "Negative" : "Positive"; } } });var vm = new Vue({ data: { a: 1 }, computed: { // get only aDouble: function () { return this.a * 2 }, // both get and set aPlus: { get: function () { return this.a + 1 }, set: function (v) { this.a = v - 1 } } } }) vm.aPlus // => 2 vm.aPlus = 3 vm.a // => 2 vm.aDouble // => 4<p v-bind:style="{ property: value }">...</p>this div will have the red class if the userFound variable is set to true
<div v-bind:class="{ red: userFound }">...</div>this div will have the red class if the isAdmin variable is set to true
<div :class="[isAdmin ? 'red' : 'blue']">...</div>where method is a custom method in the js
<button v-on:click="method">Add</button>where method is a custom method in the js
<button @click="method">Add</button>method is called when ALT+ENTER is pressed
<input ref="name" v-on:keyuop.alt.enter="method" type="text" />The method sendModey will be called only if the condition amount > 0 has been met.
<button @click="amount > 0 && sendMoney()">Send money</button>// fire custom event this.$emit("eventName", data);<!-- $event == event data when _eventName_ event happens, call _functionName_ function --> <p v-on:eventName="functionName($event)"></p>// main.js // create new event bus export const bus = new Vue();// Header.vue import {bus} from "../main";// Footer.vue import {bus} from "../main";// listen to bus event in first component // usually in .created() function bus.$on("eventName", (data) => { // callback // use data }) // fire bus event in second component bus.$emit("eventName", data);<div id="app"> <!-- <component is="signature"></component> --> <signature></signature> <signature></signature> </div>// global registration Vue.component('signature', { template: '<p>Regards. Matej.</p>' });<!--App.vue--> <template> <div> <app-header></app-header> <app-ninjas v-bind:ninjas="ninjas"></app-ninjas> <app-footer></app-footer> </div> </template> <script> // import import Header from './components/Header.vue'; import Footer from './components/Footer.vue'; import Ninjas from './components/Ninjas.vue'; export default { // register components components:{ // added app- prefix // because header and footer tags already exist "app-header": Header, "app-footer": Footer, "app-ninjas": Ninjas }, data () { return { ninjas:[ {name: "ninja1", speciality: "vuejs", show: false}, {name: "ninja2", speciality: "nodejs", show: false}, {name: "ninja3", speciality: "react", show: false}, {name: "ninja4", speciality: "js", show: false}, {name: "ninja5", speciality: "css3", show: false}, {name: "ninja6", speciality: "ps", show: false} ] } } } </script><!--Ninjas.vue--> <template> <div id="ninjas"> <ul> <li v-for="ninja in ninjas" v-on:click="ninja.show = !ninja.show"> <h2>{{ninja.name}}</h2> <h3 v-show="ninja.show">{{ninja.speciality}}</h3> </li> </ul> </div> </template> <script> export default { // what is it receiving props: ["ninjas"], data: function () { return { } } } </script><!--Header.vue--> <template> <header> <h1>{{title}}</h1> </header> </template> <script> export default { data: function () { return { title: "Welcome!" } } } </script><!--Footer.vue--> <template> <footer> <p>{{copyright}}</p> </footer> </template> <script> export default { data: function () { return { copyright: "Copyright 2017 " } } } </script>export default { props:{ ninjas:{ type: Array, required: true } } }<h1>{{title | to-uppercase}}</h1>// main.js Vue.filter("to-uppercase", function ( value ) { return value.toUpperCase(); });Reuse some piece if code (or function) so that it doesn't need to be written in more separate files.
<input ref="name" type="text" />var name = this.$refs.name;dynamically change component based on variable component value rememberto use keep-alive tag to remember data from the destroyed component
<template> <div> <component> v-bind:is="componentName"></component> </div> </template> import formOne from "./components/formOne.vue"; import formTwo from "./components/formTwo.vue"; ... data: function() { return { component: "form-two" } }$ vue init webpack-simple my-project $ cd project-name $ npm install $ npm run dev this will make a dist folder with minified js
$ npm run build - new Vue();
- .beforeCreate();
- .created();
- .beforeMount();
- .updated();
- .beforeUpdate();
- .beforeDestroy();
- .destroyed();
<div> <label for="">Newsletters</label> <input type="checkbox" value="newsletter" v-model="categories"> <label for="">New posts</label> <input type="checkbox" value="post" v-model="categories"> <label for="">New DMs</label> <input type="checkbox" value="dm" v-model="categories"> <label for="">New pokes</label> <input type="checkbox" value="pokes" v-model="categories"> </div>data: function () { categories: [] }<div> <select v-model="town"> <option value="osijek">Osijek</option> <option value="zagreb">Zagreb</option> <option value="varazdin">Varazdin</option> </select> <select v-model="town"> <option v-for="t in towns">{{ t }}</option> </select> </div>data: function () { town: "", towns: ["Zagreb", "Osijek", "Varazdin", "Split", "Rijeka", "Dubrovnik"] }Important: if sending nested objects, be sure to JSON.stringify first!
import VueResource from 'vue-resource' Vue.use(VueResource);post: function () { this.$http.post("http://localhost:3000/users", { title: this.blog.title, body: this.blog.body, userId: 1 }).then( res => { // promise console.log("Response: ", res); }, error => { console.log("Error: ", error); }); }post: function () { this.$http.get("http://localhost:3000/users").then( function ( res ){ // promise console.log("Response: ", res) }); }// router.js import login from "./components/login.vue"; import registration from "./components/Registration.vue"; import user from "./components/user.vue";// main.js import VueRouter from 'vue-router'; import { routes } from "./routes"; Vue.use(VueRouter); const router = new VueRouter({ routes }); new Vue({ el: '#app', router: router, render: h => h(App) })// routes.js import Login from "./components/Login.vue"; import Registration from "./components/Registration.vue"; import User from "./components/User.vue"; export const routes = [ { path: "", component: Login }, { path: "/registration", component: Registration }, { path: "/users/", component: Users, children: [ { path: "", component: UserStart }, { path: ":id", component: UserDetail }, { path: ":id/edit", component: UserEdit } ] }, {path: "*", redirect: "/"} // handle all uncovered routes ]<template> <router-view></router-view> </template><!-- user.vue --> <template> <div id="user"> <h1></h1> <div></div> </div> </template> <script> export default { data: function () { return { id: this.$route.params.id, user: {} } }, created(){ this.$http.get("http://url/user/" + this.id).then(function(res){ this.user = res.body; }); } } </script><ul class="nav"> <router-link to="/" tag="li" active-class="active" exact><a>Home</a></router-link> <router-link to="/users" tag="li" active-class="active" ><a>Users</a></router-link> </ul><router-link v-bind:to='"/user/" + user.id' tag="li" v-for="(user, index) in users"> {{ user.username }}</router-link>this.$router.push({ path: "/home"});watch: { "$route": function (to, form){ this.id = to.params.id } } watch: { picked: { handler(val, oldVal) { console.log('changed: ', oldVal); console.log('new: ', val); }, deep: true, immediate: true } }To not let someone access e.g. /dashboard if the user is not logged in.
// add requiresAuth to certain components export const routes = [ { path: "", component: Login }, { path: "/dashboard", component: Dashboard, meta: {requiresAuth: true} } ];// configure vue-router // important: do not turn on history mode const router = new VueRouter({ routes, // mode: "history" }) router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requiresAuth)) { if ( CHECK_FOR_USER_IN_LOCALSTORAGE_ETC ) { // handle restricted access next({ path: '/login', }); } else { next(); } } else { // do nothing with components without meta: {requiresAuth: true} next(); } })<!--input field for search query--> <input type="text" v-model="searchQuery" placeholder="Search..."> <!--loop like this, instead of classic for user in users--> <tr v-for="user in filterUsers">// users array and search query variable data: function () { return { searchQuery: "", users: [] }; }, ... // computed method for filtering users by // email, last name and first name computed: { filterUsers () { return this.users.filter(user => { return (user.email.toLowerCase().indexOf(this.searchQuery.toLowerCase()) > -1 || user.lastName.toLowerCase().indexOf(this.searchQuery.toLowerCase()) > -1 || user.firstName.toLowerCase().indexOf(this.searchQuery.toLowerCase()) > -1) }) } }// add needed variables data: function () { return { ascending: false, sortColumn: '', users: [], }; }, methods: { // sort method "sortTable": function sortTable ( col ) { if ( this.sortColumn === col ) { this.ascending = !this.ascending; } else { this.ascending = true; this.sortColumn = col; } let ascending = this.ascending; this.users.sort(function ( a, b ) { if ( a[col] >= b[col] ) { return ascending ? 1 : -1 } else if ( a[col] < b[col] ) { return ascending ? -1 : 1 } return 0; }) } }<!--call sortTable method on column with corresponding property in users object--> <tr> <th @click="sortTable('email')">Username</th> <th @click="sortTable('firstName')">First Name</th> <th @click="sortTable('lastName')">Last Name</th> <th @click="sortTable('address')">Address</th> <th>Phone number</th> </tr> searchVideos() { let filtered = this.videos; // search by keyword if (this.filters.searchQuery) { filtered = this.videos.filter( v => v.title.toLowerCase().indexOf(this.filters.searchQuery) > -1 ); } // filter by date range if (this.filters.startDate && this.filters.endDate) { filtered = filtered.filter(v => { var time = new Date(v.created_at).getTime(); return (new Date(this.filters.startDate).getTime() < time && time < new Date(this.filters.endDate).getTime()); }); } // filter by property value if (this.filters.filterVal) { if (this.filters.filterVal === 'female') { filtered = filtered.filter( v => v.gender === this.filters.filterVal ); } // sort by property if (this.filters.sortValue === 'most_popular') { filtered.sort(function(a, b) { return a.views - b.views; }); } } return filtered; }An async function returns a promise. When you want to call this function you prepend await, and the calling code will stop until the promise is resolved or rejected.
// example const doSomethingAsync = () => { return new Promise((resolve) => { setTimeout(() => resolve('I did something'), 3000) }) } const doSomething = async () => { console.log(await doSomethingAsync()) console.log('I did something again!') } doSomething() // result: // I did something! // I did something again!// example import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { data: null }, mutations: { setData: (state, payload) => { state.resource = payload } }, actions: { async getData({ commit }) { let res = null try { res = await fetch( 'https://api.coindesk.com/v1/bpi/currentprice.json' ) } catch (err) { console.log('err: ', err) return } // Handle success console.log('waiting for data...'); const data = await res.json() console.log('data: ', data) commit('setData', data) } } })// config.js // example config file var apiPort = 5566; var currHost = window.location.protocol + '//' + window.location.hostname + ':' + apiPort + '/api/v1'; var url = window.location.host !== 'localhost:8080' ? 'http://PROD-URL/' : currHost; export var cfg = { version: "0.1.0", api: { endpoint: url } };// main.js import * as config from './config' window._cfg = config.cfgmounted() { this.$refs.myInput.focus(); }- v-once - render the element and component only once
- v-if - conditionally render the element
- Difference between computed and methods
- watch - specify what property to listen for changes and then execute some code without returning values
- v-model modifiers
- .lazy - fire event when user lefts the field
- .number - force the value to be converted to a integer
- .trim - delete whitespace