Vue

Date: 2018-10-19
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/

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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>
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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);
}
}
});
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); } } });
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);
    }
  }
});
15050cookie-checkVue
0 of 2000 max characters.