투명한 기부를 하고싶다면 이 링크로 와보세요! 🥰 (클릭!)
바이낸스(₿) 수수료 평생 20% 할인받는 링크로 가입하기! 🔥 (클릭!)
웹 프론트엔드 프레임워크 뷰 강의 링크이다.
1.
https://kr.vuejs.org/v2/guide/index.html
뷰 공식 한국어 튜토리얼. 한글화가 잘 되어있다.
2.
https://velopert.com/vuejs-tutorials
벨로퍼트님의 뷰 튜토리얼이다.
3.
http://vuejs.kr/2017/02/05/express-with-vue/
express를 통한 nodejs api 백엔드와 vue를 어떻게 붙이는지에 대한 환경 구성에 대한 글이다.
4.
https://router.vuejs.org/kr/guide/
vue로 프론트엔드 router을 구현할 수 있게 해준다.
http://blog.jeonghwan.net/2018/04/07/vue-router.html
이 링크도 참고할만하다.
5.
https://vuex.vuejs.org/kr/guide/
vuex 에 대한 글이다.
6.
https://vue-loader-v14.vuejs.org/kr/
vue-loader에 대한 글이다.
7.
https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/
vue.js 입문서
이 블로그의 다른 시리즈를 쭉 읽어보는 것도 도움이 된다.
http://blog.jeonghwan.net/tags.html#vue
이 블로그이 vue 태그도!
8.
https://blog.martinwork.co.kr/vuejs/2018/09/16/vue-jwt-application.html
http://blog.jeonghwan.net/2018/03/26/vue-authentication.html
vue로 jwt 로그인 인증 구현에 대한 글들이다.
위 링크는 회원가입 / 로그인 인증까지만 구현이 되어있고
아래 링크는 회원가입은 없지만 Vuex를 이용해서 로그인 상태 저장하는 곳 까지이다.
9.
https://lovemewithoutall.github.io/it/install-bootstrap-for-vue/
Vue는 외부 라이브러리를 불러와서 쓰는게 기존 방법과 다르다(!!!)
<script src=""/>어쩌고 하다가 호되게 당한 후로는 위의 방법 등으로 부트스트랩을 불러와서 쓰는 중이다.
10.
Vue에서 자바스크립트 불러오기
https://stackoverrun.com/ko/q/12506122
------------
개인적인 정리
------------
1. 튜토리얼
include 방법
HTML에 다음 구문 포함.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>선언적 렌더링 방법
HTML
<div id="app">
{{ message }}
</div>
JS
var app = new Vue({
el: '#app',
data: {
message: '안녕하세요 Vue!'
}
})
이 코드는 Vue 객체를 통해 id="app"인 곳 안쪽의 {{message}}를 data 안의 message value와 바인딩하는 코드이다.
디렉티브
텍스트를 넣는 것 뿐만 아니라, 엘리먼트(태그)의 속성도 지정해줄 수 있다.
HTML
<div id="app-2">
<span v-bind:title="message">
내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
</span>
</div>
JS
var app2 = new Vue({
el: '#app-2',
data: {
message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
}
})
다음과 같이 해주면, 렌더링 시에
<span title="이 페이지는 Fri Dec 07 2018 20:23:33 GMT+0900 (한국 표준시)에 로드 되었습니다">
내 위에 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
</span>
다음과 같은 HTML이 렌더링 된다.
이 때, v-bind 속성을 "디렉티브" 라고 하는데, 디렉티브는 v-접두사가 붙은 모든 속성들을 의미한다.
디렉티브는 한국말로는 "지시자"라고 번역되고는 하는데, 주로 어떤 기능을 가진 DOM을 만들어낼 때 (즉 어떤 DOM의 보이거나 바뀌거나 하는 등의 행위를 지시할 때) 쓴다고 보면 된다.
vue에서 제공하는 뜻에서 v- 라는 접두사가 붙고, bind가 붙은 것으로 짐작할 수 있듯 title 속성은 data안의 message와 실시간으로 연동되어 변한다.
조건문
엘리먼트의 존재 여부를 정하는 조건문을 만들 수가 있는데,
HTML
<div id="app-3">
<p v-if="seen">이제 나를 볼 수 있어요</p>
</div>
JS
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
소스에서 짐작할 수 있듯, seen 안에 들어있는 값에따라 p 태그를 볼 수 있는지 없는지가 결정된다. 즉, 돔의 구조또한 데이터와 바인딩 할 수 있음을 나타낸다.
console에 app3.seen = false 를 타이핑하면 p 태그를 보이지 않게 할 수 있다.
반복문
v-bind나 v-if 뿐만 아니라, v-for등을 이용하여 vue 엘리먼트가 vue 안에 CRUD될 때 자동으로 변화(트렌지션 효과)를 적용할 수도 있다.
HTML
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
JS
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'JavaScript 배우기' },
{ text: 'Vue 배우기' },
{ text: '무언가 멋진 것을 만들기' }
]
}
})
만약 위와같은 소스코드에서 app4.todos.push({ text: 'New item' })을 입력하면 기존 목록에 새 항목이 추가되는 것을 볼 수 있다.
상호작용 (사용자 입력 핸들링)
v-on 디렉티브를 사용하면 이벤트 리스너를 사용해 사용자의 입력을 처리할 수 있다.
해당 태그를 통해 이벤트에 따라 Vue인스턴스에 메소드를 호출할 수 있다.
HTML
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>
JS
var app5 = new Vue({
el: '#app-5',
data: {
message: '안녕하세요! Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
또한 v-model 디렉티브를 사용하면, 사용자의 입력과 앱의 상태를 양방향으로 바인딩하여 사용할 수 있다.
HTML
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
JS
var app6 = new Vue({
el: '#app-6',
data: {
message: '안녕하세요 Vue!'
}
})
컴포넌트 시스템
Vue의 컴포넌트 시스템 또한 매우 중요한 기능 중 하나이다.
미리 정의된 템플릿을 묶어 재 사용 가능하게 만든다고 생각하면 편하게 이해할 수 있다.
컴포넌트 등록은 다음과 같이 할 수 있다.
// todo-item 이름을 가진 컴포넌트를 정의합니다
Vue.component('todo-item', {
template: '<li>할일 항목 하나입니다.</li>'
})
그리고 이를 렌더링 하는것은 아래와 같이 할 수 있다.
<ol>
<!-- todo-item 컴포넌트의 인스턴스 만들기 -->
<todo-item></todo-item>
</ol>
할 일을 렌더링 하는 함수를 조금 더 사용성 높게 바꿔보자.
prop 이라는 (사용자 정의 속성 같은) 것을 이용하여 사용자(혹은 상위 컴포넌트)로부터 할 일을 입력받을 수 있게 만들자.
Vue.component('todo-item', { |
이 것은 이제 v-bind를 이용하여 각각의 반복되는 컴포넌트에게 전달할 수 있다.
HTML
<div id="app-7">
<ol>
<!--
이제 각 todo-item 에 todo 객체를 제공합니다.
화면에 나오므로, 각 항목의 컨텐츠는 동적으로 바뀔 수 있습니다.
또한 각 구성 요소에 "키"를 제공해야합니다 (나중에 설명 됨).
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
JS
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})
디렉티브 정리
v-text
<span v-text="name"></span>
의 경우
Vue.name = "aaa" 이면
innerText = "aaa" 로 바꿔준다.
v-html
위와 마찬가지지만 innerHTML = "aaa"가 된다.
v-show
true / false
v-else
v-if와 같이 쓴다.
v-else-if도 있다.
v-pre
이 태그 안의 친구들은 vue 문법의 영향을 받지 않는다.
v-cloak
자바스크립트가 실행 되기전에, Vue 인스턴스가 제대로 준비되기 전 까지 템플렛을 위한 HTML 코드( {{name}}등 )를 숨기고 싶을 때 이 v-cloak 이라는 디렉티브를 사용한다.
v-cloak와 더불어 css에서
[v-cloak]:{
display:none;
}
도 추가해줘야 한다.
v-once
처음 한번만 렌더링 후 더이상 binding하지 않는다.
2. 기능별 WIKI
필터링 기능
* vue.filter로 출력 전 필터를 할 수 있다.
HTML
{{'hello world' | capitalize}}
JS
Vue.filter('capitalize, function(string){
return string.charAt(0).toUpperCase() + string.slice(1,string.length)
})
new Vue({el:'#app'})
선택적으로 class 스타일 주기.
HTML
<div id="app">
<textarea v-model="memeText" :class="{warn : longText}" :maxlength="limit">
</textarea>
{{memeText.length}}
</div>
JS
computed:{
longText(){
if(this.limit - this.memeText.length<=10) return true
else return false
}
}
data:{
memeText:"aaa",
limit:50
}
CSS
.warn {
background-color:mistyrose
}
* 여러 클래스를 주고 싶으면 다음과 같이 쓰면 된다.
:class="{class1:var1 , class2:var2 , .....}"
그리고 이것은 다음과 같이 정리될 수 있다.
:class="classes"
data:{
classes:{
class1:var1,
class2:var2,
....
}
}
조금 더 현명하게 수정하는 방식은
computed:{
classes(){
const longText = ~~~~
return{
class1:longText,
class2: ~~......}
}
}
이런 식으로 계산하기 편하게 묶어서 만들어주는 것이다.
