저번 포스팅에서 Vue 라우터와 엑시오스, 비동기 처리방식들을 알아보았습니다.
오늘은 Vue의 탬플릿문법과 Watch, 최신 Vue CLI에 대해 작성하겠습니다.
이전 포스팅👀
[Vue.js] 알아보기(3) : Vue Router 와 Axios
저번 포스팅에서 Vue 컴포넌트와 컴포넌트간의 통신방법에 대해 살펴보았습니다. 오늘은 Vue라우터와 HTTP 통신라이브러리인 axios, 더 나아가 비동기 처리방식들을 알아보겠습니다. 이전 포스팅���
yeonzzy.tistory.com
💬
프론트앤드 개발자가 되기위해 vue에 처음 입문하게된 초보 개발자입니다. 많은 강의들을 찾아봤지만 Vue.js는 입문자들이 배우기엔 정보가 부족한 것 같아 인프런 '캡틴판교 (장기효)'님의 Vue.js 시작하기를 보며 공부하고 있습니다. 따라서 포스팅 내용이 '캡틴판교 (장기효)'님 강의를 참고하여 작성되어집니다!
1. 뷰 탬플릿 문법
뷰 팸플릿문법은 뷰로 화면을 조작하는 방법, 데이터 바인딩과 디렉티브의 두 가지 방식.
(1) 데이터 바인딩 Data Binding
- 뷰 인스턴스에서 정의한 속성들을 화면에 표시
- 기본적인 데이터 바인딩방식에는 {{ }} Mustache Tag(콧수염 괄호), data computed 등
- 문자열을 메세지로 나타낼 때 메세지를 화면에 해결
(2) 디렉티브 Directive
- 화면의 요소를 더 쉽게 조작하기 위한 문법
- ex) Hello <span v-if="show"> Vue.js</span>
- 일반적인 태그와 함께 v-가 붙는 문자
< 데이터 바인딩 >
<body>
<div id="app">
<p>{{ num }}</p>
<p>{{ doubleNum }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10,
// doubleNum: 10*2
},
computed: {
doubleNum: function () {
return this.num * 2;
}
}
})
</script>
</body>
< 디렉티브 >
<body>
<div id="app">
<!-- v-bind 특정 데이터의 값을 연결하여 관리할 때 사용
uuid로 관리되는 값을 바인딩 - 화면에서 표현되는 값 뿐만아니라 전체적인 DOM에 대한 정보들을 바로 반응하여 변경. reactivity
실제 화면에 표시 <p id="abc1234" class="text-blue">{{ num }}</p> -->
<p v-bind:id="uuid" v-bind:class="name">{{ num }}</p>
<p>{{ doubleNum }}</p>
<!--로딩상태면 true 로딩상태가 아니면 false (메세지출력) if else문-->
<!--login 하기 전 로딩상태-->
<div v-if="loading">
Loading...
</div>
<!--login 완료 후 메세지-->
<div v-else>
test user has been logged in
</div>
<div v-show="loading">
Loading...
</div>
<!-- TODO : 인풋 박스를 만들고 입력된 값을 p태그에 출력해보기 -->
<input type="text" v-model="message">
<p> {{ message }} </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// var input = document.querySelector('input');
// var input = $('input');
new Vue({
el: '#app',
data: {
num: 10,
uuid: 'abc1234',
name: 'text-blue',
loading: true,
message: ''
},
computed: {
doubleNum: function () {
return this.num * 2;
}
}
})
</script>
</body>
**
v-if가 true일 때 : DOM에서 아예 제거
v-show : 유관상으로만 보이지 않게, DOM의 정보는 남아있음(display:none)
<methods 속성과 v-on 디렉티브로 이벤트 주기>
<body>
<div id="app">
<!-- v-on:click="메서드 이름"
버튼을 클릭했을 때 실행할 메서드 -->
<button v-on:click="logText">click me</button>
<button>add</button>
<!-- 키보드 입력이벤트
v-on:keyup.enter 이벤트모디파이어 : 지정한 키가 눌렸을 때 메서드 실행 -->
<input type="text" v-on:keyup.enter="logText">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
logText: function () {
console.log('clicked');
}
}
})
</script>
</body>
2. Vue 공식문서 : vue.org
Vue작성에 도움이 되는 공식문서를 참고하여 모르거나 헷갈리는 문법들을 해결할 수 있습니다.
Vue.js
Vue.js - The Progressive JavaScript Framework
vuejs.org
3. Watch와 Computed의 차이점
Watch와 Computed는 데이터의 변화에 따라 특정로직이 실행되는 속성이지만,
Compute가 대부분의 케이스에 더 적합하고, Watch 사용 시 코드가 복잡해지고 너저분해질 수 있기에 보통 Computed를 지향.
<body>
<div id="app">
{{ num }}
</div>
<!--Vue.js CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--axios CDN-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10
},
//로직이 실행될 때 데이터의 기준 num
//빠르게 계산될 수 있음. (텍스트연산)
//단순한 값에 대한 계산: 벨리데이션의 값
computed: {
doubleNum: function() {
return this.num * 2;
}
},
//num의 값을 조정
//매번 실행되는게 부담스러운 무거운 로직에 사용
watch: {
//갱신값, 이전값
num: function(newValue, oldValue) {
this.fetchUserByNumber(newValue);
}
},
methods: {
fetchUserByNumber: function(num) {
// console.log(num);
axios.get(num);
}
}
});
</script>
</body>
4. 최신 Vue CLI
Vue CLI를 설치하기 전 명령어를 통해 설치했던 node.js의 버전(10이상)과 npm(6이상)의 버전을 확인!
node -v
npm -v
Vue CLI를 설치하는 자세한 방법은 방법은 처음 포스팅 했었던 [Vue.js] 시작하기 : 기본 개발환경 설정하기를 참고해 주세요~!
[Vue.js] 시작하기 : 기본 개발환경 설정하기
[ 개발 환경 설정 ] - Visual Studio Code : 자신이 사용하는 코딩 편집 프로그램. - Vue.js devtools : 크롬 브라우저 확장프로그램 - Node.js : 구글 크롬의 JavaScript 런타임. JS를 웹브라우저에서만 쓰는..
yeonzzy.tistory.com
Vue CLI 2.x 버전
vue init '프로젝트 탬플리 유형' '프로젝트 폴더 위치'
vue init webpack-simple '프로젝트 폴더 위치'
Vue CLI 3.x 버전
vue create '프로젝트 폴더 위치'
(1) public > index.html
: 빌드된 파일이 자동으로 추가되어 하나 또는 최소한의 파일로 변환하여 주입해 webpack으로 돌아감.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!--빌드된 파일이 자동으로 추가 : 하나 또는 최소한의 파일로 변환하여 주입 webpack으로 돌아감-->
<!-- built files will be auto injected -->
</body>
</html>
(2) src > main.js
: 싱글파일 컴포넌트를 가져오고, 컴포넌트의 내용을 정의 연결
import Vue from "vue";
//컴포넌트 파일 (.vue) 싱글파일 컴포넌트
import App from "./App.vue";
Vue.config.productionTip = false;
// 컴포넌트의 내용 정의, 연결
// var App={
// template: '<div>app</div>'
// }
new Vue({
render: (h) => h(App),
}).$mount("#app");
// $mount("#app")의 의미
// new Vue({
// el:'#app'
// })
// render: (h) => h(App)의 의미
// components: {
// 'app':App
// }
** render : 뷰 내부적으로 사용하는 함수로 사용자도 사용가능하며 기본적으로 탬플릿 속성을 정의하면 render함수를 실행.
(3) src > App.vue
: .vue의 파일은 tamplate, script, style태그로 이루어져 tamplate에는 HTML이 script에는 script또는 인스턴스 옵션, style에는 css를 정의해줍니다.
// vetur 버전 0.22 이상은 scf 대신 vue 입력
// vue -> 탭 : 자동완성
// var appHeader = {
// template: '<div>header</div>',
// methods: {
// addNum: function(){
// }
// }
// }
<template>
<!-- HTML -->
<div>header</div>
</template>
<script>
export default {
// script - 인스턴스 옵션
methods: {
addNum: function(){
}
}
}
</script>
<style>
/* css */
</style><template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<!-- 컴포넌트 태그 등록 -->
<!--
컴포넌트 태그 명명법 종류
1. 단어간 하이픈 연결 <hello-world></hello-world>
: 비쥬얼스튜디오의 파일바로가기 기능을 사용하기 위해선 이 방식을 사용.
2. 단어의 시작은 대문자(파스칼케이스) <HelloWorld></HelloWorld>
-->
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
// 인스턴스 옵션 속성 or 컴포넌트 옵션 속성
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
부족함이 많은 초보 프론트앤드 개발자에게 좀 더 좋은 방법이나 팁, 조언해주실만한 얘기들이 있다면 거침없이 남겨주세요..
오늘도 조금이라도 성장할 수 있는 초보 개발자였습니다 !
'study > vue.js' 카테고리의 다른 글
| [Vue.js] 컴포넌트 : 맨위로 버튼(Scroll Top Button) 만들기 (0) | 2024.01.05 |
|---|---|
| [Vue.js] 알아보기(3) : Vue Router 와 Axios (0) | 2020.09.07 |
| [Vue.js] 알아보기(2) : Vue Component (0) | 2020.09.07 |
| [Vue.js] 알아보기(1) : Vue.js 란 (0) | 2020.09.04 |
| [Vue.js] 시작하기 : 기본 개발환경 설정하기 (6) | 2020.09.01 |
