Vue.js 란?
Vue.js 는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크이다.
위키백과
React, Angular 와 같이 브라우저 화면을 동적으로 개발하기 쉽도록 도와주는 고마운 프레임워크.
이전부터 배워보고 싶어 이번에 Udemy 강의를 결제, 공부를 진행중!
초기 설정
Quick Start 에서 vue 를 사용하기위한 여러 방법이 있다
난 node.js 로 하는게 아닌 cdn 방식으로 먼저 학습하였다 (using vue from cdn 파트 참조)
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>해당 스크립트 코드를 index.html 에 입력 후 app.js 파일 내에 로직 작성!
기본 작동 방식
vue 를 사용하기 위해선 어떤 영역에서 작업할지를 지정해주어야 하는데 이때 css 선택자를 활용한다.
- index.html
<body>
<section id="assignment">
<!-- 1) Output your name -->
<h2>{{myName}}</h2>
<!-- 2) Output your age -->
<p>{{myAge}}</p>
<!-- 3) Output your age + 5 -->
<p>{{myAge + 5}}</p>
<!-- 4) Output a random number (0 to 1) -->
<p>Favorite Number: {{getRandNum()}}</p>
<div>
<!-- 5) Display some image you found via Google -->
<img v-bind:src="myImg" />
</div>
<!-- 6) Prepopulate the input field with your name via the "value" attribute -->
<input type="text" v-bind:value="myName" readonly />
</section>
</body>- app.js
const app = Vue.createApp({
data() {
return {
myName: "PoRly",
myAge: 25,
myImg:
"https://i.seadn.io/gae/fk0J30zdCm-QszMExaws1o5nftXA0iklsk1x8PFMI1eIMH97s9JGTqpu_tJQoX3D5VRGrL0DNGh27UKs6lmqaK96ydHtk2eSOp3H0Oo?auto=format&dpr=1&w=1000",
};
},
methods: {
getRandNum() {
return Math.random();
},
},
});
app.mount("#assignment");
id 선택자로 section 태그를 선택하게되면 해당 태그의 자식요소들도 모두 vue 가 관리하는 범위에 포함되게 된다.
createApp 메소드로 vue 객체를 생성할 수 있으며, 이때 객체를 인자로 받는다.
객체 내의 프로퍼티로는 함수로 정의되는 data, 여러 함수들을 가지고있는 methods 등이 있다.
data, methods 는 정해진 이름대로만 써야하며, 안에서의 변수명은 자유롭게 작성이 가능하다.
자 그럼 이제 index.html 에 값을 전달해서 출력하려면?
{{ }} 이중 중괄호인 기본 텍스트 보간법을 사용하여 출력할 수 있고,
특정 태그의 속성값을 동적으로 할당하고 싶을 땐 v-bind 와 같이 디렉티브 방식으로도 전달할 수 있다.
이중 중괄호 내에선 간단한 연산은 바로 작성이 가능하고 if 문과 같은 복잡한 연산은 불가하다. 또한 중괄호 내에서 getRandNum( ) 과 같은 함수를 바로 호출할 수도 있다.
이벤트 처리
vue 에선 기본적으로 이벤트를 감지 및 처리하기위해 html 코드에서 v-on 디렉티브를 사용한다.
<section id="events">
<h2>Events in Action</h2>
<button v-on:click="add(5)">Add 5</button>
<button v-on:click.right="reduce(5)">Reduce 5</button> <!-- 우클릭 -->
<p v-once>Starting Counter: {{ counter }}</p>
<p>Result: {{ counter }}</p>
<input type="text" v-on:input="setName" v-on:keyup.enter="confirmName" /> <!-- enter check -->
<p>Your name: {{confirmedName}}</p>
<form v-on:submit.prevent="submitForm"> <!-- == e.preventDefault() -->
<input type="text" />
<button>Sign Up</button>
</form>
</section>@기호로 단축 문법사용이 가능하다.
<button v-on:click="add(5)">Add 5</button>
<button @click="add(5)">Add 5</button>v-on 다음에 수신할 이벤트 종류를 작성할 수 있고 따옴표안에 실행할 로직, 함수를 가리킬 수 있다.
이때 input 태그에 사용자가 작성한 값을 가져올 때는 기본 자바스크립트 문법과 마찬가지로 event 객체의 target.value 를 사용하면 된다.
또한 vue 는 이벤트 수식어를 사용하여 이벤트를 특정 이벤트로 세분화할 수 있는데, 이벤트 종류 뒤에 . (마침표) 구분자로
어떠한 세부 동작을 수행할 지 지정할 수 있다. (기본 브라우저 작동 방지, 우클릭, 엔터키 입력 검사..)
개인적인 느낌?
초반 설정과 간단한 이벤트 동작원리 정도만 알아보았는데, 개인적으론 React 보다 더 재밌는것 같다.
리액트와 유사하게 변경점이 있는 부분만 브라우저에서 리렌더링되므로 성능면에서 많이 쾌적한듯 하다.
다만 아직 초반이라 디렉티브 데이터 바인딩, 각종 이벤트 수식어 등 익숙해져야할 부분이 많다 ㅠㅠ
