Vue.js Basic No.1

in #vuejs7 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.

Congratulations @console.log, you have decided to take the next big step with your first post! The Steem Network Team wishes you a great time among this awesome community.


Thumbs up for Steem Network´s strategy

The proven road to boost your personal success in this amazing Steem Network

Do you already know that @originalworks will get great profits by following these simple steps, that have been worked out by experts?

Coin Marketplace

STEEM 0.22
TRX 0.21
JST 0.035
BTC 98736.02
ETH 3346.70
USDT 1.00
SBD 3.12