{"id":99,"date":"2018-08-25T10:35:07","date_gmt":"2018-08-25T10:35:07","guid":{"rendered":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/?p=99"},"modified":"2018-08-25T10:35:07","modified_gmt":"2018-08-25T10:35:07","slug":"simplest-way-to-create-a-vue-instance","status":"publish","type":"post","link":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/simplest-way-to-create-a-vue-instance\/","title":{"rendered":"Simplest Way to Create a Vue Instance"},"content":{"rendered":"\n

A step by step guide to the simplest Vue.js app with no fluff.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Current cdn used:<\/p>\n\n\n\n

<script src=”https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js”><\/script><\/p><\/blockquote>\n\n\n\n

Other places to get the cdn, https:\/\/cdnjs.com\/libraries\/vue<\/p>\n\n\n\n

Create app.js containing a data element with the label of “title”<\/p>\n\n\n\n

\"vue<\/figure>\n\n\n\n

“new Vue” creates the Vue instance<\/p>\n\n\n\n

“el” creates the Vue element, which is labeled “app”, this is referred to in the HTML page to create the view instance with the element of “app”.<\/p>\n\n\n\n

“data:” creates a property which will store the data the Vue instance will use.<\/p>\n\n\n\n

“title:” this is the property which contains the string, ‘Hello World’. This property gets called in the HTML using the double curly braces, {{}}.<\/p>\n\n\n\n

The HTML page of “Hello World”<\/strong><\/p>\n\n\n\n

\"Vue<\/figure>\n\n\n\n

The Vue library is called with the cdn<\/p>\n\n\n\n

<script src=”https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js”><\/script><\/p><\/blockquote>\n\n\n\n

The Vue code we created is added by:<\/p>\n\n\n\n

<\/blockquote>\n\n\n\n

The specific Vue element is called and a Vue instance created by<\/p>\n\n\n\n

<div id”app”><\/p><\/blockquote>\n\n\n\n

Everything between the <div id”app><\/div> is within the Vue instance.<\/p>\n\n\n\n

Anything that is outside the specific Vue instance will be treated as HTML, Note: multiple Vue instances can be run on one webpage, although not quite sure what the benefit is.<\/p>\n\n\n\n

What we see in the browser.<\/strong><\/p>\n\n\n\n

\"simple-vue-app\"<\/figure>\n\n\n\n

We see the variable which has the property of “title”, in the browser it becomes a HTML element.<\/p>\n\n\n\n

Code for this app:<\/p>\n\n\n\n

app.js<\/p>

<\/p>

new Vue({el: ‘#app’,data: {title: ‘Hello World’}})<\/p><\/blockquote>\n\n\n\n

index.html<\/p>

<\/p>

<!DOCTYPE html><head><title>Document<\/title><script src=”https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js”><\/script><\/head><body><h1>Simple Vue App<\/h1><div id=”app”><h2>{{ title }}<\/h2><\/div><script src=”app.js”><\/script><\/body><\/html><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

A step by step guide to the simplest Vue.js app with no fluff. Current cdn used: <script src=”https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js”><\/script> Other places to get the cdn, https:\/\/cdnjs.com\/libraries\/vue Create app.js containing a data element with the label of “title” “new Vue” creates the Vue instance “el” creates the Vue element, which is labeled “app”, this is referred to … Continue reading Simplest Way to Create a Vue Instance<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/wp-json\/wp\/v2\/posts\/99"}],"collection":[{"href":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/wp-json\/wp\/v2\/comments?post=99"}],"version-history":[{"count":11,"href":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/wp-json\/wp\/v2\/posts\/99\/revisions"}],"predecessor-version":[{"id":115,"href":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/wp-json\/wp\/v2\/posts\/99\/revisions\/115"}],"wp:attachment":[{"href":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/wp-json\/wp\/v2\/media?parent=99"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/wp-json\/wp\/v2\/categories?post=99"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyndonantcliff.com\/learning-to-code\/wp-json\/wp\/v2\/tags?post=99"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}