Getting Started with VueJS
By: Nick West, 韋羲
Tags: Tutorial, JavaScript, Web App Development, Vuejs, Vue

Our JavaScript code targets the <div> with an id of "app" and renders our application there. This is also a targeting method used by ReactJS SPAs, and uses the same HTML tag ID targeting common in plain JS and JQuery.

— src/

Our /src directory is where the magic happens — this is where we write our VueJS code and where we put the assets used in our VueJS code.

— src/main.js

src/main.js is where our root Vue instance is declared and configured:

On line 1 above, import Vue from 'vue’ imports Vue from the 'vue' npm package, which is located in our node_modules/ folder.

Note: This is how we import our Node packages using ES6 JS Syntax. When our code runs in the Node runtime environment, the compiler knows to look in node_modules for modules imported without a directory location (e.g., ./ , @/ , ../ , etc)

On line 2, we import a Vue component named App from ./App.vue . This is our root Vue component, hence the .vue extension.

On lines 6-8, we declare our Vue application. Within our new Vue({}) object, we currently only render our app — within this object, we can also insert vue-router Router configuration, vuex Store modules, vue-apollo Apollo Client modules, and more!

On line 8, we mount our component to #app — this is where we declare <div id="app"> in our public/index.html as the rendering target of our VueJS app.

— src/app.vue

src/app.vue contains our root Vue component. Like all Vue components, this component is comprised of three sections contained in tags:

The <template>...</template> tag that contains our component’s HTML The <script>...</script> tag that contains our component’s JavaScript and our component’s Vue instance information (within export default{} ) The optional <style>...</style> tags that contain our component-specific CSS.

Within our <script> tags, we import the HelloWorld Vue component from ./components/HelloWorld.vue , and we configure our Vue instance object, within our export default {} object:

export default {

name: 'app',

components: {

HelloWorld

}

}

We have to declare our imported HelloWorld component in the components: {} object of this component’s Vue instance, otherwise trying to put it inside its HTML <template></template> tags would throw an error and cause our app to fail.

Within the <style></style> tags here, we have CSS styles that will be applied to this component and any child component of this component, such as the HelloWorld component.

— src/components/

Our src/components/ folder is where we put Vue components that may be used across one or many of our web app’s views, or pages.

— src/components/HelloWorld.vue

The HelloWorld component lives in the components directory, and contains the aforementioned <template> , <script> , and <style> tags that define the component’s HTML, JavaScript, and CSS, respectively.

Props

On Line 3 of HelloWorld.vue, you’ll notice curly brace template syntax containing the component’s msg property key.

In VueJS, curly braces are used for interpolation of values from the component’s data() object, props, and other properties of our Vue instance.

The msg property key here is a prop, a value that can be passed into <HelloWorld /> from a parent component containing it. This prop is declared on Line 37 of HelloWorld.vue, in our component’s props object:

export default {

name: 'HelloWorld',

props: {

msg: String

}

}

In this case, HelloWorld’s props comprises a typed object; we can see that msg is supposed to be a String, not an Object, Integer, or Function.

An alternative way to declare component props is in a dynamic (typeless) array:

export default {

name: 'HelloWorld',

props: ['msg']

}

In our generated app, a string is passed through the msg="” prop of the <HelloWorld /> component on Line 4 of src/App.vue:

<HelloWorld msg="Welcome to Your Vue.js App"/>

Now, let’s change this string to a reactive data property!

Reactive Vue Data Properties

Right now, our App.vue component declaration consists of:

export default {

name: 'app',

components: {

HelloWorld

}

}

At the moment, the component in App.vue has a name and imported component declarations.

Let’s add data(){} to this component below our components:{} declaration:

When our Vue app runs, it adds all of the properties found in this data object to Vue’s reactivity system, meaning that when properties of this data object change, Vue reacts to and digests the changes.

As you can see, the data object is declared as a function, data() , that returns an object {}.

Within the object above, we are returning a message property key with the string value of ‘Hello World!’ .

Let’s pass this data property through our <HelloWorld /> component as a prop!

Passing Component Data as Props

Right now, <HelloWorld /> is accepting a string value through msg="" . We want to pass our component’s message property through msg sort of like a variable.

If we try msg="message" , our component will render a “message” string, not our variable.

In order to pass a property of our parent component through this child component, let’s a data-binding colon (:) to the prop of that component declaration:

<HelloWorld :msg="message" />

Note: :msg is shorthand for v-bind:msg , which binds the msg prop to our component’s data. We can also run certain JavaScript inside properties and attributes with the : , such as ternary statements and functions.

App.vue should now look like this:

If we run our app, we should see:

Great! Now, let’s make our message interactive with v-model 😎

Manipulating Component Data with v-model

Add a text <input/> tag on Line 5 of App.vue under <HelloWorld /> :

<HelloWorld :msg="message" />

<input type="text" />

Now, in order to edit our message data property with this text input, add v-model="message" to it:

<input type="text" v-model="message" />

Our <template> section should now look like this:

Let’s run our app again and edit the text in our text input to see this reactive data in action:

Nice!

Methods

To complete our introduction to VueJS, let’s add a method that does something with the value of our text input field.

A component’s methods are added to the methods: {} object of a Vue component, which is registered to our Vue component similarly to how we register data(){} and components:{} .

Let’s add methods:{} to App.vue:

Now, let’s add a function called alertMessage() to our methods that creates an alert containing message :

Notice that when we access the message data property from the same component’s methods , we add this.: this.message , not message .

In JavaScript, this. refers to the object that the function, method, or class belongs to.

Side note: The only instances in which this. does not refer to the owner, global, or referred object is when it is called in a function in strict mode (where it is undefined), or within an event, in which case this. refers to the element that receives said event.

Now, we have our alertMessage() function above — but no way to call it!

Calling Methods with Click Events

Let’s add a button to App.vue that calls our alertMessage method on-click on the line under our <input /> :

Just as :msg="message" is shorthand for v-bind:msg="message" , @click="alertMessage" is shorthand for v-on:click="alertMessage" .

Our <template> should now look like this:

Let’s run our app and see it in action:

Great!

You can imagine that in a typical web app, we could have an onSubmit function within our component methods that could POST form contents to a backend or filter an array of data.

Epilogue

In this article, we established our Node/vue-cli development environment, took a look at standard Vue web app directory structure, explored parent / child component relationships, and learned about props, data(), v-model, methods, and click events.

A repo containing the code of the hello-world project created in this article is available here on GitHub.

If you’re interested in continuing to explore VueJS, check out:

Thank you for reading! And remember…

Tips Are Appreciated! 💰 😉

My Bitcoin address: 1QJuBzHpis4jqQXnSuYxKzGS4Yu3GHhNtX

My Ethereum address: 0x1a141CCd68B6fD365054f07eaC4758C0a239D1ef