Vue.js Basic No.1

in #vuejs6 years ago (edited)

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 = <tag id="Hello"></tag>
            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.

Sort:  

I was studying Vue.js this summer and making quite a bit of progress. I really liked it.

I may be getting back into Javasript and Vue soon.