Installation

CDN

Create a Vue App

Create a file named 'main.js' and add the following code:

const app = Vue.createApp({
    data () {
        return {
            variavel: 'Hello,',
            variavel2: 'World!'
        }
    }
});

Import the file in the HTML:

Now that we created the app, we need to mount it to the HTML:

<script>
    const mountedApp = app.mount('#app')
</script>

And finally, we need to create a div with the id 'app' in the HTML:

<div id="app">
    <p>
        {{ variavel + variavel2 }}
    </p>
</div> 

The result will be:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
</head>
<body>

<div id="app">
    <p>
        {{ variavel + variavel2 }}
    </p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="main.js"></script>
<script>
    const mountedApp = app.mount('#app')
</script>

</body>
</html>

Last modified: 18 janeiro 2024