Vue 3 Training

Questions

1. What is in the MEVN stack?
2. What is the npm command to create a VueJS app?
3. What are the 3 parts of a Vue component, summarising what each section does?
4. Where do you declare attributes of a component which are passed to it?
5. What is the easiest way to define an on-click action?
6. WHat kinds of modifiers can be added to events (such as on-click)?
7. How can you trigger actions in other components?

My Notes

Vue is front-end Javascript framework to create web apps - especially SPA (single page apps). It is part of the MEVN stack (MEVN stands for MongoDB, Express.js, VueJS, Node.js).

Think of the app as a set of components.

Components can have state/ data. VueX should be used for complicated state data.

How to install

Multiple options:

• npm create vue@latest - then answer questions
• import JS from CDN

\<script src="https://unpkg.com/vue@3/dist/vue.global.js">\</script>
\<script src="app.js">\</script>

There was another option, but Vue CLI is in Maintenance Mode!

• vue create {proj-name} - using VueJS CLI

HTML

The HTML file index.html just contains an empty div with id=“app” and basic HTML boiler plate.

Most of the HTML is contained in the javascript files which define the components.

Simplest Version

Import Vue from CDN. app.js just contains:

const app = Vue.createApp({
    template: '\<h1>Hello World!\</h1>',
})

app.mount('#app)

Simple Version

Import Vue from CDN. app.js defines data() to provide initial values and methods to attach to buttons etc. Enables VUE actions on a page.

const app = Vue.createApp({
    data() {
    return {
        firstName: 'John',
        lastName: 'Doe',
        email: 'jd@email.com',
        picture: 'https://1.gravatar.com/avatar/3a8de74fe4b3d0a42ec8e171d00fab8f92d087bb3b7029ccef7db326104b0df9?size=256',
        }
    },
    methods: {
        getUser() {
            this.firstName = 'Bob'
            this.lastName = 'Bee'
            this.email = 'bb@email.com'
        },
    },
})

app.mount('#app')

Using VUE Router

Normally you would install router during creating the project. If this step was missed, then

1. run command npm install vue-router@latest.
2. create folders in src called views and router
3. blah blah

Answers

1. MEVN stands for MongoDB, Express.js, VueJS, Node.js
2. npm create vue@latest
3. A Vue component contains:

• Template - HTML using moustache to embed values
• Script - exports the name, components used, props and methods, defining any additional methods.
• Style - <style> tag which can contain scoped attr

4. Inside the script section, export props, preferable as an object, where the key is the property name and the value is the type, e.g.

\<script>
export default {
    name: 'ButtonComponent',
    props: {
        text: String,
    },
}
\</script>

5. \<button @click="onClick()" >{{text}}\</button> then add onClick() to methods: in the export aprt of the script.
6. Mouse click modifiers can either specify which mouse button is pressed and/ or if a modifier key is pressed, e.g. @click.middle="blah()" and @click.ctrl="blah()"
7. Use @click="$emit('event-name', element.id)" to send an event up a level.