A bird’s eye Vue: how to get started with Vue.js

Photo by Sam Bark on Unsplash
  • the application object
  • member methods and properties
  • and the actual view (this is where your HTML elements are).

Vue’s v-based HTML attributes

Boolean switches

Looping

let E = new Vue({
el : ‘#L’, // link to the id = "L" element
data : {
items : [
{ message : ‘One’ },
{ message : ‘Two’ },
{ message : ‘Three’ } ]}
});
<ul id = ”L">
<li v-for = ”item in items”>{{ item.message }}</li>
</ul>
<ul id = ”L">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

Building Applications

// Correct (notice the leading : before href attribute)
<a :href = "url" :title = "urltitle">{{url}}<a>
// Error (URl will not launch)
<a href = "url" :title = "urltitle">{{url}}</a>

Application Data

const sourceOfTruth = {}

const application = new Vue({ data: sourceOfTruth });

Vue Application object

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store