⭐️ 이 페이지만 보면 vue의 기본 문법을 사용할 수 있도록 작성하고자 하였다!!
vue 시작
vue를 왜 쓸까?
vue.js 는 JavaScript 프레임워크 이다.
즉, JavaScript 를 더 효율적인 방식으로 작성하여 이용하고자 만들어진 js 작성툴 같은 것이다.
vue 로 작업을 하면 js 로 바꿔서 웹에서 구동시킨다.
javascript는?
우선적으로 js 는 동작하게 하는 코드이다.
html의 요소들을 동작 시킨다.
작게는 span 안의 글자 부터 img의 크기 그리고 크게는 section 혹은 main의 요소전체를 움직인다.
움직이는 방법은??
dom에 있는 여러가지 property 들을 바꿔 줌으로써 움직인다.
위치, 크기 등등..
바닐라 js 는?
html을 로드하고 html 안에 요소를 특정하여 dom을 통해 작동시킨다.
vue 는?
html을 로드 할때는 root 요소만 로드시키고
모든 요소들을 js가 root 요소 안에 그려준다.
가상돔
.vue 문서에 작성하면 js 로 변환하고 js로 가상돔을 그린다.
가상돔은 돔객체로만 이루어져 있다.
가상돔은 실제돔을 그린다.
가상돔은 js 엔진 내부에만 존재한다.
이후 변경된 사항은 가상돔에 반영되고 가상돔을 실제돔과 비교하여 바뀐 사항만 실제돔에 그려준다.
설치
vue.js
cdn 방식이나 npm 설치 방식 중 선택하여 사용한다.
실제 vue 를 통한 개발은 npm 설치방식으로 한다.
cdn
- cdn
<script src="https://cdn.jsdelivr.net/npm/vue"></script>npm 설치
우선 node가 설치되어있어야한다.
- cli 설치
$ npm i -g @vue/cli
$ vue create
이후 선택창에서 default를 선택하여 생성하게 되면 표시된 대로 babel과 eslint가 설치된다.
Manually select features를 선택하게 되면 vuex, vue-router 등과 같은 몇 가지 더 선택적으로 설치할 수 있다.
📌 node 17 버전은 오류가 발생한다. 16버전을 추천.
준비 완료.
기본 문법
cdn 과 npm 설치 후 사용법 차이
Vue 생성자 함수 안에 인자로 객체를 넣는다.
객체에는 el, data, computed 등의 property를 넣어 사용한다.
<body>
<div id="app">
{{ message }}
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: '안녕하세요 Vue!'
}
})
</script>
</body>export default {
name: "App",
data() {
return {
age: 19,
};
},
methods: {
sumAge() {
this.age++;
},
},
computed: {
broAge() {
return `제 동생의 나이는 ${this.age - 5}살 입니다.`;
},
},
};component 구성으로 이루어져있다.
export 해서 root 요소에 뿌려준다.
뿌려주는 코드는 js 파일에 따로 있다.
이후 cli 로 구성된 vue 프로젝트를 기준으로 한다.
data
<template>
<div id="app">
<input type="text" v-model="age" />
<p>제 나이는 {{ age }}살 입니다.</p>
<p>{{ broAge }}</p>
<button v-on:click="sumAge">나이증가</button>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
age: 19,
};
},
methods: {
sumAge() {
this.age++;
},
},
computed: {
broAge() {
return `제 동생의 나이는 ${this.age - 5}살 입니다.`;
},
},
};
</script>