Vue 정리

알파카파카·2025년 1월 17일
JavaScriptvue정리

내가 보기 위해 만든 Vue 기본 문법 정리

Vue 버전 : Vue3
사용 언어 : Javascript
IDE : VSCode
페이지 뷰어 : Live Server

Vue 기본 포멧

이 툴을 기본으로 가지고 간다.

// Vue 처음 기본 포멧
// app.js

const app = Vue.createApp({
    data() {},  // 이 곳에 변수를 넣는다 생각하자
    methods: {}	// 이 곳에 스크립트를 작성한다.
})

vue 적용

vue는 따로 설치하지 않아도 패키지 스크립트를 불러와도 사용이 가능하다.

<script src="https://unpkg.com/vue@3" defer></script>

를 사용하면 된다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@3" defer></script>
</head>
<body>
  <section id="app_vue">
    <h2>vue를 배웁니다</h2>
  </section>
</body>
</html>

HTML 연결

  1. HTML 과 app.js 는 어떻게 연결을 할까?
<!-- index.html -->
<!-- HTML 에서는 일단 id값을 선언, app.js 파일에서 id 값으로 연결 -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <section id="app_vue">	<!-- id 값을 정하고 -->
    <h2>vue를 배웁니다</h2>
  </section>
</body>
</html>
// app.js
// .js 파일에서는 mount() 메소드로 연결

const app = Vue.createApp({
    data() {},
    methods: {}
})

app.mount('#app_vue')	// 여기서 마운트 해줍니다.
  1. 변수 가져오기
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Basics</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@3" defer></script>
    <script src="app.js" defer></script>
  </head>
  <body>
    <header>
      <h1>Vue Course Goals</h1>
    </header>
    <section id="app_vue">
      <h2>event</h2>
      <p>counter : {{ counter }}</p>
    </section>
  </body>
</html>
// app.js

const app = Vue.createApp({
    // data: function() {}  # 메소드 속기법, 이렇게 작성할 수도 있다.
    data() {    // 항상 객체를 반환해야 한다.
        return {
            counter : 0,
        };
    },
    methods: {}
})

app.mount('#app_vue')

HTML 출력

HTML 페이지에서 js 파일의 값을 출력하고 싶으면 가장 기본적인 형태는

<span>결과: {{ counter }}</span>

이렇게 이중 중괄호를 사용하는 방법을 텍스트 보간법 이라고 한다.

템플릿 문법 ( 속성 )

스크립트를 작성하기 전에 먼저 Vue 가 HTML 페이지에서 인식하는 문법을 알아야 한다.

  1. v-bind | 동적으로 값을 속성에 바인딩
  2. v-on | 이벤트 리스너 등록
  3. v-if, v-else-if, v-else | 조건부 렌더링, 우리가 아는 그 if 문
  4. v-for | 리스트 렌더링, 우리가 아는 그 for 문
  5. v-model | 양방향 렌더링, input으로 사용자의 입력 데이터를 동적으로 받아올때 사용

1) 템플릿 문법 ( 속성 바인딩 )

1. v-bind

// v-bind:~ 는 :~와 같다.
<img v-bind:src="path/to/img">
<img :src="path/to/img">	// 같은 기능을 한다.

2. v-on

click 과 같은 이벤트 리스너 종류

// v-on:~ 은 @~ 와 같다.
<button v-on:click="method_function_name">add_num</button>
<button @click="reduce_counter">Reduce</button>	// 같은 기능을 한다.

3. v-if, v-else-if, v-else

<p v-if="counter > 0"> ~ </p>
<p v-else-if="counter < 0"> ~ </p>
<p v-else> ~ </p>
<!-- 참고로 v-if와 v-else-if와 v-else 사이에 다른 태그가 오면 작동을 안 한다. -->

4. v-for

<li v-for="(item, index) in items":key="index">
{{ item.name }} - {{ item.price }} </li>

5. v-model

<input v-model="textValue" type="text">
<p>입력 값 : {{ textValue }} </p>

Vue.createApp 구조

const app = Vue.createApp({

  data() {	// 변수를 정의하는 구간
    return {  
    	number: 0,
        name : '',
        fullname : '',
    };
  },
  
  methods: { // 스크립트 작성
    plus_counter() {    },
    reduce_counter() {	  },
    reset() {    }
  },
  
  watch: {  // 값이 변경될 때마다 호출 ( 감시 )
  	name(value) { 	// data 메소드에 있는 name의 값이 변경될 때 마다 호출됨 ( name 감시 ) 
    	this.fullname = value + ' ' + "( hotman )"	// value는 자동으로 들어오는 name의 변경된 값
    }
  },
  
  template: ` // 템플릿 설정
  	<input v-on:click="number" />
    <p>{{ number }}</p>
  `,	
  
  computed: {	// methods의 계산적인 버전
  	
  }
});

computed: {} 는 methods와 같이 안에 script 메소드 들을 넣는 프로퍼티인데, Vue 엔진이 methods 다음으로 확인하는 아이다.

methods와 뭐가 다르냐면
methods 안에 있는 메소드들은 다른 메소드가 호출된다 하더라도 안에 있는 모든 메소드가 렌더링 되고,
computed는 [ 변경 / 호출 ]된 메소드 하나만 렌더링이 된다.

모든 메소드들을 methods 안에 넣으면 조금만 있으면 괜찮겠지만 수많은 메소드들이 있다면 모두 호출되어 자원이 그만큼 낭비되기 때문에 적절히 사용할 수 있어야 하겠다.

라우팅

(+ 이벤트 리스너)

  1. 마우스 관련 이벤트
이벤트명설명
click마우스를 클릭했을 때 ( 보통 왼쪽 버튼 )
dbclick마우스를 더블 클릭했을 때
mousedown마우스 버튼을 누르는 순간
mouseup마우스 버튼에서 손을 떼는 순간
mousemove마우스가 움직일 때
mouseover마우스가 요소 위로 올라왔을 때
mouseout마우스가 요소에서 벗어났을 때 ( 버블링 )
mouseenter마우스가 요소 위로 올라왔을 때 ( 버블링 X )
mouseleave마우스가 요소에서 벗어났을 때 ( 버블링 X )
contextmenu우클릭 메뉴가 열릴 때 ( 일반적으로 마우스 오른쪽 버튼 클릭 시 )
wheel마우스 휠 ( 스크롤 ) 이벤트
  1. 키보드 관련 이벤트
    ( Vue.js에서는 v-on:keydown.enter="..." 과 같은 키 수식어를 사용하여 특정 키를 쉽게 구분 가능 )
이벤트명설명
keydown키를 누르는 순간
keypress키를 누르고 있을 때 연속해서 발생
keyup키에서 손을 뗄 때
  1. 입력 관련 이벤트
이벤트명설명
input<input>, <textarea> 등의 값이 변경될 때 ( 실시간 )
change<input type="checkbox">, <select> 등에서 값이 최종 변경된 시점 ( 포커스가 벗어나거나 체크 토글 등 )
submit<form>에서 제출되는 시점
focus요소에 포커스가 들어올 때
blur요소에서 포커스가 벗어날 때
  1. 포커스 관련 이벤트
이벤트명설명
focus요소에 포커스가 들어올 때 ( 버블링 X )
blur요소에서 포커스가 벗어날 때 ( 버블링 X )
focusin자식 요소로 포커스가 이동되는 과정에서 발생 ( 버블링 )
focusout자식 요소에서 포커스가 빠져나가는 과정에서 발생 ( 버블링 )
  1. 드래그 & 드롭 관련 이벤트
이벤트명설명
dragstart드래그를 시작할 때
drag드래그 중 계속 발생
dragend드래그가 끝날 때 ( 놓을 때 )
dragenter드래그 대상이 드롭 영역에 진입했을 때
dragover드래그 대상이 드롭 영역 위에서 움직일 때 ( 드롭 허용 시 event.preventDefault() 필요 )
dragleave드래그 대상이 드롭 영역 밖으로 벗어났을 때
drop드롭 영역에 드래그하던 객체를 놓았을 때
  1. 클립보드 관련 이벤트
이벤트명설명
copy복사( Ctrl + C ) 작업이 발생할 때
cut잘라내기( Ctrl + X ) 작업이 발생할 때
paste붙여넣기( Ctrl + V ) 작업이 발생할 때
  1. 미디어 관련 이벤트
이벤트명설명
play재생을 시작할 때
pause일시 정지할 때
ended재생이 끝났을 때
volumechange볼륨이 변경될 때
  1. 애니메이션 / 트랜지션 관련 이벤트
이벤트명설명
animationstartCSS 애니메이션이 시작될 때
animationiterationCSS 애니메이션이 한 사이클을 마칠 때
animationendCSS 애니메이션이 끝날 때
transitionendCSS 트랜지션이 끝날 때
  1. 기타 이벤트
이벤트명설명
resize창 크기가 변경될 때
scroll스크롤 이동이 발생할 때
load페이지나 리소스가 완전히 로드되었을 때
unload페이지를 벗어날 때
error리소스 로드가 실패했을 때

(++ Vue 애니메이션)

숫자가 쫘라락 올라감

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue Study</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@3" defer></script>
    <script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
    <script src="app.js" defer></script>
  </head>
  <body>
    <header>
      <h1>Hi Hello</h1>
    </header>
    
    <section id="app_vue" />
  </body>
</html>
// app.js
const app = Vue.createApp({
  data() {
    return {
      number: 0,
      tweened: 0,
    }
  },
  watch: {  // 값이 변경될 때마다 호출됨
    number(n) { // 'number' 가 변경될 때마다 호출
      gsap.to(this, { duration: 2, tweened: Number(n) || 0 })	// duration: 2 -> 2초 동안 값을 변경
    }
  },
  template: `
    Type a number: <input v-model.number="number" />
    <p>{{ tweened.toFixed(0) }}</p>
    `
})

app.mount("#app_vue")
profile
알파카파카
타닥,,, 타다닥,,,,,,,
이전 포스트

크롤링하기

다음 포스트

인공지능 기초 & 용어 정리

0개의 댓글