npm install -g @vue/cli
vue create hello-world # with router, typescript
cd hello-world
#ensure NODE_ENV=development 
npm run serve

webpack-dev-server

Vue cheatsheet:  https://vuejs-tips.github.io/cheatsheet/

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <h3>Todos</h3>
        <div v-for="todo in todos">
            {{ todo.title }}
        </div>
    </div>
</template>
<script>
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
    public todos: any = [];
@Prop() private msg!: string;

    public constructor() {
        super();
        this.getTodos();
    }

    public async getTodos() {
        const response = await fetch('https://jsonplaceholder.typicode.com/todos');
        const data = await response.json();
        this.todos = data;
        // Vue.set(this, 'todos', data);
    }
}
</script>

https://www.vuemastery.com/pdf/Vue-Essentials-Cheat-Sheet.pdf

https://marozed.ma/vue-cheatsheet/

<script src="https://unpkg.com/vue"></script>

<div id="app">
<ul>
<!-- Loop without elements: <template v-for="item in items"></template> -->

  <li v-for="item, index in items" :key="item.id">
    {{ index }} <img :src="item.img" :class="{ active: item.disabled }" /> {{ item.name }} {{ item.id }}
    <button :disabled="item.disabled" @click="orderItem(item)">Order</button>
  </li>
</ul>
</div>

new Vue({
  el: '#app',
  data: {
    items: [
    { id: 211, name: 'Hello A Vue.js!', img: "https://picsum.photos/id/0/200/120" },
    { 
    	id: 212, 
      name: 'Hello B Vue.js!', 
      img: "https://picsum.photos/id/1/200/120" , 
      disabled: true 
      },
    { id: 213, name: 'Hello C Vue.js!', img: "https://picsum.photos/id/2/200/120" },
    ]
  },
  methods: {
  	orderItem: (item) => {
    	alert("Ordering " + item.name);
    }
  }
});

150500cookie-checkVueno