음악, 삶, 개발

Vue.js 의 기본 문법 둘러보기 본문

개발 Web/Vue.js 공부방

Vue.js 의 기본 문법 둘러보기

Lee_____ 2020. 11. 21. 23:14

추후 우리는 수많은 .vue 파일들을 만들어나가게되겠지만,

그전에 가장 부모인 App.vue 안에서 이런 저런 코드를 작성해나가서,

Vue.js 에서 사용하는 Syntax 들이 어떤것들이 있는지 확인해보자.


< 공식 문서>

 

Vue.js API Reference


< .vue 안에 template, script, style >

<!-- App.vue -->

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

.vue 파일안에서 우리가 작성할 코드는,

template, script, style 이라는 테그마다 역할을 달리한다.

template 은 우리가 만들어낼 HTML 코드,

script 는 JavaScript, 

style 은 CSS 이다.

이렇게 한 파일안에 이 3가지를 다 담을수있는것이 Vue.js 를 사용하는 이유이다.

각 테그마다, vue.js 가 제공하는 고유의 문법을 지켜 코드를 작성해야하는데,

깊이 들어가기전에 간단히 무엇이 존재하는지 나열해보겠다.


 

< template >

v-text

v-html

v-show

v-if

v-else

v-else-if

v-for

v-on

v-bind

v-model

v-shot

v-pre

v-cloak

v-once

v-is


< script  >


< Composition API >