캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다.
매일 20분 야금야금 Vue.js 화이팅.
IDE: Visual Studio Code
크롬 뷰 개발자 도구: Vue.js devtools
어떤 기능을 만들고 싶은데 방법을 모르겠다면?
공식 문서에 접속하여 키워드로 검색하고 예시를 찾아서 적용해본다.
이것이 정확하고 빠른 방법이다.
실습: 인풋 박스를 만들고 입력된 값을 p태그에 출력해보세요.
html의 input 태그는 작성할 수 있다.
<input type="text">Vue가 관리하는 요소로 등록하려면 어떻게 해야할까?
1. vue.js 공식 문서에 접속하자.
키워드 검색 및 예시 참고
vue.js 공식문서
검색 창에 키워드를 적는다. -> input form 라고 검색해보자.
Vue.js는 문서화가 잘 된 라이브러리이고 직관적인 예제가 작성되어 있다.
Guide나 API를 참고해도 좋다.
2. 공식 문서의 예시 처럼 v-model 디렉티브를 활용해보자.
3. 뷰 인스턴스의 data속성에 message 를 추가하자.
new Vue({
el: '#app',
data: {
num: 10,
uuid: 'abc1234',
name: 'text-blue',
loading: true,
message: ""
}
})4. input 태그에 v-model을 추가한다.
<div id="app">
<input type="text" v-model="message">
<p>{{ message }} </p>
</div>input에 작성하는대로 message의 값이 채워진다.
{{ }} 콧수염 괄호를 이용하여 데이터 바인딩한다.
화면에 입력한 문자열과 데이터 바인딩이 된 문자열이 같아진다.
실습한 전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-bind:id="uuid" v-bind:class="name">{{ num }}</p>
<p>{{ doubleNum }}</p>
<div v-if="loading">
Loading...
</div>
<div v-else>
test user has been loagged in
</div>
<div v-show="loading">
Loading...
</div>
<input type="text" v-model="message">
<p>{{ message }} </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10,
uuid: 'abc1234',
name: 'text-blue',
loading: true,
message: ""
},
computed: {
doubleNum: function(){
return this.num * 2;
}
}
})
</script>
</body>
</html>다음 시간에는 methods 속성과 v-on 디렉티브를 이용한 키보드, 마우스 이벤트 처리방법을 배운다.
코딩 리딩 라이딩💛