안녕하세요. 오늘은 Vue.js 공부 1일차에서 배운 내용을 정리하려고 합니다.
목차
Vue.js 비주얼 스튜디오 코드에서 진행방법.
- 비주얼 스튜디오 코드 프로그램 설치
- 비주얼 스튜디오 코드 폴더 선택 후 html 파일 생성
<head>영역에 <script src="https://unpkg.com/vue@2"></script> 적용하면 됩니다.1) MVVM 패턴 (모델 – 뷰 – 뷰모델 패턴)
- 코드 중복과 이것이 기인한 쓸데 없는 노력을 줄이면서, 빠른 상호 작용과 피드백을 갖춘 클라이언트 단 애플리케이션을 개발할 수 있게 도우며, 유닛 테스트에도 쉽습니다.
- View Model DOM과 자바스크립트 객체를 연결해 주면 뷰모델이 사이에서 동기화를 자동으로 처리합니다.
- Model = 데이터 / view = 화면 / Vue 인스턴스 화면 변경시 새롭게 화면을 갱신.
2) Vue 인스턴스 루트
- 루트 Vue 인스턴스 뷰 생성자 new Vew()로 생성할 수 있습니다.
- 생성자는 HTML 서식 컴파일, 인스턴스 데이터 초기화, 데이터 생성, 애플리케이션을 상호 작용형으로 만들어 주는 이벤트들을 바인딩하면서 어플리케이션을 가동
- Vue 생성자는 옵션객체(new Vue({ el : ‘#id’, data:{객체} }) -> 여기서 el옵션은 데이터 핸들링 할 요소 검색, 즉 Vue 애플리케이션 적용할 DOM요소(el) 지정
3. Vue 지시자
v-text
<body>
<div class="app">
<p>{{ message }}</p> {{}} -> {{message}} = 데이터 바인딩
<p v-text="message"></p> v-text 지시자로 바로 데이터 받습니다.
</div>
<div id="show"></div>
<script>
let p = document.createElement('p');
p.innerText = 'Hello, World';
document.querySelector('#show').append(p);
document.querySelector('#show p').innerText = 'World';
let vm = new Vue({
el : '.app', // template이 생성될 dom요소
data : { // 화면상에서 바인딩될 요소. 값
message : 'Hello, World' -> 기존 넘길 값
});
vm.message = 'Vue World'; // 데이터 바로 변경 가능 vm 변수에 데이터 이름으로 바로 변경
console.log(vm);
</script>
</body>
화면 출력
Vue World
Vue World
World
v-text = 값을 가져와 출력 하지만 연산처리 못합니다Vue 활용 - 문자열, 곱하기 등 연산, 배열, 객체 가능
<body>
<div id="app">
<p>{{myText + '를 공부.'}}</p> 문자열 합치기
<p>{{myNum * 2}}</p> 곱하기 연산
<p>{{myBool?'TRUE입니다.' : 'FALSE입니다'}}</p> 삼항, boolean 사용
<p>{{myArr[0]}}</p> 배열
<p>{{'이름 ' + myObj.name}} - {{myObj.age}}</p> 객체
<p>{{myFnc()}}</p> 함수
<p v-text="myText"></p>
<p v-html="myText"></p>
</div>
<script>
var vm = new Vue({
el : '#app',
data : {
myText : 'Vue.js',
myNum : 10 ,
myBool : true ,
myArr : ['Apple', 'Banana', 'Cherry'],
myObj : {name : 'Hong', age : 20},
myFnc : function() {
return 'Hongkildong'
},
}
});
</script>
</body><body>
v-bind 지시자 : Element(태그)의 attribute(속성)에 값을 지정
<div id="app">
<img src="../img/강아지3jpg.jpg" alt="강아지">
<br>
<img v-bind:src="myImg" alt="" v-bind:width="myWid">
<!--v-bind 태그 css 설정-->
<br>
<a href="https://www.naver.com">네이버</a>
<br>
<a v-bind:href="myHref">{{linkName}}</a>
</div>
<script>
var vm = new Vue({
el : '#app', // vue 인스턴스 관리할 dom
data : {
myImg : '../img/강아지10jpg.jpg',
myWid : '150px' ,
myHref : 'https://www.daum.net',
linkName : '다음사이트'
}
});
</script>
</body>
myImg 값 바인딩 되어서 바로 사진위치 값 넘겨서 변경 됩니다.
높이, 링크 등도 바인딩 변경 가능하게 합니다.다른 공부한 내용들은 밑에 글 참고해 주세요