Vue 사용법 / 문법 / 옵션 / 디렉티브

Vue.js 적용 방법

👆CDN 방식으로 Vue 시작하기

- 개발용

// 최신버전 불러오기
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

// 특정버전 불러오기
<script src="https://cdn.jsdelivr.net/npm/vue@2.3.0"></script>

- 상용

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

✌️Webpack 방식으로 Vue 시작하기

npm으로 cli를 설치해 vue 라이브러리를 불러오는 방식이다.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

🔎 npm(Node Package Manager)
node.js에서 사용하는 모듈들을 패키지로 만들어 npm을 통해서 관리하고 배포한다. 직접 개발한 모듈이나 다른 사용자들이 미리 만들어놓은 모듈을 간편하게 다운받아 사용할 수 있다.

🔎 Node.js
네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼으로 자바스크립트를 활용하고 내장 http 서버 라이브러리를 가지고 있어 웹 서버에서 별도 소프트웨어 없이 동작 가능하다.
Chrome의 V8엔진을 이용하여 자바스크립트로 서버를 구축하고 서버에서 자바스크립트가 작동되도록 해주는 런타임 환경이다.

Vue 기본 형식

- Vue 인스턴스 생성하기

new Vue({
    el: "#app",
    data: {
        text: 'hello world'
    },
})

vue로 화면을 개발하기 위해서는 기본 단위인 인스턴스를 생성해야 한다.
new Vue 라는 생성자를 호출해 인스턴스를 생성한다.
생성자의 속성에는 아래 예제의 el, data 외에도 template, methods 등의 옵션이 있다.
인스턴스의 유효범위는 el 속성에 의해 정해진다.
인스턴스 객체를 생성하고, 특정 element에 인스턴스를 연결하고, 인스턴스의 속성이 element에 적용되어 화면에 노출된다.

- Vue 인스턴스 옵션 속성

new Vue({
  // instance option properties
  template: "",
  data: "",
  el: "",          # 여러 개의 요소에 지정 불가, 동적 el 연결 가능(권장 X)
  methods: {},
  computed: {},
  watch: {}        # 데이터 변경에 대한 응답, 비동기 또는 시간이 많이 소요되는 작업에 사용
  // ...
});

인스턴스 생성 시 자주 사용하는 옵션 목록이다.

옵션	설명	예제
el	html DOM 요소와 Vue 인스턴스 연결 #: id 지정, .: 클래스 지정	el: '#app'
data	Vue가 바라보는 data 객체 지정	data: {name: '김감자'}
computed	data 객체 등을 사용하여 계산된 값을 리턴하는 함수를 정의 캐싱을 시켜놓고 동일한 요청에는 값만 리턴
methods	data 객체 등을 사용하여 계산된 값을 리턴하는 함수를 정의 캐싱이 되지 않고 호출될 때마다 계속 함수 실행
watch	지정된 변수를 계속 지켜보다가 값이 변경되었을 때 정의된 함수 실행
filter	텍스트 형식화를 위해 표현식 마지막에 파이프 심볼(\|)과 함께 사용

Vue 데이터 표시

- 콧수염 문법 {{프로퍼티명}}

이중 중괄호 {{ }} 를 사용하여 뷰 인스턴스에 관리하는 data, computed, props 속성을 화면에 표시할 수 있다.

표시할 데이터 변수명을 이중 중괄호 안에 적거나 JS 표현식도 사용할 수 있다. ex) {{프로퍼티명.replace('a', 'b')}}

<div>{{ str }}</div>
<div>{{ number + 1 }}</div>
<div>{{ message.split('').reverse().join('') }}</div>

Vue 인스턴스를 생성하고 데이터를 표시하는 전체 형태이다.

<!DOCTYPE html>
<html>
  <head><title>Vue.js Sample</title></head>
  <body>
    <div id="app">
      {{ message }} #Hello Vue.js!
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> # cdn
    <script>
      new Vue({
        el: "#app",
        data: {
          message: "Hello Vue.js!"
        }
      });
    </script>
  </body>
</html>

- 디렉티브

Vue에서 html 요소에 대해 실행하는 명령으로 'v-' 접두사를 붙여서 사용한다.

내부적으로 콧수염 문법이 v-text로 컴파일되기 때문에 위의 예제와 동일한 결과를 낸다.

<div id="app">
    <p v-text="message"></p>
</div>

✔️ v-text

innerText 와 동일한 기능 수행

태그를 인코딩하여 문자 그대로 보여줌

자주 사용하는 기능이라 {{}} 와 같은 간단한 서식을 추가해준 것

✔️ v-html

innerHtml 과 동일한 기능 수행

태그를 파싱하여 화면에 구현

XSS(Cross Site Scripting) 공격에 주의하여 사용

<body>
    <div id="app">
        <p>{{ myMessage }}</p>
        <p v-text="myMessage"></p>
        <p v-html="myMessage"></p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                myMessage:'<h1>Hello :)</h1>'
            }
        })
    </script>
</body>

{{}}: <h1>Hello :)</h1>
v-text: <h1>Hello :)</h1>
v-html: h1 태그가 파싱되어 화면에 구현됨

✔️ v-show

css의 display와 동일한 기능으로 엘리먼트는 렌더링되어 DOM에 남아있음

✔️ v-if, v-else-if, v-else

if, else if, else 조건문을 구현

조건에 따라 블록을 렌더링, 디렉티브 표현식 값이 true 일 때만 렌더링

✔️ v-for

for 반복문을 구현, 원본 데이터를 기반으로 엘리먼트 또는 템플릿 블록을 여러 번 렌더링

item in items 구문 사용

해당 데이터의 길이가 0이면 그려지지 않아 굳이 v-if를 사용할 필요가 없음

데이터의 길이가 증가하면 기존의 DOM 자체를 파기하지는 않고 전부 렌더링을 다시 하지 않아 성능이 좋은데, 이를 위해서는 유니크한 key를 사용해야 함

v-if 와 함께 사용하지 않는 것이 좋고, 같이 사용할 경우 v-for 우선순위가 높음

- 리스트 목록을 필터링 하기 위해 사용하는 경우

v-for="user in users" v-if="user.isActive" 와 같이 사용하지 말고 필터링된 목록을 새로운 computed 속성으로 정의

- 리스트를 숨기기 위해 사용하는 경우

v-for="user in users" v-if="shouldShowUsers" 와 같이 사용하지 말고 v-if는 컨테이너 엘리먼트로 옮기기

✔️ v-on

엘리먼트에 이벤트 리스너를 연결하여 특정 이벤트가 발생했을 때 코드 실행

이벤트 유형은 전달인자로 표시

v-on:click 은 @click 과 같은 약어로 사용 가능

✔️ v-bind

태그의 속성을 변경할 때 사용, html 요소의 속성에 vue 상태 데이터를 값으로 할당

v-bind:href 는 :href 와 같은 약어로 사용 가능

✔️ v-model

html form 요소 값과 data 를 양방향 바인딩

lazy, number, trim 등의 속성이 있음

- lazy

input 대신 change 이벤트 후에 동기화

- number

문자열을 숫자로 변경

- trim

입력에 대한 공백 제거

✔️ v-pre

컴파일하지 않고 코드가 그대로 보여짐

✔️ v-once

처음 한 번만 렌더링을 수행하고 이후에 데이터가 변경되도 그대로 처음 값을 보여줌

참고자료 및 출처 🙇‍♂️

https://velog.io/@swhan9404/vue%EC%9D%98-%EB%AC%B8%EB%B2%95

https://cjw-awdsd.tistory.com/33

https://uxgjs.tistory.com/112

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

Vue3 Composition API (0)	2022.04.06
Vuex / 상태관리 / Vuex 패턴 및 요소 (0)	2022.04.05
Vue 라우터 / SPA / Router 값 전달 (0)	2022.04.04
Vue 컴포넌트 / 컴포넌트 간 통신 (0)	2022.04.04
Vue.js 기본 개념 / 사용하는 이유 / 가상 돔 (0)	2022.03.17

history dump 🌈

Vue 사용법 / 문법 / 옵션 / 디렉티브

Vue.js 적용 방법

👆CDN 방식으로 Vue 시작하기

✌️Webpack 방식으로 Vue 시작하기

Vue 기본 형식

- Vue 인스턴스 생성하기

- Vue 인스턴스 옵션 속성

Vue 데이터 표시

- 콧수염 문법 {{프로퍼티명}}

- 디렉티브

참고자료 및 출처 🙇‍♂️

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

댓글

티스토리툴바

Vue 사용법 / 문법 / 옵션 / 디렉티브

Vue.js 적용 방법

👆CDN 방식으로 Vue 시작하기

✌️Webpack 방식으로 Vue 시작하기

Vue 기본 형식

- Vue 인스턴스 생성하기

- Vue 인스턴스 옵션 속성

Vue 데이터 표시

- 콧수염 문법 {{프로퍼티명}}

- 디렉티브

참고자료 및 출처 🙇‍♂️

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

관련글

댓글

티스토리툴바