To help improve performance, any route can be lazily-loaded by embracing Vue's async components and webpack's code-splitting feature. Don't worry: I hate confusing jargon, too. Let's break it down and review exactly when and why you might consider lazy loading certain routes in your app.
View the source code for this episode on GitHub.
Article - link
TypeScript is the one of the tools people want to learn most, according to a Stack Overflow Survey of 90,000 developers.
TypeScript has exploded in popularity, community size, and adoption over the past few years. Today, even Facebook's Jest project from Facebook is moving to TypeScript.
Vue.component('list-cats', {
props: ['cats'],
template: `
<ul>
<li v-for="cat in cats">{{ cat.name }}</li>
<ul>
`
});
new Vue({
el: "#root",
component: [
'list-cats'
],
data: {
title: 'some text here',
items: [
'table', 'sink', 'pen'
],
cats: [
{ name: 'Masha' },
{ name: 'Misho' },
{ name: 'Lucky' },
{ name: 'Mussi' },
{ name: 'Kerrigan' }
]
}
})<div class="container">
<br>
<div id="root">
<h3>Input text:[{{ title }}]</h3>
<input v-model="title" />
<hr>
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
<h1>List Cats</h1>
<list-cats :cats="cats"/>
</div>
</div>
<!-- v-model -->
<!-- v-if & v-else-if -->
<!-- v-show -->
<!-- v-bind or only ":" ex. v-bind:disabled="RULE" -->
<!-- v-text or v-html -->
<!-- v-once -->
<!-- LOOPING: v-for="item in items" -->
<!-- v-on or ony "@" ex. v-on:click.prevent -->