I built an SPA in an hour, and this is what I learned (Part 2).

In part one, Vue was introduced and we set up and created a simple app. If you haven't read that, start there.

Step 2. Collect and organise data

For the webapp, I collected names, roles, and social-media profile links and organised them in JSON. Drop the JSON file inside src/assets.

Step 3. Import JSON to component

Hello.vue is a Vue component file inside src/components. Components are one of Vue's most powerful features; they extend basic HTML elements to encapsulate reusable code.

In Hello.vue, import the JSON. Set the component name inside default{}, and put the imported JSON inside data(){}.

Step 4. Write the template

Vue uses an HTML-based template syntax that lets you declaratively bind the rendered DOM to the underlying instance's data.

Directives

Directives are special attributes prefixed with v-. Example: <p v-if="seen">Now you see me</p>

Data binding

• Text: the most basic form, using mustache syntax: {{ msg }}
• Raw HTML: use the v-html directive
• Attributes: use v-bind: <div v-bind:id="dynamicId"></div>
• Expressions: Vue supports full JavaScript expressions inside bindings: {{ 1 + 2 }} renders as 3

Looping through arrays

Use v-for to loop array elements: <li v-for="mem in members">

Rendering data

Access object properties through the loop variable to render profile images, names, roles, and social links, using directives like :src for attributes.

Step 5. Add styles and build

Add CSS styles. Run the development server with npm run dev, build for production with npm run build.

Go build something with Vue.js. Happy coding.