홍준혁

Vue.js-데이터 바인딩 본문

Vue.js

Vue.js-데이터 바인딩

홍준혁 [Hong-JunHyeok] 2020. 9. 13. 01:14
728x90

시작하기 전에

 

Vue를 이해하기 정말좋은 사이트를 발견했다. 

joshua1988.github.io/web-development/translation/why-43percent-devs-wanna-learn-vuejs/

 

왜 43%의 프론트엔드 개발자들은 Vue.js를 배우고 싶어하나?

(번역) 2017년에 가장 배우고 싶은 라이브러리 Vue.js 소개 글. 학습 자료와 링크가 첨부되어 있습니다.

joshua1988.github.io

 

 

이번에는 데이터 바인딩이라는것을 배울건데 데이터바인딩은 데이터를 연결해준다 라는 의미로 해석하면 편할것이다.

먼저 데이터바인딩 예제를 보면서 배워보도록 하자. 

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input
                v-bind:type="input.type"
                v-bind:placeholder="input.placeholde"
            />
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    input: {
                        placeholder: "수만 입력해주세요",
                        type: "number",
                    },
                },
            });
        </script>
    </body>
</html>

 

위의 코드는 HTML코드에 데이터를 바인딩해주는 코드이다. 

v-bind:는 Vue와 "연결하겠다"라는 것을 알려주는 코드이고 따옴표 안에는 Vue객체안에 값을 넣어주면 된다.

 

그래서 결과는?

이렇게 예상대로 잘 나오는 모습을 볼 수 있다. 

이러한 방식으로 링크도 바인딩시켜줄 수 있다.

 

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <a v-bind:href="link">네이버 바로가기</a>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    link: "https://www.naver.com",
                },
            });
        </script>
    </body>
</html>

 

이렇게 Vue는 정말 편리하게 사용할 수 있다.

링크 바로가기를 좀 더 유동적으로 표현할려면 메서드를 사용하면 되는데,

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <a v-bind:href="getChannel('kossiecoder')">유튜브 바로가기</a>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    link: "https://www.youtube.com/",
                },
                methods: {
                    getChannel(channel) {
                        return this.link + channel;
                    },
                },
            });
        </script>
    </body>
</html>

 

이런식으로 문자열 연산을 사용하여 코지 코더님의 유튜브 채널에 이동해보았다.

여기서 함수의 인자값을 자신이 가고싶은곳으로 전달해준다면 유동적으로 이동할 수 있을것이다.

 

다음시간에 할것은 이벤트를 한번 배워볼겁니다.

728x90

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

Vue.js-watch속성  (1) 2020.09.14
Vue.js-computed  (1) 2020.09.14
Vue.js-폼 입력 바인딩  (1) 2020.09.14
Vue.js-이벤트  (0) 2020.09.14
Vue.js-톺아보기  (2) 2020.09.11
'Vue.js' Related Articles more
Comments