7. binding attributes

first

반응성이란 data의 값 변경이 발생시 즉시 페이지에 반영되는 것을 뜻한다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<div id="app" v-cloak>
    <p>{{  fullName() }}</p>
    <p><a :href="href" target="_blank">Google</a></p>
    <hr />

    <label>First Name</label>
    <input type="text" v-model="firstName">

    <label>Last Name</label>
    <input type="text" v-model="lastName">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.6/vue.global.prod.min.js"></script>
<script src="app.js"></script>
</body>
</html>

app.js

const vm = Vue.createApp({
    data() {
        return {
            firstName: 'John',
            lastName: 'Doe',
            href: 'https://google.com',
        }
    },
    methods: {
        fullName() {
            return `${this.firstName} ${this.lastName.toUpperCase()}`
        }
    }
}).mount('#app');

main.css

[v-cloak] {
    display: none;
}

# 7. binding attributes

# first

7. binding attributes

first