This post is from a low-reputation account and contains an unverified outbound link. Be cautious before clicking external links.

Vue.js Basic No.1

Words
170
Reading
1 min
Listen
Play
9y


What is Vue.js?

Vue.js  

The Progressive JavaScript Framework

Advantages

Easy to learn, An incrementally adoptable ecosystem, 20KB min+gzip Runtime,  perfectly capable of powering sophisticated Single-Page

Let's learn Vue.js!

Before that, You need to get ready.

if you are new to web programming, you should study HTML and Javascript first.

you might be need node.js, https://nodejs.org/ko/

if you get ready, let's start!

you just need  

<script src="https://unpkg.com/vue"></script>

open your editer, type this code

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Hello Vue.js!</title>
    <script src="https://unpkg.com/vue"></script>    Vue file
</head>

<body>
    <div id="Hello">
        <h1>{{ message }}</h1>    Message part
    </div>

    <script type="text/javascript">
        let model = {
            message: 'Hello Vue.js!'  Data Model : 'Hello Vue.js!'
        }

        let Hello = new Vue({
            el: '#Hello',    el : html Element       #Hello =
            data: model,  data : model = 'Hello Vue.js!'
        });
    </script>
</body>

</html>

There is data in new Vue, and Vue Deliver message to div.

---- Vue( Data ) ---- Deliver  ----<div id="Hello">{{ message }}</div>----

this is end, next time, I will teach you vue components.

Vue.js Basic No.1 | Ecency