Vue 2 Instance

Notice

Recent Posts

Recent Comments

Link

깃허브

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

Tags more

Archives

Today

Total

관리 메뉴

EverGiver

Vue 2 Instance 본문

Front-End (웹)/VueJS

Vue 2 Instance

친절한개발초보자 2022. 2. 21. 00:43

728x90

Instance 생성

Vue 인스턴스는 vue 기반 개발을 하기 위해 필수적으로 생성해야 하는 코드이다.
Vue 인스턴스 생성 후, 내장되어 있는 API를 이용하여 개발할 수 있다.
Vue 인스턴스를 생성할 때는 options 객체를 전달해야 한다.
Vue 앱은 new Vue()를 통해 만들어진 Root Vue Instance로 구성되며, 선택적으로 중첩이 가능하고 재사용 가능한 컴포넌트 트리로 구성된다.
```
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
    const vm = new Vue({
    // options
    });
</script>
```

옵션

el
- Element의 약자로 어떤 HTML 요소에 Vue 객체를 연결할지를 명시한다.
- new를 이용한 instance 생성 때만 사용된다.
- CSS 선택자 문자열 또는 실제 HTMLElement 이어야 한다.

<body>
    <div id="vue">
        <p>{{msg}}</p> 
        <p>{{hello}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script>
        const vm = new Vue({
            el:'#vue'
        });
    </script>
</body>
</html>

data
- Vue 객체에서 사용할 데이터들을 정의한다.
- 대부분 Key : Value 형식으로 객체 형식으로 여러 개를 동시에 명시할 수 있다.
- 컴포넌트에서 사용될 때만 함수를 승인하는데 화살표 함수는 허용하지 않는다.
- Vue 인스턴스가 생성될 때 Vue가 반응하여 새로운 값과 일치하도록 업데이트된다.
- 데이터가 변경되면 화면은 다시 렌더링 된다.
```
<body>
    <div id="vue">
        <p>{{msg}}</p> 
        <p>{{hello}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script>
        const vm = new Vue({
            el:'#vue',
            data:{
                msg:'안녕하세요!!!!',
                hello:'반갑습니다',
            }
        });
    </script>
</body>
</html>
```
template
- 화면에 표시할 요소를 정의한다.
- template를 안 쓰는 경우에는 data의 값을 우선 화면에 표시한다.

methods
- 함수 저장할 수 있는 공간이다.
- 모든 메서드는 자동으로 this를 인자로 받는다.
- 화살표 함수를 메서드를 정의하는 데 사용하면 안 된다.

<section>
    <h2>2022-02-15 과제 : 클릭시 텍스트 변경2</h2>
    <div id="vm2">
        <p>Good {{msg3}}</p>
        <!-- <button onclick="newMsg3()">아침</button>
        <button onclick="newMsg4()">오후</button>
        <button onclick="newMsg5()">저녁</button> -->
        <button v-on:click="newMsg3">아침</button>
        <button v-on:click="newMsg4">오후</button>
        <button v-on:click="newMsg5">저녁</button>
    </div>
</section>

<script>
    const vm2 = new Vue({
        el:'#vm2',
        data:{
            msg3: 'Day',
        },
        methods: {
            newMsg3 : function(){
                this.msg3 = 'Moring';
            },
            newMsg4 : function(){
                this.msg3 = 'Afternoon';
            },
            newMsg5 : function(){
                this.msg3 = 'Evening';
            }
        }
    });
</script>

728x90