2020. 5. 26. 13:25ㆍVueJS
Vue.js 는 유연하고 가벼운 라이브러리
가상DOM으로 적용한다는 점은 리액트와 같고, 러닝 커브도 완만해서 빠르게 애플리케이션을 개발할 수 있다는 장점이 있다.
Vue.js은 전형적인 MVVM 패턴을 따른다.
Model (M) : 도메인 특화 데이터. 도메인 데이터 형태 정의
View (V) : 유저 인터페이스 (UI)
ViewModel (VM) : 상태와 연산
//모델
const model = {
message: "<h1>first vue.js application</h1>",
imagePath: "http://sample.bmaster.kro.kr/photos/61.jpg",
name: '너의 이름은',
fruits: []
}
// 뷰모델
const info = new Vue({
el : "#info",
data: model
})
<!-- 뷰 (UI) -->
<div id="simple">
<span>{{ message }}</span>
<div v-text="message" style="color: red" ></div>
<div v-html="message" style="color: red" ></div>
<!-- v-bind는 콘텐츠 영역이 아닌, 속성 값 바인딩! :src만 작성해도 됨 -->
<div><img v-bind:src="imagePath" style=" width: 200px; height: 200px"></div>
<!-- 위의 디렉티브들은 모두 단방향. 요소(element)에서 변경한 값이 모델 object에 반영되려면 양방향 바인딩이 필요.
그 디렉티브가 v-model. -->
<div><input v-bind:value="name" v-model="name" id="name" type="text" placeholder="이름을 입력하세요" /></div>
<div><h3 v-html="name"></h3></div>
<div id="simple1">
<div> 좋아하는 과일들 모두 골라주세요 : </div>
<input type="checkbox" value="1" v-model="fruits">사과,
<input type="checkbox" value="2" v-model="fruits">키위,
<input type="checkbox" value="3" v-model="fruits">포도,
<input type="checkbox" value="4" v-model="fruits">수박,
<input type="checkbox" value="5" v-model="fruits">참외
</div>
<div id="simple2">
선택한 과일들 : <span v-html="fruits"></span>
</div>
</div>View --> ViewModel : data바인딩 & 커맨드
ViewModel --> Model : 업데이트 ( 뷰모델을 통해서 모델 업데이트를 해줘야 한다 )
Model --> ViewModel : 알림 전송
ViewModel --> View : 알림 전송
VSCode 사용시 유용한 플러그인
- view-in-browser : html 파일을 기본 브라우저로 보도록
- vetur : Vue.js 코드 하이라이팅, 코드 자동완성 ,디버깅 ,린트
- HTML Snippets : HTML태그 조각 빠르게 작성
- JS-CSS-HTML Formatters : Ctrl + space로 자동완성
- Vue 2 Snippets : 뷰 2.0 코드 조각 지원, 하이라이팅
- Vue-beautify : 코드 정리 배치
- ESLint
chrom 이용시 확장프로그램 Vue.js devtools 확장. 디버깅을 돕기 위해
Vue-CLI
CLI 스캐폴딩 도구.
*스케폴딩 : '공사장의 임시 가설물'이라는 뜻. 앱을 개발할 떄 처음부터 개발하느 게 아니라 기본적인 인터페이스와 틀 제공 이 틀로 전체 앱을 개발.
vue-cli 설치
npm install -g yarn @vue/cli
vue-cli로 프로젝트 생성 (리액트의 CRA같은)
vue create [프로젝트명]
or
vue uivue ui 명령을 이욯해 GUI기반에서 프로젝트 매니저 화면을 이용해 프로젝트를 생성 관리할 수 있습니다.
Vue 디렉티브
Vue.js의 View영역에서 태그의 속성을 지정하는 방식으로 구현이 됩니다. 디렉티브는 vue에서 제공하는 기본 디렉티브와 사용자가 커스템할 수 있는 커스텀 디렉티브가 있습니다.
v-text ( == {{ }} ) : innerText 속성에 연결됨. 문자열을 HTML 인코딩하여 나타내서 화면에 태그 문자열이 그대로 나타남
v-html : innerHTML 속성에 연결. 태그 문자열을 파싱해서 화면에 뿌림.
* v-html은 <script> 태그를 그대로 바인딩해서 XS공격에 취약합니다. 꼭 필요한 경우 아니면 v-text사용.
v-bind : 객체의 속성(attribute)를 바인딩 할 때 사용
ex) input, option태그의 value 나 img태그의 arc 속성 같은 속성 바인딩
< img v-bind:src="imagePath" />
< img :src="imagePath" /> - 생략하고 이렇게 작성해도 가능합니다.
v-model : 양방향 디렉티브 유저가 HTML요소를 변경해서 모델 객체의 값을 바꿀 경우
<div id="sample"?
<input type="text" v-model="name" />
<br />
입력된 이름: <h2 v-html="name"></h2>
</div>
<script>
const sample = new Vue({
el: "#sample",
data : {
name: ''
}
})
</script>
v-show
v-if / v-else-if / v-else
v-for
기타 디렉티브
v-pre : HTML요소에 대한 컴파일을 수행하지 않습니다.
ex) <span v-pre>{{ message }} </span> - 원래대로라면 message가 바인딩되어 뿌려져야 한는데 문자 그대로 출력
v-once : 처음 한 번만 렌더링 수행. 초기화 후 변경되지 않는 UI 개발 시 사용.
v-cloak : 화면 초기에 컴파일 되지 않은 템플릿은 나타나지 않도록 한다.
ex) 많은 데이터를 바인딩해서 웹에 뿌려줄 때 일시적으로 콧수염 표현식이 나다타는 것들을 방지.
계산형 속성 (computed property)
v-bind로 간단한 데이터 바인딩은 해볼 수 있는데, 연산 로직이 필요한 경우 쉽지 않습니다.
이 떄computed라는 속성으로 함수를 등록해두면 마치 속성처럼 이용할 수 있습니다.
<div id="example">
<input type="text" v-model="num" /><br />
1부터 입력된 수까지의 합 : <span>{{ sum }}</span>
</div>
<script>
const example = new Vue({
el: "#example",
data : { num : 0 },
computed: {
sum : function(){
const n = Number(this.num);
if(Number.isNaN(n) || n <1 ) return 0;
return ((1+n ) * n) /2;
}
}
})
</script>* 주의!
- 함수 안의 this는 Vue객체 자신을 참조. 함수 내부에서 다른 콜백 함수를 실행하거나 했을 때 this가 다른 값으로 연결될 수 있다.
- 데이터 타입은 위에서 보면 num이 number타입으로 생ㄱ가할 수 있지만 HTML element 내부에서 모두 문자열로 다루어짐. 따라서 Number()이나 parseInt()로 변환해줘야 합니다.
이벤트 처리
- v-model 은 입력 시 이벤트를 발생시키거나 엔터키를 입력해준다하는 처리를 해준 후 바인딩이 됩니다.
사용자 입력시 바로 이벤트 처리 하고 싶다면 event에 대한 값으로 바로바로 렌더링을 해줘야 합니다.
v-on 디렉티브를 이용해 input이벤트나 keyup이벤트 처리를 수행하면 됩니다. @input처럼 사용할 수 있습니다.
<input type="text" v-model="countryName" @input="nameChanged" />
const exmaple = new Vue({
el: "#exmaple",
data:model,
computed: {
filtered: function() {
const cname = this.countryName.trim();
console.log(cname);
return this.countries.filter( (item, index) => {
if(item.name.indexOf(cname) > -1){
return true
}
})
}
},
// 이벤트의 값을 바로 모델에 바인딩
methods : {
nameChanged: function(e){
console.log(e.target.value);
this.countryName = e.target.value;
}
}
})
[참고]
Vue.js 퀵스타트