Learning Vuejs As A Self-taught React Developer

January 09, 2021

When I’m writing this article, I built 4 React website with Gatsbyjs or Nextjs.

I don’t want to mess up my google analytics data. Hence, I not sharing the websites in this article. Maybe next time I build a clone site and share it with you.

What do I know before I learn Vue?

Basic HTML & CSS (Not expert yet)
Basic JavaScript (Forever in beginner level)
ES6 or later syntax (I can write JavaScript a little bit easier)
NPM (Not sure how I learned it)
Beginner level of React knowledge

I learned Vue2 before. It’s just after I completed HTML, CSS and JavaScript challenges in FreeCodeCamp, Treehouse and some Udemy courses.

Angular, React or Vue, these are the three popular to libraries or frameworks to I’ve to pick for my coding path.

After researching and listening to some reviewers, coders, programmers said that Vue is the easiest framework to learn. As a newbie, there is no reason I don’t pick it.

However, I can’t even build a production website with Vue. Maybe is the Vue way of writing code confused me during that time. I gave up after spending two months times.

Today, when I revisit Vue, it already Vue3. Oh, ~ times flies ~~~

Try Vuejs with CDN

Create a project folder name “learn-vue” in Desktop
Right-click and choose “Open with VS Code”
Create index.html in the root directory
Type ”!” and press “tab” to expand the HTML boilerplate
Go to Vue3 official website https://v3.vuejs.org/
Click “Get Started”
Click “installation”
Scroll down to CDN
Found the script and import it before the “closing body tag”

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Learn Vuejs From Scratch</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <script src="https://unpkg.com/vue@next"></script>
  </body>
</html>

Open the index.html with the live server by Ritwick Dey in VS Code extension
The Live server will automatically open the default browser. It’s open Chrome in my PC
Press F12 to open the console
Type “Vue” and press enter
A giant Vue API returns in the console, I successfully import the Vue CDN into the project.
Well done to me 😁 I don’t know how to do all these two years ago. I think I improve a little big. (LOL) lame!

Create a Vue App and mount it to an element

Wrap the h1 tag with a div tag with an id - app
Create a script element below the Vue script.
Create a Vue app and assign it to the app variable
Mount to the id - app

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Learn Vuejs From Scratch</title>
  </head>
  <body>
    <div id="app">
      <h1>Hello World</h1>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
      const app = Vue.createApp()
      app.mount("#app")
    </script>
  </body>
</html>

JavaScript runs from top to bottom. I think it’s not going to work if I add the Vue Create App above the Vue Script. I not sure, maybe you can try and let me know on Twitter? (I not so active in social media but I’ll see it one day. 😉

Rendering data to the DOM using Vue data function

Follow doc example, create a Vue data function (I’m wondering why arrow function is not working. I suspect maybe arrow function is scoped. Do you know the answer? Please tell me in Twitter.)
It’s straight forward and declarative. I created a data function return string, number, array. Boolean.
Does it work with an object? I’ll test them later.
I can just destructure (I not sure how should I call it) with double curly braces and use it in HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Learn Vuejs From Scratch</title>
  </head>
  <body>
    <div id="app">
      <h1>Hello {{framework}}</h1>
      <p>I tried {{framework}}, {{years}} years ago</p>
      <nav>
        <!-- {routes.map?} -->
      </nav>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            framework: "Vuejs",
            years: 2,
            routes: [Home, About, Product, Contact],
          }
        },
      })
      app.mount("#app")
    </script>
  </body>
</html>

What are the different compare to React?

I don’t need to export the data or constant. I don’t need to pass the data or parameter to the element or component. I think the data save somewhere in the background in Vue. I can render the data in HTML with double curly braces.

The data function is something like props in React, or maybe it’s useState Hook? I am not sure at this moment. I mention the Hook is because I watched and saw people change the data value on YouTube. Or It’s a state? Or both props and state combine?

Let’s tidy up

It’s not a good practice to write JavaScript in HTML.

Stop the live server
Create app.js in the root directory
Move the object code in Vue create app script into app.js
Link the app.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Learn Vuejs From Scratch</title>
  </head>
  <body>
    <div id="app">
      <h1>Hello {{framework}}</h1>
      <p>I tried {{framework}}, {{years}} years ago</p>
      <nav>
        <!-- {Routes.map?} -->
      </nav>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="app.js"></script>
  </body>
</html>

// app.js
const app = Vue.createApp({
  data() {
    return {
      framework: "Vuejs",
      years: 2,
      // Routes: [Home, About, Product, Contact],
    }
  },
})
app.mount("#app")

Open the live server
You shall see the same thing as before.

Follow Vue convention to tidy up further

Move the object code inside “Vue Create App” and assign to App variable
Pass App variable to “Vue Create App”
The browser will still render the same thing

// app.js
const App = {
  data() {
    return {
      framework: "Vuejs",
      years: 2,
      Routes: [Home, About, Product, Contact],
    }
  },
}
Vue.createApp(App).mount("#app")

.css-25cxt7{margin-left:-20px;padding-right:4px;color:var(--theme-ui-colors-primary,#663399);}What do I know before I learn Vue?