[Vue] Vue 기초 문법

문지은·2023년 5월 16일

vue

Vue

목록 보기

1/15

Vue 2 를 기준으로 작성되었습니다.

Vue의 기본 구조

Vue 구조는 매우 직관적

<template>
  <!-- HTML -->
  <div>
    <p>Hello :)</p>
  </div>
</template>

<script>
  // JavaScript
</script>

<style>
  /* CSS */
  p {
    color: black;
  }
</style>

Vue 없이 코드 작성하기

입력 받은 값을 name 뒤에 출력하기
- 기존에 가지고 있었던 text도 신경 써야 함 (data를 관리하기 위한 추가 작업 필요)

<body>
  <div id="app">
    <p id="name">name : </p>
    <input id="inputName" type="text">
  </div>

  <script>
		// 1. input tag 선택
    const input = document.querySelector('#inputName')

		// 2. p tag 선택
		const name = document.querySelector('#name')

		// 3. addEventListener 추가
    input.addEventListener('input', function(evnet){
      name.innerText = name.innerText + event.target.value
    })
  </script>
    
</body>

Vue CDN

Vue로 작업을 시작하기 위하여 CDN을 가져와야 함
Django == Python Web Framework
- pip install
Vue === JS Front-end Framework
- Bootstrap에서 사용하였던 CDN 방식 제공
공식문서에서 CDN 가져오기
- Installation — Vue.js

Vue로 코드 작성하기

입력 받은 값을 name 뒤에 출력

Vue CDN 가져오기
Vue instance 생성
- Vue instance - 1개의 Object
- 미리 정해진 속성명을 가진 Object
el, data 설정
- data에 관리할 속성 정의
선언적 렌더링 {{}}
- Vue data를 화면에 렌더링

<body>
  <div id="app">
    <p id="name">name : {{ message }}</p>
    <input id="inputName" type="text" v-model="message">
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    // CODE HERE
    const app = new Vue({
      el: '#app',
      data: {
        message: '',
      }
    })
  </script>
</body>

Vue devtools에서 data 변경 → DOM 반영

input tag에 v-model 작성
- input에 값 입력 → Vue data 반영
- Vue data → DOM 반영

MVVM Pattern

소프트웨어 아키텍처 패턴의 일종
마크업 언어로 구현하는 그래픽 사용자 인터페이스(view)의 개발을 Back-end(model)로부터 분리시켜 view가 어느 특정한 모델 플랫폼에 종속되지 않도록 함

View - 우리 눈에 보이는 부분 = DOM
Model - 실제 데이터 = JSON
View Model (Vue)
- Vue를 위한 Model
- View와 연결(binding)되어 Action을 주고 받음
- Model이 변경되면 View Model도 변경되고 바인딩된 View도 변경됨
- View에서 사용자가 데이터를 변경하면 View Model의 데이터가 변경되고 바인딩된 다른 View도 변경됨

MVVM Pattern 정리

MVC 패턴에서 Controller를 제외하고 View Model을 넣은 패턴
View는 Model을 모르고, Model도 View를 모른다. == DOM은 Data를 모른다, Data도 DOM을 모른다. (독립성 증가, 적은 의존성)
View에서 데이터를 변경하면 View Model의 데이터가 변경되고, 연관된 다른 View도 함께 변경된다.

View instance

Vue CDN 가져오기
new 연산자를 사용한 생성자 함수 호출
- vue instance 생성
인스턴스 출력 및 확인
- Vue instance === 1개의 객체
- 아주 많은 속성과 메서드를 이미 가지고 있고, 이러한 기능들을 사용하는 것

<!-- Vue CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const vm = new Vue()
  console.log(vm)
</script>

`el` (element)

Vue instance와 DOM을 mount(연결)하는 옵션
- View와 Model을 연결하는 역할
- HTML id 혹은 class와 마운트 가능
Vue instance와 연결되지 않은 DOM 외부는 Vue 영향을 받지 않음
- Vue 속성 및 메서드 사용 불가

실습 1

새로운 Vue instance 생성
생성자 함수 첫번째 인자로 Object 연결
el 옵션에 #app 작성 = DOM 연결
인스턴스 출력

const app = new Vue({
	el: '#app'
})
console.log(app)

실습 2

Vue와 연결되지 않은 div 생성
- 두 div 모두에 {{ message }} 작성
- 결과 확인
message 속성이 정의되지 않았다는 경고와 {{ message }}가 그대로 출력되는 차이

<div id="app">
  <p>{{ message }}</p>  // 경고 출력
</div>
<div>
  <p>{{ message }}</p>  // 그대로 출력
</div>

<script>
  const app = new Vue({
    el: '#app',
  })
  console.log(app)
</script>

data

Vue instance의 데이터 객체 혹은 인스턴스 속성
데이터 객체는 반드시 기본 객체 { } (Object) 여야 함
객체 내부의 아이템들은 value로 모든 타입의 객체를 가질 수 있음
정의된 속성은 interpolation {{ }}을 통해 view에 렌더링 가능함

실습

Vue instance에 data 객체 추가
data 객체에 message 값 추가
결과 확인
추가된 객체의 각 값들은 this.message 형태로 접근 가능

<div id="app">
  <p>{{ message }}</p>
</div>
<!-- Vue CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hellow, Vue !',
    },
  })
  console.log(app)
</script>

methods

Vue instance의 method들을 정의하는 곳

실습 1

methods 객체 정의
- 객체 내 print method 정의
- print method 실행 시 Vue instance의 data 내 message 출력

<div id="app">
  <p>{{ message }}</p>
</div>
<!-- Vue CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hellow, Vue !',
    },
    methods: {
      print: function() {
        console.log(this.message)
      },
    }
  })
</script>

콘솔창에서 app.print() 실행

실습 2

method를 호출하여 data 변경 가능
- 객체 내 bye method 정의
- print method 실행 시 Vue instance의 data 내 message 변경

<div id="app">
  <p>{{ message }}</p>
</div>
<!-- Vue CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hellow, Vue !',
    },
    methods: {
      print: function() {
        console.log(this.message)
      },
      bye: function () {
        this.message = 'Bye, Vue !'
      }
    }
  })
</script>

콘솔창에서 app.bye() 실행
- DOM에 바로 변경된 결과 반영
- Vue의 강력한 반응성(reactivity)

[주의] methods with Arrow Function

메서드를 정의할 때 Arrow Function을 사용하면 안됨
Arrow Function의 this는 함수가 선언될 때 상위 스코프를 가리킴
즉 this가 상위 객체 window를 가리킴
호출은 문제 없이 가능하나 this로 Vue의 data를 변경하지 못함

📍 전체 코드 확인하기

https://github.com/mjieun0956/TIL/tree/master/Vue/01.%20Vue%20%EA%B8%B0%EC%B4%88%20%EB%AC%B8%EB%B2%95

문지은

코드로 꿈을 펼치는 개발자의 이야기, 노력과 열정이 가득한 곳 🌈

다음 포스트

[Vue] Vue 기초 문법

Vue

Vue의 기본 구조

Vue 없이 코드 작성하기

Vue CDN

Vue로 코드 작성하기

MVVM Pattern

MVVM Pattern 정리

View instance

`el` (element)

실습 1

실습 2

data

실습

methods

실습 1

실습 2

[주의] methods with Arrow Function

📍 전체 코드 확인하기

[Vue] Directives

0개의 댓글

[Vue] Vue 기초 문법

Vue

Vue의 기본 구조

Vue 없이 코드 작성하기

Vue CDN

Vue로 코드 작성하기

MVVM Pattern

MVVM Pattern 정리

View instance

el (element)

실습 1

실습 2

data

실습

methods

실습 1

실습 2

[주의] methods with Arrow Function

📍 전체 코드 확인하기

[Vue] Directives

0개의 댓글

`el` (element)