{"id":2273,"date":"2019-06-25T07:51:24","date_gmt":"2019-06-25T06:51:24","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=2273"},"modified":"2019-06-25T08:18:18","modified_gmt":"2019-06-25T07:18:18","slug":"html-templating-with-vue","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/html-templating-with-vue\/","title":{"rendered":"HTML Templating with Vue"},"content":{"rendered":"\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!doctype html>\n&lt;html lang=\"en\">\n&lt;head>\n  &lt;meta charset=\"utf-8\">\n  &lt;title>$title&lt;\/title>\n  &lt;meta name=\"description\" content=\"$description\">\n  &lt;meta name=\"author\" content=\"$author\">\n  &lt;meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no\" \/>\n  &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/unpkg.com\/bootstrap@4.3.1\/dist\/css\/bootstrap.min.css\">\n  &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/unpkg.com\/font-awesome\/css\/font-awesome.min.css\">\n  &lt;script src=\"https:\/\/unpkg.com\/jquery\">&lt;\/script>\n  &lt;script src=\"https:\/\/unpkg.com\/bootstrap\">&lt;\/script>\n  &lt;script src=\"https:\/\/unpkg.com\/vue\">&lt;\/script>\n&lt;\/head>\n&lt;body>\n\n&lt;div id=\"app\">\n    &lt;ul>\n        &lt;!-- Loop no elements: &lt;template v-for=\"item in items\">&lt;\/template> -->\n        &lt;li v-for=\"item, index in items\" :key=\"item.id\">\n            {{ index }} &lt;img :src=\"item.img\" :class=\"{ active: item.disabled }\" \/> {{ item.name }} {{ item.id }}\n            &lt;button class=\"btn btn-primary\" :disabled=\"item.disabled\" @click=\"orderItem(item)\">Order&lt;\/button>\n            &lt;button-counter :article=\"item\">&lt;\/button-counter>\n            &lt;custom-input v-model=\"item.name\">&lt;\/custom-input>\n        &lt;\/li>\n    &lt;\/ul>\n&lt;\/div>\n\n&lt;script>\n\/\/ v-for= v-bind:attr v-on:attr v-model=\nVue.component('button-counter', {\n    props: ['article'],\n  data: () => {\n    return { count: 0 }\n  },\n  template: '&lt;button v-on:click=\"count++\">You clicked {{article.name}} {{ count }} times.&lt;\/button>'\n});\nVue.component('custom-input', {\n  props: ['value'],\n  template: `&lt;input v-bind:value=\"value\" v-on:input=\"$emit('input', $event.target.value)\">`\n});\n\nnew 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    { id: 212, name: 'Hello B Vue.js!', img: \"https:\/\/picsum.photos\/id\/1\/200\/120\", disabled: true },\n    { id: 213, name: 'Hello C Vue.js!', img: \"https:\/\/picsum.photos\/id\/2\/200\/120\" },\n    ]\n  },\n  methods: {\n      orderItem: (item) => {\n        alert(\"Ordering \" + item.name);\n    }\n  }\n});\n\n&lt;\/script>\n&lt;\/body>\n&lt;\/html>\n<\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2273","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/2273","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=2273"}],"version-history":[{"count":4,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/2273\/revisions"}],"predecessor-version":[{"id":2277,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/2273\/revisions\/2277"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=2273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=2273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=2273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}