자바스크립트로 서버와 클라이언트 구축하기
1 『vue활용하기』
탬플릿에는 2가지가 있는데 서버 템플릿과 클라이언트 템플릿이다. vue, react, angular는 클라이언트측 템플릿이고, ejs, pug, hbs는 서버측 템플릿이다. 이중에서도 vue 방식으로 서버와 클라이언트측 템플릿을 모두 할 수 있는 방법으로는 nuxt.js가 있다. 해당 포스팅에서는 vue 문법 그대로 서버까지 통제할 수 있는 nuxt.js 템플릿을 알아본다.
nuxt.js를 사용하려면 클라이언트 쪽의 랜더링을 담당할 vue.js를 사용해야 한다. vue의 cdn은 아래와 같다. script태그로 <head>태그에 입력한다.
//vue 예시코드[1]
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<h1>vue 시작하기</h1>
<div id="start">
{{message}}
</div>
<script type="text/javascript">
let app = new Vue({
el : '#start',
data : {
message: '!!!hello world!!!'
}
})
</script>
data 항목에는 매소드를 넣어서 아래와 같이 표현할 수 있다.
<div id="start">
{{message}}
</div>
<script type="text/javascript">
let app = new Vue({
el : '#start',
data( ){
return{
message : 'vue 시작하기'
}
}
})
</script>
nuxt.js에서는 el(엘리먼트,태그값)을 지정할 필요가 없다. 파일 단위로 관리하기 때문이다. 하지만 vue.js에서는 반드시 el항목에 사용할 태그 이름을 지정해야 한다. nuxt.js에 익숙해지기 위해서는 data부분을 함수형, 매서드로 사용하는 방법에 익숙해져야 한다.
2 『vue.js 바인딩』
vue 인스턴스에 정의된 데이터 값은 {{ }} 더블 중괄호로 바인딩을 할 수 있다.
<div id="start">
<a v-bind:href="link1">페이지 이동</a>
<img v-bind:src="src1" alt="test.png">
</div>
<script type="text/javascript">
let app = new Vue({
el : '#start',
data( ){
return{
link1 : 'http://doyangkang.tistory.com',
src1 : './images/img01.jpg'
}
}
})
</script>
vue 인스턴스의 data매서드에 정의된 프로퍼티는 link1과 src1의 경로이다. 해당 값을 index에서 사용하려면, v-bind:를 해당 경로설정 앞에 붙여주면 된다. 향후 사용자가 요청한 자료를 서버에서 받아온 후에 data( )매서드에 저장하고, 이를 프론트에서 사용할 수 있다. 참고로 'v-bind :'는 약어로 ' : '만 사용가능하다.
3 『마법의 {{ }} 더블 중괄호』
더블 중괄호 안에서는 자바스크립트 코드가 인식된다.
<div id="start">
<h1>오늘의 날짜:{{date.getHours()}}</h1>
</div>
<script type="text/javascript">
let app = new Vue({
el : '#start',
data( ){
return{
date : new Date()
}
}
})
</script>
{{ }}안에 자바스크립트 코드를 넣을 수는 있지만, vue에는 computed 속성이 있기 때문에 굳이 {{ }}안을 복잡하게 코드로 채울 필요가 없다. 단 급할 때 자바스크립트 코드를 사용할 수 있다는 정도만 기억하자.
4 『양방향 바인딩』
<div id="start">
<input type="text" name="" v-model:value="textComm">
<h1>{{textComm}}</h1>
</div>
<script type="text/javascript">
let app = new Vue({
el : '#start',
data( ){
return{
textComm:'hello vue.js'
}
}
})
</script>
양방향 바인딩은 form에서 아주 유용하다. 사용자가 요청한 데이터를 프론트 선에서 받은 후에 바로 해결가능하기 때문에 속도가 상당히 빠르다. v-model(양방향 바인딩)을 select 타입에서 사용한다면, 세미콜론 대신에 '='사용을 해야 한다.
slect 태그와 option태그를 사용한 양방향 바인딩 코드는 아래와 같다.
<div id="start">
<select v-model="textComm">
<option value="" disabled ><옵션 중 하나를 선택해주세요</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<h1>선택한 수:{{textComm}}</h1>
</div>
<script type="text/javascript">
let app = new Vue({
el : '#start',
data( ){
return{
textComm:''
}
}
})
</script>
'코드 스터디' 카테고리의 다른 글
| 자바스크립트 문법 (1)분할 배열 (0) | 2019.04.25 |
|---|---|
| nuxt.js 활용하기 (0) | 2019.04.25 |
| node.js Express프레임워크 => MVC패턴으로 정리하기 (2) | 2019.04.24 |
| 코노하로 웹 서비스 시작하기 (1) -ceotOS 7 설정- (0) | 2019.04.23 |
| three.js 3편 그림자 만들기 (0) | 2019.04.23 |
댓글