Vue.js
Evan You에 의해서 만들어짐
Vue 탄생은 Google에서 Angular로 개발하다가 가벼운 것을 만들어보고 싶어 시작
사용자 인터페이스를 만들기 위해 사용하는 오픈소스 Progressive Framework
Vuejs특징
접근성 유연성 고성능
MVVM 패턴
Model + View + ViewModel
Model : 순수 자바스크립트 객체
View : 웹페이지의 DOM
ViewModel : Vue의 역할
- 기존에는 자바스크립트로 vuew에 해당하는 DOM에 접근/수정 하기 위해 JQuery와 같은 Library를 사용.
- Vue는 View와 Model을 연결. 자동으로 바인딩. 양방향 통신이 가능
MVC
Controller - View - 화면 업데이트
- Model - Data갱신
MVVC
View → ViewModel → Model
Vue의 생성자 만들기
Vue.js CDN
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
생성자 코드 (뷰 인스턴스)
<div id="app"> <h2>{{ msg }}</h2> // 머스티치. 콧수염 형식 </div> <script> // Vue의 인스턴스 new Vue({ el: '#app', // element. id = app과 연결 바인딩 data() { return { msg: 'Hello Vuejs', }; }, }); </script>
Vue Instance 생성
속성
el : Vue가 적용될 요소 지정. CSS Selector or HTML Element
data : Vue에서 사용되는 정보 저장. 객체 또는 함수 형태
template : 화면에 표시할 HTML, CSS등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들을 화면에 그림
methods : 화면 로직 제어와 관계된 method를 정의하는 속성. 마으스 클릭 이벤트 처리와 같이 이벤트와 화면 동작과 관련된 로직 추가
created : 뷰 인스턴스가 생성되자 마자 실행할 로직 정의
인스턴스가 화면에 적용되는 과정
- CDN을 이용해서 뷰 라이브러리 파일 로딩
- 인스턴스 객체 생성 ( 옵션 속성 포함 )
- 특정 화면 요소에 인스턴스를 붙임 (바인딩 )
- 인스턴스 내용이 화면 요소로 변환
- 변환된 화면 요소를 사용자 최종 확인
Vue Instance Life Cycle
생성(Created), 부착(Mounted), 갱신(Updated) 소멸(Detroyed)의 4가지 단계로 나뉜다.
Created : Vue Instance가 생성 된 후 데이터들의 설정이 완료된 후 호출. Instance가 화면에 부착하기 전 template 속성에 정의된 DOM 요소 접근 불가.
Mounted : 지정된 Element에 Vue Instance 데이터가 마운트 된 후에 호출. template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직 수행
Updated : Vue에서 관리되는 데이터가 변경되어 DOM이 업데이트 된 상태. 데이터 변경 후 화면 요소 제어와 관련된 로직 추가.
Life Cycle Code
<div id="app"> <h2>{}</h2> </div> <script> new Vue({ el: '#app', data: { message: 'Life Cycle Hooks.' }, beforeCreate() { console.log('beforeCreate!!!'); }, created() { console.log('created!!!'); }, mounted() { console.log('mounted!!!'); }, updated() { console.log('updated!!!'); }, }); </script>
바인딩 된 후 데이터가 업데이트 된다면 updated 후만 실행된다.
Vue에서의 this
vue에서 this 키워드를 사용하면 vue객체의 인스턴스에 접근하겠다는 뜻이다.
보간법(Interpolation)
문자열
- 데이터 바인딩의 가장 기본 형태는 "Mustache" 구문(이중 중괄호)을 사용한 텍스트 보간.
- {{ 속성명 }}
- v-once 디렉티브를 이용. 데이터 변경 시 업데이트 되지 않는 일회성 보간 수행
예시 Code
<div id="app"> <span> 메시지 : {} </span> <span v-once> 이후 변경 X : {} </span> <h2>{{ msg }}</h2> <h2 v-once>{{ msg }}</h2> </div> <script> new Vue({ el: '#app', data(){ return { msg: 'Hello Vuejs' }; } }); </script>
v-text, v-html
v-text == innerText → 문자열 그대로 가져온다
v-html == innerHtml → 서식이 적용된 상태로 가져온다
예시 Code
<div id="app"> <h2>{{ msg }}</h2> <h2 v-text="'v-text : ' + msg"></h2> <h2 v-html="'v-html : ' + msg"></h2> </div> <script> new Vue({ el: '#app', data() { return { msg: '<font color="red">Hello SSAFY</font>', }; }, }); </script>
JavaScript 표현식 모두 사용 가능
Vue.js는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원한다.
- 변수선언, 조건문은 사용불가(삼항연산자 사용)
예시 Code
{} {} {} <div v-bind:id-"'list-' + id"></div>
예시 Code2
<!-- Vue 객체를 마운트할 대상 엘리먼트 --> <div id="app"> <div>{}</div> <div>{}</div> <div>{}</div> <div>{{ changeMsg('Good') }}</div> <div v-text="message + ' Vue~'"></div> <div v-text="num > 10 ? num * num : num + 100"></div> <div v-text="message.split('').reverse().join('')"></div> </div> <script> new Vue({ el: '#app', data: { num: 10, message: 'Hello', }, methods: { changeMsg: function (mg) { return (this.msg = mg); }, }, }); </script>
디렉티브(Directives)
디렉티브 : v-접두사가 있는 특수 속성
속성 : 단일 JavaScript의 표현식 ( 단, v-for 제외)
역할 : 표현식의 값이 변경 될 때 사이드 이펙트를 반응적 DOM에 적용.
종류
v-model
양방향 바인딩 처리를 위해 사용 (form의 input, textarea)
참고 : https://kr.vuejs.org/v2/guide/forms.html
예시 Code
<!-- Vue 객체를 마운트할 대상 엘리먼트 --> <div id="app"> <!--text, textarea--> <input type="text" v-model="msg" /> <div>{}</div> <hr /> <h2>textarea v-model</h2> <textarea rows="5" v-model="msg2"></textarea> <p style="white-space: pre-line">{}</p> <hr /> <!--checkbox--> <h2>checkbox</h2> <input type="checkbox" id="wm" value="수박" v-model="fruits" /> <label for="wm">수박</label> <input type="checkbox" id="bnn" value="바나나" v-model="fruits" /> <label for="bnn">바나나</label> <input type="checkbox" id="apple" value="사과" v-model="fruits" /> <label for="apple">사과</label> <p>선택한 과일 : {}</p> <hr /> <!--radio--> <h2>radio</h2> <input type="radio" id="male" value="남자" v-model="gender" /> <label for="male">남</label> <input type="radio" id="female" value="여자" v-model="gender" /> <label for="female">여</label> <p>선택한 성별 : {}</p> <hr /> <!--하나 선택--> <h2>select</h2> <select v-model="area"> <option value="서울">서울</option> <option value="대전">대전</option> <option value="광주">광주</option> <option value="구미">구미</option> </select> <p>공부하는 지역: {}</p> <hr /> <!--여러개 선택--> <h2>select multiple</h2> <select v-model="areas" multiple> <option v-for="city in cities" v-bind:value="city.value">{}</option> </select> <p>희망지역 : {}</p> </div> <script> new Vue({ el: '#app', data: { msg: 'Hello Vue~!', msg2: '', fruits: [], gender: '', area: '서울', cities: [ { vtext: '서울', value: 'seoul' }, { vtext: '구미', value: 'gumi' }, { vtext: '광주', value: 'gwangju' }, { vtext: '대전', value: 'daejeon' }, ], areas: [], }, }); </script>
- v-model과 연결된 msg가 변경
- 인스턴스 내부 msg 변경
- 인스턴스와 연결된 div에 표현 변경
v-bind
인스턴스와 엘리먼트의 속성과 바인딩
v-bind는 약어 " : " 로 축약
예시 Code
<div id="app"> <!-- 속성을 바인딩 합니다. --> <div v-bind:id="idValue">v-bind 지정 연습</div> <button v-bind:[key]="btnId">버튼</button> <!-- 약어를 이용한 바인딩. --> <div :id="idValue">v-bind 지정 연습</div> <button :[key]="btnId">버튼</button><br /> <a v-bind:href="link1">싸피</a> <a :href="link2">네이버</a> <span :title="titleStr">{{ str }}</span> <img :src="imgName" alt="" /><br /> <ul> <li v-for="(area, index) in areas" :class="{'zone-text-color' : area.isZone}"> {{ index + 1 }}.{{ area. city}} </li> </ul> <p :class="[textc, backc]">안녕하세요 싸피 여러분~~~~~</p> <div v-bind:aaa="msg">사용자 정의</div> </div> <script> new Vue({ el: '#app', data: { msg: 'user define', idValue: 'test-id', key: 'id', btnId: 'btn1', link1: 'http://www.ssafy.com', link2: 'http://www.naver.com', titleStr: '마우스를 올리면 보이는 타이틀 문자열', str: '일반 문자열', imgName: 'cookie.png', areas: [ { city: '광주', isZone: false }, { city: '구미', isZone: true }, { city: '대전', isZone: false }, { city: '서울', isZone: false }, ], textc: 'tcolor', backc: 'bcolor', }, }); </script>
v-for
반복문.
:key = idx와 함께 사용하자
v-if와 함께 사용하지 말자
예시코드
<div id="app"> <h2>객체배열 - 내용출력</h2> <ul> <li v-for="region in ssafy"> 지역 : {}, {}개반 </li> </ul> <h2>객체배열 - 위치,내용 출력</h2> <ul> <li v-for="region, index in ssafy"> 번호 : {}, 지역 : {}, {}개반 </li> </ul> <h2>객체배열 - 위치,내용 출력</h2> <ul> <li v-for="(region, index) in ssafy"> 번호 : {}, 지역 : {}, {}개반 </li> </ul> </div> <script> new Vue({ el: "#app", data: { ssafy: [{ name: "광주", count: 2 }, { name: "구미", count: 2 }, { name: "대전", count: 2 }, { name: "서울", count: 6 } ] } }) </script>
v-show
렌더링. display:none과 같은 맥락
예시 Code
<div id="app"> <div v-show="isShow">{}</div> </div> <script> /* 거짓의 값을 나타내는 것 : 0, false, '', null, undefined, NaN */ new Vue({ el: '#app', data: { isShow: true, msg: '보이나요?', }, }); </script>
v-if와 v-show의 차이점
화면이 보였다 안보였다 자주 바뀌는 부분에서는 v-show
template
여러개의 태그들을 묶어서 처리할 때 사용
v-if, v-for, component등과 함께 사용
예시 Code
<h2>template 태그 사용하기</h2> <div id="app"> <label>반수 : </label> <input type="number" v-model.number="count"> <template v-if="count % 2 == 0"> <h4>여러개의 태그를 묶어서 처리해야 한다면??</h4> <h4>template 태그를 사용해 보자</h4> <h4>만약에 template가 없다면?? 각태그마다 v-if?</h4> </template> <template v-for="(region, index) in ssafy" v-if="region.count === count"> <h3>지역 : {} ({}개반)</h3> </template> </div> <script> new Vue({ el: "#app", data: { count: 0, show: false, ssafy: [{ name: "광주", count: 2 }, { name: "구미", count: 2 }, { name: "대전", count: 3 }, { name: "서울", count: 6 } ] } }) </script>
Vue Method
Vue Instance 생성과 관련된 data 및 method의 정의 가능
method안에서 data를 this.dataName으로 접근
Vue Filter
Filter를 이용하여 표현식에 새로운 결과 형식 적용
중괄호 보간법또는 v-bind에 사용가능
예시 Code
<div id="app"> <div> 금액 : <input type="text" v-model="msg1" /><br /> 전화번호 : <input type="text" v-model="msg2" /> </div> <div> <h3>{{ msg1 | price }}</h3> <h3>{{ msg2 | mobile }}</h3> </div> </div> <script> Vue.filter('price', (value) => { if (!value) return value; return value.toString().replace(/\B(?=(\d)+(?!\d))/g, ','); }); Vue.filter('mobile', (value) => { if (!value || !(value.length === 10 || value.length === 11)) return value; return value.replace(/^(\d)(\d)(\d)/g, '$1-$2-$3'); }); new Vue({ el: '#app', data: { msg1: '', msg2: '', }, }); </script>
computed
- cache를 호출할때 이용한다.
- methods로 함수 3번 호출할 때 1번만 호출 가능
예시 Code
methods: { reversedMsg: function () { console.log('꺼꾸로 찍기'); return this.message.split('').reverse().join(''); }, }, computed: { reversedMsg: function () { console.log('꺼꾸로 찍기'); return this.message.split('').reverse().join(''); }, },
v-on == @
v-on : 이벤트 호출
ex) v-on:click == @click
이벤트 막기
- e.preventDefault()
- @click.prevent
접근자 프로퍼티(acessor property)
- 객체 안에 값을 설정(set), 추출(get)을 함수로 정의해준다.
- 설정된 값을 사용시 함수가 아닌 일반 프로퍼티 처럼 사용한다.
예시코드
let data2 = { get insa() { return `$님 하이`; }, set insa(name) { this._name = name; }, };
입력창 접근하기
ref에 값을 주면 refs에서 관리하기 시작한다.
$refs로 엘리먼트의 값에 접근이 가능하다.
엘리먼트를 직접 활용해야 할때 사용하면 된다.
예시코드
아이디 : <input type="text" v-model="id" ref="id" /> console.dir(this.$refs.id); console.log(this.$refs.id.value);
'Vue > Vue 정리' 카테고리의 다른 글
< Vuex > (0) | 2021.01.06 |
---|---|
< Vue / Cli > (0) | 2021.01.06 |
< ES6 - Destructuring / LocalStorage > (0) | 2021.01.06 |
< Vue 정리 2 > (0) | 2021.01.06 |
Uploaded by Notion2Tistory v1.1.0