FRAME WORK (35) 썸네일형 리스트형 Vuejs 2 . 이벤트 (Events) 태그에 클릭이벤트를 만들어보는 예제입니다. 메소드에 alert()함수를 만들고 v-on:click 속성을 만들어 버튼을 클릭했을 때 alert창이 뜨도록 만들었습니다. 이번에는 더하기 버튼을 클릭하면 년도수가 1씩 증가하고 빼기 버튼을 클릭하면 년도수가 1씩 줄어드는 이벤트를 만들어본 예제입니다. 이번 예제는 버튼을 클릭하면 alert창이 뜨는 예제입니다. 이 예제로 새로 알게된것은 vue.js에서 event.preventDefault() 를 사용하는 방법입니다. submit버튼을 클릭하면 재로드가 되는데 이것을 막기 위하여 자바스크립트에서는 event.preventDefault()을 씁니다. vue.js에서는 더 간편하게 속성뒤에 .prevent를 붙여 사용할 수 있습니다. console.log로 보면.. vuejs 2 . 데이터 바인딩 (Data Binding) 태그안의 속성값을 바인딩해보는 예제입니다. 데이터에 type과 inputData라는 변수를 넣어주었습니다. 그리고 태그 속성앞에 v-bind: 를 붙여준뒤 속성값에 변수를 넣었습니다. v-bind: 는 : 로 줄여서 사용할 수 있습니다. 이번에는 태그를 만들고 link라는 변수를 만들어 바인딩해주었습니다. 추가로 메소드에 getInyoungLink 함수를 넣어주고 getInyoungLink 함수에 chennel이라는 매개변수를 넣어주었습니다. **위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다. 유튜브를 보면서 정리된 글을 보면 더 좋을것같아요! Vuejs 2 . 뷰 데이터 (data) 와 메소드 (methods) 데이터안에 변수를 넣어 웹브라우저에 표현하는 방법입니다. 아래 두 코드 모두 같은 결과를 보여줍니다. 메소드 안에는 함수를 넣을 수 있습니다. 메소드 안에 nextYear라는 함수를 넣어 출력하였습니다. nextYear함수에 greeting이라는 매개변수를 넣어주었습니다. 그리고 '안녕하세요'라는 인자를 넣었주었습니다. **인자란? 함수를 사용할때 넣어주는 값(아규먼트) **매개변수란? 함수안에서 설정된 변수(파라미터) function을 생략하여 적을 수 있습니다. **위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다. 유튜브를 보면서 정리된 글을 보면 더 좋을것같아요! Vuejs 2 . 뷰 인스턴스 생성하기 아래의 링크에서 CDN을 복사하여 헤드에 넣어주면 뷰를 사용할 수 있습니다. https://kr.vuejs.org/v2/guide/installation.html 설치방법 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 데이터 오브젝트안에 name이라는 변수를 만들어서 웹브라우저안에 보여주는 방법입니다. **위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다. 유튜브강의를 들으면서 정리된 글을 보면 더 좋을것같아요! Vue.js 3 이벤트 웹 개발을 할 때 이벤트라는것은 어떤 행동을 했을 때 어떤 일이 일어나는것을 의미합니다. 클릭이벤트가 일어나는 예제입니다. 먼저 css는 부트스트랩을 이용하였습니다. index.html에 부트스트랩 CDN을 링크해주었습니다. 태그를 만들고 class를 넣어주어 부트스트랩의 css를 이용한 버튼을 만들었습니다. 태그 속성에 v-on:click 속성을 넣어주고 속성값으로 consoleLog함수를 넣어주었습니다. consoleLog함수는 버튼을 클릭하였을때 console.log에 'hello world'라는 스트링값이 뜨도록 만들었고 이 함수가 에 접근할 수 있도록 return에 넣어주었습니다. 이번에는 버튼을 클릭하면 버튼위의 'inyoung'이 'inyoung world'로 바뀌게 코드를 작성해보겠습니다... Vue.js 3 함수를 사용하는 방법 함수를 이용하여 name값을 변경할것이다. greeting이라는 변수에 함수를 넣어주었다. 함수는 화살표 함수로 만들었다. 'Hello'라는 값을 리턴하도록 하였다. 그리고 greeting이라는 함수를 setup함수에서 리턴을 해주었다. 이렇게 하면 greeting이라는 함수가 template에 접근이 가능하다. name 데이터 대신 greeting()을 넣어 'Hello'가 출력되도록 만들었다. 이번에는 greeting에서 name이라는 매개변수를 받도록 하였다. 그리고 'Hello, '+name 이라는 값을 리턴하는 함수로 만들었다. 그다음 name을 greeting인자로 넣어 Hello, inyoung이 출력되도록 하였다. 위의 예제를 아래처럼 작성해도 같은 결과를 도출할 수 있다. 함수를 여러개 .. Vue.js2 => Vue.js3 바뀐점 Vue.js2 에서는 안에 컨텐츠를 작성할 때 반드시 모든 태그를 감싸는 태그가 필요했다. 의미가 없더라도. 그러나 Vue.js3에서는 루트태그가 없더라도 정상적으로 인식된다. **위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다. 유튜브를 보면서 정리된 글을 보면 더 좋을것같아요! Vue.js 3 컴포넌트 1. Vue 컴포넌트란? 이름에서도 알 수 있듯이 부품이라는 뜻이다. 즉 개발을 할 때 컴포넌트를 필요할 때 언제든 가져다 사용할 수 있다. 컴포넌트 파일을 만들때 확장자는 .vue가 들어간다. 2. 컴포넌트 구조 컴포넌트의 구조는 , , 3가지 태그로 구성된다. 3. 컴포넌트 작성 컴포지션 API를 사용하였다. 컴포지션 API는 Vue.js 3 에 새롭게 추가된 API이다. => setup() **위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다. 유튜브를 보면서 정리된 글을 보면 더 좋을것같아요! 이전 1 2 3 4 5 다음
