![](\"https:\/\/img.shields.io\/github\/stars\/vuejs\/vue-router.svg?style=social&label=Star\")
<\/a>vuejs\/vue-router<\/a>: The official router for Vue.js. ![](\"https:\/\/img.shields.io\/github\/stars\/vuejs\/vuex.svg?style=social&label=Star\")
<\/a>vuejs\/vuex<\/a>: Centralized State Management for Vue.js. ![](\"https:\/\/img.shields.io\/github\/stars\/vuejs\/vue-cli.svg?style=social&label=Star\")
<\/a>vuejs\/vue-cli<\/a>: Standard Tooling for Vue.js Development ![](\"https:\/\/img.shields.io\/github\/stars\/vuejs\/vue-devtools.svg?style=social&label=Star\")
<\/a>vuejs\/vue-devtools<\/a>: \u2699 Chrome and Firefox devtools extension for debugging Vue.js applications. ![](\"https:\/\/img.shields.io\/github\/stars\/vuejs\/vetur.svg?style=social&label=Star\")
<\/a>vuejs\/vetur<\/a>: Vue tooling for VS Code.<\/p>\nHello Vue<\/h1>\n
HelloVue.html source<\/a><\/p>\n Interpolations guide<\/a><\/p>\n Prefer Computed Properties guide<\/a><\/p>\n Usage computed property: Attributes guide<\/a><\/p>\n Binding to attribute with Evaluated should return a bindable property or Shorthands: Conditional Rendering guide<\/a><\/p>\n Lists guide<\/a><\/p>\n Like Events guide<\/a><\/p>\n <\/p>\n Components guide<\/a><\/p>\n Slots, like React Slots guide<\/a><\/p>\n Forms guide<\/a><\/p>\n Reuse of Using v-model on Components<\/a><\/p>\n Vue.js has wrapped array functions so that they are reactive: Assigning a new array will reuse DOM elements if possible on the re-render.<\/p>\n It will not detect Assigning a new property to an object is not reactive. Assign it a default value on initialization.<\/p>\n If you must, use:<\/p>\n <\/p>\n I was really surprised by Vue\u2019s simplicity and terse syntax due its many shorthands. Tooling in Visual Studio Code and Chrome is really good. The CLI was pretty amazing at setting up a full blown starter project.<\/p>\n So, I learned me some Vue.js for a technical session and am already set on using it for a few small projects.<\/p>\n Stuff that came into being during the making of this post<\/b><\/p>\n Other interesting reads<\/b><\/p>\n vue-router: v3.0.1 <\/p>\n vuex: v3.0.1 <\/p>\n vue-cli: v3.5.3 <\/p>\n","protected":false},"excerpt":{"rendered":"Html<\/h4>\n
<script src=\"https:\/\/unpkg.com\/vue\"><\/script>\n\n<div id=\"app\">\n <!-- Binding -->\n <h1>{{ product }}<\/h1>\n\n\n <!-- v-bind directive -->\n <img v-bind:src=\"image\" :title=\"imageTitle\">\n <!-- :src, :alt, :title, :class, :style, :disabled -->\n\n\n <!-- Conditionals -->\n <div>\n <!-- Falsy will not include in DOM -->\n <p v-if=\"inventory > 10\">In Stock<\/p>\n <p v-else-if=\"inventory\">Almost sold out<\/p>\n <p v-else>Out of Stock<\/p>\n\n <!-- Render with display: none -->\n <p v-show=\"inventory < 0\">Wuuk?<\/p>\n <\/div>\n\n\n <!-- Events -->\n <!-- v-on directive shorthand is @ -->\n <button\n v-on:click=\"cart++; inventory--\"\n :disabled=\"!inventory\"\n :class=\"inventory ? '' : 'disabledButton'\"\n >\n Add to Cart\n <\/button>\n <div class=\"cart\">{{cart}}<\/div>\n\n\n <!-- Loops -->\n <div v-for=\"variant in variants\"\n :key=\"variant.id\"\n :style=\"{backgroundColor: variant.color}\"\n @mouseover=\"setImage(variant.color, $event)\"\n ><\/div>\n<\/div>\n<\/code><\/pre>\nJavaScript<\/h4>\n
const vm = new Vue({\n el: '#app',\n data: {\n product: 'Socks',\n image: '.\/assets\/socks-green.jpg',\n imageTitle: 'Green Socks',\n variants: [\n {id: 1, color: 'green'},\n {id: 2, color: 'blue'}\n ],\n inventory: 3,\n cart: 0\n },\n methods: {\n addToCart() {\n this.cart++;\n this.inventory--;\n },\n setImage(color, event) {\n console.log('Vue instance with data and methods', this, event);\n this.image = `.\/assets\/socks-${color}.jpg`;\n }\n }\n});\nconsole.log('Modify data directly from the console with `vm.product = \"Shoes\";`');\n<\/code><\/pre>\nTemplates<\/h1>\n
Displaying values:<\/h4>\n
<h1>{{ name.toUpperCase() }}<\/h1>\n<p v-text=\"name\"><\/p>\n<p v-html=\"rawHtml\"><\/p>\n<\/code><\/pre>\nComputed Properties<\/h4>\n
computed<\/code> properties over doing string formatting in the templates directly as they will only be re-evaluated when a relevant dependency changes.<\/p>\n<h1>{{ title }}<\/h1><\/code>:<\/p>\nnew Vue({\n data: {name: 'Vuer'},\n computed: {\n title() {\n return this.name.toUpperCase();\n }\n }\n});\n<\/code><\/pre>\nAttributes<\/h2>\n
v-bind<\/code> directive:<\/p>\n<img v-bind:src=\"val\">\n<img v-bind:[evaluated]=\"val\">\n<img :src=\"val\">\n<\/code><\/pre>\nnull<\/code>.<\/p>\n:src<\/code>, :alt<\/code>, :title<\/code>, :class<\/code>, :style<\/code>, :disabled<\/code><\/p>\n:style<\/h4>\n
:style=\"{fontSize: '13px'}\"\n:style=\"{'font-size': styles.size}\"\n:style=\"styleObject\"\n:style=\"[obj1, obj2]\"\n<\/code><\/pre>\n\n
style<\/code> and Vue :style<\/code> attributes.<\/li>\n<\/ul>\n:class<\/h4>\n
:class=\"'btn' + btn.type\"\n:class=\"[cond ? 'active' : '']\"\n:class=\"{active: cond}\"\n<\/code><\/pre>\nConditions<\/h2>\n
<!-- Falsy values will not render -->\n<p v-if=\"inventory > 10\">In Stock<\/p>\n<p v-else-if=\"inventory\">Almost sold out<\/p>\n<p v-else>Out of Stock<\/p>\n\n<!-- Render a block of multiple elements -->\n<!-- The template tag itself will not be rendered -->\n<template v-if=\"cond\">\n <h1>Title<\/h1>\n <div>...<\/div>\n<\/template>\n\n<!-- Falsy values render with display: none -->\n<!-- Less DOM changes === better performance -->\n<!-- There is no v-else-show and it does not work with templates -->\n<p v-show=\"inventory\">In Stock<\/p>\n<\/code><\/pre>\nv-show<\/code><\/p>\n\n
v-if<\/code><\/p>\n\n
v-once<\/code>: Will never be updated after initial render.<\/p>\nLooping<\/h2>\n
<!-- Render 5 stars -->\n<i v-for=\"i in 5\" class=\"fa fa-star\" :key=\"i\"><\/i>\n\n<!-- Loop through an Array -->\n<li v-for=\"item in ['Gold', 'Silver', 'Bronze']\" :key=\"item\">{{ item }}<\/li>\n<li v-for=\"(item, index) in [1, 2, 3]\" :key=\"item\">{{ index + ' ' + item }}<\/li>\n\n<!-- Loop through an Object -->\n<li v-for=\"(value, key) in {a: 1}\" :key=\"key\">{{ value }}<\/li>\n<li v-for=\"(value, key, index) in {a: 1}\" :key=\"key\">{{ value }}<\/li>\n<\/code><\/pre>\nv-if<\/code> you can use a template to render a block of multiple elements.<\/p>\n:key<\/code> attribute:<\/p>\n\n
v-for<\/code> with a custom component <\/li>\n<\/ul>\nEvents<\/h2>\n
<button v-on:click=\"nr++\"><\/button>\n<form @submit=\"methodName\"><\/form>\n<input @keyup.enter=\"fn(arg1, arg2, ...)\">\n<\/code><\/pre>\nEvent Modifiers<\/h4>\n
\n
@keyup.enter<\/code>: .enter<\/code> is called a Key Modifier<\/a><\/li>\n.mod1.mod2<\/code><\/li>\n@keyup.page-down=\"onPageDown\"<\/code><\/li>\n.prevent<\/code> == event.preventDefault()<\/code><\/li>\n.stop<\/code> == event.stopPropagation()<\/code>: Shorthand ~<\/code>.<\/li>\n.once<\/code>: Unregister after first trigger<\/li>\n.self<\/code>: Trigger only when the element is the .target<\/code><\/li>\n@click.ctrl.exact<\/code>: Only trigger when ctrl is pressed without any other keys<\/li>\n@click.capture<\/code>: An event on an inner element is handled here before the .target<\/code>. Shorthand !<\/code>.<\/li>\n.passive<\/code><\/a>: Corresponds to addEventListener<\/code>\u2019s passive option. Shorthand &<\/code>.<\/li>\n<\/ul>\nComponents<\/h1>\n
Usage<\/h4>\n
\/\/ Html\n\/\/ <product :premium=\"premium\" @add-to-cart=\"updateCart\" class=\"main-prod\"><\/product>\n\n\/\/ JavaScript\nnew Vue({\n data: {\n premium: true,\n cart: [],\n },\n methods: {\n updateCart(product) {\n this.cart.push(product);\n }\n }\n});\n<\/code><\/pre>\nDeclare<\/h4>\n
const comp = Vue.component('product', {\n \/\/ Props with validation\n props: {\n premium: {type: Boolean, required: true, default: false},\n \/\/ Types: String, Number, Array, Object, Function, Promise, any ctor\n \/\/ Null and undefined always pass validation\n \/\/ oneOf: [String, Number],\n \/\/ special: {\n \/\/ default() { return 'calculatedValue'; },\n \/\/ validator(value) { return true; }\n \/\/ }\n },\n \/\/ Props without validation\n \/\/ props: ['premium'],\n template: `\n <!-- Must have single root element -->\n <div class=\"product\">\n <h1>{{ product }}<\/h1>\n <p v-if=\"premium\"><b>FREE Shipping<\/b><\/p>\n\n <button @click=\"addToCart\">\n Add to Cart\n <\/button>\n <\/div>\n `,\n data() {\n \/\/ data is a function inside a Vue.component()\n \/\/ Do return a new object reference each time.\n return {\n product: 'Socks',\n inventory: 3,\n };\n },\n methods: {\n addToCart() {\n this.inventory--;\n this.$emit('add-to-cart', {product: this.product});\n }\n },\n\n \/\/ Local Subcomponent Registration\n \/\/ const LocalComponent = {};\n \/\/ components: {\n \/\/ 'local-component': LocalComponent,\n \/\/ }\n\n \/\/ Watches\n watch: {\n iventory(newInventory, oldInventory) {\n \/\/ TODO: Call backend to check if product is still available\n }\n },\n\n\n \/\/ LifeCycle Methods\n created() {\n console.log('Http requests probably here');\n },\n mounted() {},\n updated() {},\n destroyed() {},\n beforeDestroy() {},\n});\n<\/code><\/pre>\nSlots<\/h2>\n
props.children<\/code> or Angular ng-content<\/code>.<\/p>\nUsage<\/h4>\n
<alert-box>\n <!-- Named Slot -->\n <template v-slot:title>\n <!-- Shorthand #title -->\n Oh noes!\n <\/template>\n\n <!-- Default Slot -->\n Something bad happened.\n <!-- Could put default slot into: v-slot:default -->\n<\/alert-box>\n<\/code><\/pre>\nDeclare<\/h4>\n
Vue.component('alert-box', {\n template: `\n <div>\n <slot name=\"title\">Error!<\/slot>\n <slot>Default value<\/slot>\n <\/div>\n `\n});\n<\/code><\/pre>\nForms<\/h1>\n
Html<\/h4>\n
<form @submit.prevent=\"onSubmit\">\n <input v-model=\"name\" @keydown.ctrl.v.prevent=\"blockPaste\">\n\n <div v-for=\"error in errors\" :key=\"error\">\n * {{ error }}\n <\/div>\n\n <select v-model.number=\"rating\">\n <!-- Other modifiers: -->\n <!-- .lazy => Sync on change event -->\n <!-- .trim => Strip whitespace -->\n <option disabled value=\"\">select<\/option>\n <option v-for=\"i in 5\" :key=\"i\">{{ i }}<\/option>\n <\/select>\n\n <br>\n <input\n type=\"checkbox\"\n v-model=\"acceptTerms\"\n true-value=\"yes\"\n false-value=\"no\"\n >\n Accept terms\n\n <button>Submit<\/button>\n<\/form>\n<\/code><\/pre>\nJavaScript<\/h4>\n
new Vue({\n data: {\n name: null,\n rating: '',\n acceptTerms: false,\n errors: []\n },\n methods: {\n onSubmit() {\n this.errors = [];\n if (!this.rating) {\n this.errors.push('Please select a rating');\n return;\n }\n\n const review = {name: this.name, rating: this.rating};\n console.log('Submitting', review);\n },\n blockPaste() {\n console.log('Control + V is not allowed!');\n }\n },\n});\n<\/code><\/pre>\nValidation not included<\/h4>\n
![](\"https:\/\/img.shields.io\/github\/stars\/vuelidate\/vuelidate.svg?style=social&label=Star\")
<\/a>vuelidate\/vuelidate<\/a>: Simple, lightweight model-based validation for Vue.js ![](\"https:\/\/img.shields.io\/github\/stars\/baianat\/vee-validate.svg?style=social&label=Star\")
<\/a>baianat\/vee-validate<\/a>: Template Based Validation Framework for Vue.js<\/p>\nCaveat<\/h4>\n
<input><\/code> elements could lead to strange behavior.<\/p>\n<template v-if=\"loginType === 'username'\">\n <!-- Using `key` so the inputs are not reused when loginType changes -->\n <input placeholder=\"Enter your username\" key=\"username-input\">\n<\/template>\n\n<template v-else>\n <input placeholder=\"Enter your email address\" key=\"email-input\">\n<\/template>\n<\/code><\/pre>\nCustom Model Binding<\/h2>\n
Vue.component('custom-input', {\n props: ['value'],\n template: `<input :value=\"value\" @input=\"$emit('input', $event.target.value)\">`\n})\n\n\/\/ Html\n\/\/ <custom-input v-model=\"searchText\"><\/custom-input>\n\nnew Vue({\n el: '#app',\n data: {\n searchText: ''\n },\n});\n<\/code><\/pre>\nReactivity<\/h1>\n
Array<\/h4>\n
push<\/code>, pop<\/code>, shift<\/code>, unshift<\/code>, splice<\/code>, sort<\/code>, reverse<\/code><\/p>\nthis.items[0] = 'newVal'<\/code><\/strong>. If you must, use:<\/p>\nVue.set(vm.items, indexOfItem, newValue);\nvm.items.splice(indexOfItem, 1, newValue);\nvm.$set(vm.items, indexOfItem, newValue);\n<\/code><\/pre>\nObjects<\/h4>\n
Vue.set(vm.userProfile, 'age', 27);\nvm.$set(vm.userProfile, 'age', 27);\n<\/code><\/pre>\nClosing Thoughts<\/h1>\n
Extras<\/h1>\n
\n
\n
Package Versions <\/i><\/h1>\n
![](\"https:\/\/img.shields.io\/github\/stars\/vuejs\/vue.svg?style=social&label=Star\")
<\/a>vuejs\/vue<\/a>: v2.6.6 <\/div>\n<\/a>vuejs\/vue<\/a>: Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.<\/p>\nWhy Vue<\/h4>\n
\n
100k+ \u2b50<\/code>: So many people can\u2019t be wrong<\/li>\nvue-router<\/code> and vuex<\/code> (statemanagement)<\/li>\n@vue\/cli<\/code>: Scaffold project with optional support for TypeScript, PWA, CSS Pre-processors, Linters, Tests, \u2026<\/li>\n