728x90
반응형
프로젝트 환경 intelliJ / tomcat 10 / java11(예정) / Oracle 을 사용할 생각으로 일단 셋팅 완료
안되면 구버전 이클립스 + tomcat8인가 9 + java8로 되돌아가도 됨
그냥 나도 한번 vue에 맞는 신상 백엔드기술을 써보고싶었음
예전에 스프링 공부한답시고 tomcat 깔다가 빡쳐서 포기했던 옛날은 안녕이다.
셋팅이 정말 너무 편해져서 뭐 더 쓸 말이 없음..
vue3이 최신인 것 같지만
회사 소스에서도 vue2를 사용하는 것 같고
인프런도 그렇고 지금 듣고있는 휴넷 강의 포함 아직 많은 강의들이 vue2기반인듯 하다.
그래서 vue 한국어 페이지에서 설치 방법을 참고하되
vue2 마지막 버전을 찾아서 스크립트 태그에 임포트했다.
el: 웹애플리케이션 내 html요소 중 vue객체가 관리할 요소를 설정, id를 찾아감.
el: #test1이면 test1 객체에서 data 로 저장한 값들을 사용가능하다.
el 지정값 앞에 . 을 붙이면 class 속성을 찾아가지만, 클래스는 처음꺼 하나만 인식하니 id속성 사용하는 게 유리
다양한 타입의 데이터를 저장할 수 있으며, 함수도 불러올 수 있다.
html 귀여운 페이지 만들던 시절에서 정말 많이 발전했군.
앉은자리에서 기초개념 일단 뚝딱
벌써 10% 들었다 후후
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
window.onload = function (){
var test1 = new Vue({
<!--el: 웹애플리케이션 내 html요소 중 vue객체가 관리할 요소를 설정, id를 찾아감. #test1 객체에서 data 로 저장한 값들을 사용가능-->
el : '#test1',
data : {
str1 : '문자열1',
int1 : 100,
float1 : 11.11
}
})
var test2 = new Vue({
<!--el 지정값 앞에 . 을 붙이면 class 속성을 찾아감, 그렇지만 클래스는 처음꺼 하나만 인식하니 id속성 사용하는 게 유리-->
el : '.test2',
data : {
str2 : '문자열2',
int2 : 200,
float2 : 22.22
}
})
var test3 = new Vue({
el : '#test3',
data : {
int3 : 100,
float3 : 11.11,
str3 : '문자열3',
boolean3 : true,
array3 : [10,20,30],
object3 : {
a1: 'a1 문자열',
a2: 'a2 문자열',
}
}
})
console.log(test3.int3)
console.log(test3.$data)
console.log(test3.$data.int3)
var test4 = new Vue({
el : '#test4',
data : {
name : '홍길동',
age : 30
},
methods : {
user_info : function(){
return '이름은 ' + this.name + '이고 나이는 ' + this.age + ' 살 입니다.'
}
}
})
}
</script>
</head>
<body>
<div id = "test1">
<h3> {{str1}} </h3>
<h3> {{int1}} </h3>
<h3> {{float1}} </h3>
</div>
<hr/>
<div class = "test2">
<h3> {{str2}} </h3>
<h3> {{int2}} </h3>
<h3> {{float2}} </h3>
</div>
<hr/>
<div id = "test3">
<h3> {{int3}} </h3>
<h3> {{float3}} </h3>
<h3> {{str3}} </h3>
<h3> {{boolean3}} </h3>
<h3> {{array3[0]}} </h3>
<h3> {{array3[1]}} </h3>
<h3> {{array3[2]}} </h3>
<h3> {{object3.a1}} </h3>
<h3> {{object3.a2}} </h3>
</div>
<hr/>
<div id = "test4">
<h3>{{user_info()}}</h3>
</div>
</body>
</html>
728x90
반응형
'study > Vue.js' 카테고리의 다른 글
| Vue.js watch computed : 캐시 메모리저장 여부 / 코드 복잡도 차이 (0) | 2022.06.07 |
|---|---|
| Vue.js 컴포넌트 component, v-bind:is 동적할당, 템플릿만들기 (0) | 2022.06.06 |
| Vue.js HTML태그 인식하기 / 이미지 불러오기 : v-html, v-bind (0) | 2022.06.05 |
| Vue.js 객체할당과 이벤트 1: mount / destroy / v-on (0) | 2022.06.04 |
| Vue.js 카테고리 신설 (0) | 2022.06.01 |
댓글