잡다한 지식의 블로그

Vue.js의 Data-Binding 본문

Vue.js

Vue.js의 Data-Binding

아이스올리 2024. 4. 8. 18:00

Vue.js의 Data-Binding

  • 단방향 바인딩(One-way Binding) - 컴포넌트의 데이터가 변경되면 UI요소 내용 변경
  • 양방향 바인딩(Two-way Binding) - 폼테이터와 폼 양식 간의 바인딩
  • 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법.
  • 기본적인 데이터 바인딩 방식은 콧수혐 괄호방식. ex) {{   }}

Vue.js에서 Data-Binding 예

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Data-Binding</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" value="hello">
        <br>
        <input type="text" :value="inputData">
        <br>
        <a :href="link">티스토리</a>
        <br>
        <a :href="getLinkaddres('tistory.com/')">티스토리</a>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                inputData: 'hello',
                link: 'https://miscellaneousknowledge.tistory.com/',
                link2: 'https://miscellaneousknowledge.'
            },
            methods: {
                getLinkaddres(addres) {
                    return this.link2 + addres;
                },          
            }
        })
    </script>
</body>
</html>

Vue.js에서 Data-Binding의 예
instance.zip
0.00MB

'Vue.js' 카테고리의 다른 글

Vue.js Computed 속성  (0) 2024.04.11
Vue.js 이벤트핸들링 - v-on  (0) 2024.04.08
Vue.js Data와 Method  (0) 2024.04.05
Vue.js 인스턴스  (0) 2024.04.04
Vue.js 개념정리  (0) 2024.04.03
공유하기 링크
'Vue.js' Related Articles more
Comments