[0] Vue router
뷰 인스턴스와 함께 라우터 인스턴스를 생성해준다.
그 후 뷰 인스턴스에 만든 라우터 인스턴스를 등록함
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js">
1. 기본 구조
<body>
<div id='#app'>
<router-view></router-view>
</div>
<script>
var LoginComponent = {
template: '<div>login</div>'
}
var MainComponent = {
template: '<div>Main</div>'
}
var router = new VueRouter({
// 페이지에 대한 라우팅 정보 정의 ( 페이지 갯수만큼 객체 할당)
routes: [
{
// 향할 페이지의 url
path: '/login',
// 해당 url에서 표시될 컴포넌트
component: LoginComponent
},
{
path: '/main',
component: MainComponent
}
]
});
new Vue({
el: '#app',
router: router
});
</script>
2. router Link
앵커 태그 <a>로 변환해서 나타남 !
<div id="app">
<div>
<router-link to="/login">Login</router-link> // 앵커 태그 추가
<router-link to="/main">Main</router-link>
</div>
[2] Axios 사용하기
<body>
<div id="app>
<button v-on:click="getData">get user</button>
<div>
{{users}}
</div>
</div>
new Vue({
el: '#app',
data: {
users: []
},
method: {
getData: function() {
axios.get('https://jsonplaceholder.typicode.com')
.then(fuction(response){
console.log(respons.data);
this.users = response.data;
})
.catch(fuction(error) {
console.log(error);
});
}
}
}
})
[3] Template 문법
1. 데이터 바인딩
: 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법
- Vue({}) 인스턴스의 data속성에 데이터를 담아놓고 머스타치 태그 { } 를 이용해 접근하는 방식
<script>
new Vue({
el: '#app',
data: {
num: 10,
},
computed: { // 데이터를 관찰하고 변화하면 행동
doubleNum: function() { // 'computed'속성의 변수
return this.num * 2;
}
})
</script>
2. 디렉티브
: HTML 태그에서 v-## 속성들로 Vue에서 런타임 시 인식하여 따로 관리함
==> 변수 뿐만 아니라 속성 값 제어가 가능해짐 !
<div id="app">
// div bind를 통해서 html 태그 옵션 제어
<p v-bind:id="uuid" v-bind:class="name">{{ num }}</p>
<div v-if="loading"> // 로딩값이 트루면 div선택
Loading...
</div>
<div v-else> // 로딩값이 false면 div선택
test user has been logged in
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
num: 10,
uuid: 'abc1234',
name: 'text-blue',
loading= true
},
computed: {
...
# V-ON을 사용한 이벤트 핸들링
<div id="app">
// 버튼에 v-on을 통한 클릭 이벤트 등록
<button v-on:click="logText">click me</butoon>
<input type="text" v-on:keyup="logText">
</div>
<script>
new Vue({
el: '#app',
methods: {
logText: function() {
console.log('clicked');
}
})
</script>- 현재 예제에서는 bind와 if&else, v-on만 사용했지만 다양한 디렉티브가 존재하고 응용 가능 !
watch와 computed 속성의 차이
- computed의 경우 단순 값에 대한 계산 , 텍스트의 입력을 받아 validation 결과
- watch의 경우에는 무거운 로직, 매번 실행되기 어려운 로직 ( 데이터 요청 axios .. )
( 대부분의 경우 computed로 구현 가능하고 적합한 편 ~ )
Computed를 이용한 클래스 코드 작성
<style>
.warning {
color: red;
}
</style>
<body>
<div id="app">
<p v-bind:class="{ warning: isError }">Hello</p>
// 클래스이름이 warning인데 뒤에 있는 조건에 따라 추가되거나 사라짐
// 현재 false이기 때문애 warning이 들어가지지 않아서 색깔 X
<p v-bind:class="errorTextColor"> Hello2 </p>
// computed 속성을 통해서 클래스 바인딩도 가능 !
</div>
<script>
new Vue({
el: '#app',
data {
cname: 'blue-text'
isError: false
}
computed: {
errorTextColor: function() {
return isError ? 'warning' : null:
});
</script>
[4] 싱글 파일 컴포넌트
[5] 예제
반응형
'FrameWork & Runtime > Vue.js' 카테고리의 다른 글
| Vue.js (0) | 2022.06.28 |
|---|
