{"id":1505,"date":"2018-10-19T10:01:54","date_gmt":"2018-10-19T09:01:54","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=1505"},"modified":"2019-06-24T15:29:34","modified_gmt":"2019-06-24T14:29:34","slug":"vue","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/vue\/","title":{"rendered":"Vue"},"content":{"rendered":"\n
npm install -g @vue\/cli\nvue create hello-world # with router, typescript\ncd hello-world\n#ensure NODE_ENV=development \nnpm run serve<\/pre>\n\n\n\n
webpack-dev-server<\/pre>\n\n\n\n
Vue cheatsheet:  https:\/\/vuejs-tips.github.io\/cheatsheet\/<\/a><\/p>\n\n\n\n
<template>\n    <div class=\"hello\">\n        <h1>{{ msg }}<\/h1>\n        <h3>Todos<\/h3>\n        <div v-for=\"todo in todos\">\n            {{ todo.title }}\n        <\/div>\n    <\/div>\n<\/template>\n<script>\nimport { Component, Prop, Vue } from 'vue-property-decorator';\n\n@Component\nexport default class HelloWorld extends Vue {\n    public todos: any = [];\n@Prop() private msg!: string;\n\n    public constructor() {\n        super();\n        this.getTodos();\n    }\n\n    public async getTodos() {\n        const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/todos');\n        const data = await response.json();\n        this.todos = data;\n        \/\/ Vue.set(this, 'todos', data);\n    }\n}\n<\/script><\/pre>\n\n\n\n
https:\/\/www.vuemastery.com\/pdf\/Vue-Essentials-Cheat-Sheet.pdf<\/a><\/p>\n\n\n\n
https:\/\/marozed.ma\/vue-cheatsheet\/<\/a><\/p>\n\n\n\n
<script src=\"https:\/\/unpkg.com\/vue\"><\/script>\n\n<div id=\"app\">\n<ul>\n<!-- Loop without elements: <template v-for=\"item in items\"><\/template> -->\n\n  <li v-for=\"item, index in items\" :key=\"item.id\">\n    {{ index }} <img :src=\"item.img\" :class=\"{ active: item.disabled }\" \/> {{ item.name }} {{ item.id }}\n    <button :disabled=\"item.disabled\" @click=\"orderItem(item)\">Order<\/button>\n  <\/li>\n<\/ul>\n<\/div><\/pre>\n\n\n\n
new Vue({\n  el: '#app',\n  data: {\n    items: [\n    { id: 211, name: 'Hello A Vue.js!', img: \"https:\/\/picsum.photos\/id\/0\/200\/120\" },\n    { \n    \tid: 212, \n      name: 'Hello B Vue.js!', \n      img: \"https:\/\/picsum.photos\/id\/1\/200\/120\" , \n      disabled: true \n      },\n    { id: 213, name: 'Hello C Vue.js!', img: \"https:\/\/picsum.photos\/id\/2\/200\/120\" },\n    ]\n  },\n  methods: {\n  \torderItem: (item) => {\n    \talert(\"Ordering \" + item.name);\n    }\n  }\n});\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
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 { […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":true,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-1505","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=1505"}],"version-history":[{"count":13,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1505\/revisions"}],"predecessor-version":[{"id":2272,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1505\/revisions\/2272"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=1505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=1505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=1505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}