할머니의 콤퓨타 도전기

[Vue.js] Vue 컴포넌트 (Component) 본문

Web Front-end/Vue.js

[Vue.js] Vue 컴포넌트 (Component)

ji.o.n.e 2020. 10. 28. 16:53
  • 컴포넌트 (Component)
    • 기본 html 요소를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움 됨.
    • 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트
    • Vue 컴포넌트는 Vue 인스턴스. 따라서 모든 옵션 객체 사용 가능
  • 지역 등록
    • 모든 컴포넌트를 전역 등록을 하면 설사 어떤 컴포넌트를 더 이상 사용하지 않더라도 최종 빌드에는 들어가 있음
    • 즉 사용자가 내려받아야하는 자바스크립트의 양이 불필요하게 커짐
    • 지역 등록이 가능한 것은 웬만하면 지역 등록하는게 좋음
  • kr.vuejs.org/v2/guide/components.html#컴포넌트가-무엇인가요
 

컴포넌트 — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

  • 코드 구현 (전역 등록)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Study</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app1">
        {{name}}<br>
        <button @click="changeText">update</button>
        <hr>
        <!-- component 태그 처럼 사용 -->
        <jione-button></jione-button>
    </div>
    <script>
        // component 전역 등록
        Vue.component('jione-button', {
            // ``로 묶기
            template: `
            <div>
                {{name}}<br>
                <button @click="changeText">update</button>
            </div>`
            ,
            // data: --> data()
            data() {
                return {
                    name: 'jione',
                }
            },
            methods: {
                changeText() {
                    this.name = 'jione updated'
                }
            }
        });

        const app1 = new Vue({
            el: '#app1',
            data: {
                name: 'jione',
            },
            methods: {
                changeText(){
                    this.name = 'jione updated';
                }
            }
        })

    </script>
</body>

</html>

 

  • 실행 화면

  • 코드 구현 (지역 등록)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Study</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="app1">
        <jione-button></jione-button>
    </div>
    <hr>
    <script>
       const HelloWorld = {
            template: `
            <div>hello world</div>`
       };
       const JioneButton = {
           components: {
                'hello-world': HelloWorld,
           },
           template: `
           <div>
                {{name}}<br>
                <hello-world></hello-world>
                <button @click="changeText">update</button>
           </div>`,
           data() {
                return {
                    name : 'jione',
                }
           },
           methods: {
               changeText() {
                   this.name = 'jione updated';
               }
           }
       };

       const app1 = new Vue({
           el: '#app1',
           components: {
               'jione-button': JioneButton
           }
       })
    </script>
</body>

</html>

 

  • 실행 화면

 

저작자표시

'Web Front-end > Vue.js' 카테고리의 다른 글

[Vue.js] 자식 컴포넌트에 데이터 보내기 (Props)  (0) 2020.10.29
[Vue.js] 싱글 파일 컴포넌트 (Single File Component)  (0) 2020.10.29
[Vue.js] 여러개의 Vue 인스턴스 사용하기  (0) 2020.10.28
[Vue.js] v-for 리스트 렌더링  (0) 2020.10.28
[Vue.js] v-if 와 v-show  (0) 2020.10.28
'Web Front-end/Vue.js' Related Articles more
Comments