방명록
- [Vue.js][유튜브 강의 노트] 개발자의품격_한시간만에 끝내는 Vue.js 입문 #22021년 11월 25일 14시 09분 25초에 업로드 된 글입니다.작성자: DandyNow728x90반응형
학습내용
1. 강의영상
유튜버 개발자의 품격님의 "한시간만에 끝내는 Vue.js입문" 강의 내용은 크게 두 파트로 나눌 수 있겠다.
본 페이지에는 Vue.js의 다음과 같은 내용을 다룬다.
- 데이터 처리
- 메소드
- Instance-Lifecycle
- 데이터 바인딩 v-model 사용
- @이용 이벤트 호출
- 배열 형식의 데이터 v-for 콘트롤
- v-if(또는 v-show) 이용한 엘리멘트 화면 보이기(감추기)
- watch 이용 실시간 데이터 모니터링
2. 학습 중 작성한 코드
<!-- src/views/Home.vue --> <template> <div> <h1>Welcome to {{title}}!</h1> <h1>Welcome to {{title2}}!</h1> <input type="text" v-model="input1" /> <button type="button" @click="getData">Get</button> <button type="button" @click="setData">Set</button> <select class="form-control" v-model="region" @change="changeRegion"> <!-- 이벤트 @이용 호출 --> <option :key="i" :value="d.v" v-for="(d,i) in options">{{d.t}}</option> </select> <table class="table table-bordered" v-if="tableShow"> <!-- v-if는 조건이 맞지 않으면 렌더링 하지 않음, 반면 v-show는 조건과 관계없이 렌더링함. --> <tr :key="i" v-for="(d,i) in options"> <td>{{d.v}}</td> <td>{{d.t}}</td> </tr> </table> </div> </template> <script> export default { // 데이터 처리 data() { return { title: "개발자의 품격", title2: "Seoul", input1: "abcd", options: [ { v: "S", t: "Seoul" }, { v: "J", t: "Jeju"}, { v: "B", t: "Busan"}, ], region: "B", // 콤보박스 기본값 tableShow: true, // v-if 이용, 테이블 보이기 또는 감추기 }; }, // 데이터 모니터링 watch: { input1() { console.log(this.input1); }, title() {}, }, methods: { getData() { alert(this.input1); }, setData() { this.input1 = "12345"; }, changeRegion() { alert(this.region); } }, // https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks beforeCreate() { console.log("beforeCreate"); }, created() { console.log("created"); }, beforeMount() { console.log("beforeMount"); }, mounted() { console.log("mounted"); }, beforeUpdate() { // console.log("beforeUpdate"); }, updated() { // console.log("updated"); }, beforeDestroy() { console.log("beforeDestroy"); }, destroyed() { console.log("destroyed"); }, }; </script>
3. 코드 실행
C:\workspace\vuejs\test>npm run serve
학습소감
Java의 Spring framework를 학습한 경험이 있는데,
그때에 비해 쉽게 다가왔다.
React나 Angular 경험, 그외 Front-end 경험이 전무 하기 때문에 다른 비교는 안된다!
개발자의 품격님에 의하면 Vue.js가 여러 복잡한 코드를 작성해야 하는 일들을
간단히 해결 할 수 있게 해 주었다고 한다!
728x90반응형'언어·프레임워크 > Vue.js' 카테고리의 다른 글
[Vue.js][문제해결] @click 이벤트에서 함수 호출 시 () 유무로 인한 문제 (0) 2022.04.26 [Vue.js][문제해결] axios 오류 errno: 1064 (0) 2022.04.25 [Vue.js][문제해결] status: 200 대신 severStatus: 2가 넘어 오는 문제 (0) 2022.04.23 [Vue.js][error] npm run serve 실행 에러 해결 | 'vue-cli-service'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. | npm ERR! code ERESOLVE (0) 2022.03.19 [Vue.js][유튜브 강의 노트] 개발자의품격_한시간만에 끝내는 Vue.js 입문 #1 (0) 2021.11.23 다음글이 없습니다.이전글이 없습니다.댓글