Mais conteúdo relacionado
Semelhante a Vuejs 시작하기 (20)
Vuejs 시작하기
- 3. Vue 장점
뷰 레이어에만 초점을 맞춰서
“빠르다.
심플하다.
편하다”
https://kr.vuejs.org/v2/guide/comparison.html
- 5. Hello World
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
<div id="app">
{{ message }}
</div>
https://codepen.io/snowkiwi/pen/XRpRjz
- 7. 템플릿 문법
https://codepen.io/snowkiwi/pen/NjRJVm
var app2 = new Vue({
el: '#app-2',
data: {
seen: true,
url: "http://abcds.kr",
doSomething: function() {
alert('doSomething');
}
}
})
<div id="app-2">
<p v-if="seen">이제 나를 볼 수 있어요</p>
<a v-bind:href="url">abcds</a> <br/>
<a v-on:click="doSomething">do</a> <br/>
<!-- 수식어 -->
<form v-on:submit.prevent="onSubmit"></form>
</div>
- 10. 클래스와 스타일 바인딩
https://codepen.io/snowkiwi/pen/EmNxBN
new Vue({
el: '#app-3',
data: {
activeColor: 'red',
fontSize: 30,
styleObject: {
color: 'red',
fontSize: '13px'
}
}
})
<div id="app-3">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">객체구문1</div>
<div v-bind:style="styleObject">객체구문2</div>
<div v-bind:style="[activeColor, fontSize]">배열구문</div>
</div>
- 11. 조건부 렌더링
https://codepen.io/snowkiwi/pen/JNbYzE
<!-- v-if -->
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
<!-- v-else -->
<div v-if="Math.random() > 0.5">
이제 나를 볼 수 있어요
</div>
<div v-else>
이제는 안보입니다
</div>
<!-- v-else-if -->
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
- 14. 폼 입력 바인딩
https://codepen.io/snowkiwi/pen/bWBwOd
<div id="example-3">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<br>
<span>체크한 이름: {{ checkedNames }}</span>
</div>
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
- 21. 고급
렌더 함수
사용자 지정 디렉티브
믹스인
플러그인
단일 파일 컴포넌트
프로덕션 배포 팁
라우팅
상태 관리
단위 테스팅
서버사이드 렌더링
TypeScript 지원
- 23. 참고 #2
#1. 시작하기 : https://codepen.io/snowkiwi/pen/gWwqLP
#2. 인스턴스 : https://codepen.io/snowkiwi/pen/mmrvvO
#3. 템플릿 문법 : https://codepen.io/snowkiwi/pen/NjRJVm
#4. 계산된 속성과 감시자 : https://codepen.io/snowkiwi/pen/WjGqdY
#5. 클래스와 스타일 바인딩 : https://codepen.io/snowkiwi/pen/EmNxBN
#6. 조건부 렌더링 : https://codepen.io/snowkiwi/pen/JNbYzE
#7. 리스트 렌더링 : https://codepen.io/snowkiwi/pen/eWBZWr
#8. 이벤트 핸들링 : https://codepen.io/snowkiwi/pen/GmNjoX
#9. 폼입력 바인딩 : https://codepen.io/snowkiwi/pen/bWBwOd
#10. 컴포넌트 : https://codepen.io/snowkiwi/pen/BRQpPP